デザイン規定

サイト運用に使用できるスタイルをまとめたページです。統一化を図り、一貫性を保つための情報です。

目次

  1. 見出し
    1. h2見出し
      1. h3見出し
        1. h4見出し
          1. h5見出し
            1. h6見出し
  2. テキスト
    1. リード文
    2. 強調テキスト1
    3. 強調テキスト2
    4. 強調テキスト3
    5. strong強調
    6. markハイライト
    7. 注意書き
    8. ulリスト
    9. olリスト
    10. チェックリスト
    11. 番号リスト1
    12. 番号リスト2
    13. 必要書類1
    14. 必要書類2
    15. キャプションボックス1
    16. キャプションボックス2
    17. キャプションボックス3
    18. blockquote 引用
    19. FAQ1
    20. FAQ2
    21. FAQ3
    22. FAQ4
    23. LINE風 対話
    24. 準備中・中央寄せ
    25. コンセプト
    26. Before / After
    27. 悩み1
    28. 数字デザイン1
    29. 数字デザイン2
    30. 実績表示
    31. キャッチコピー1
    32. キャッチコピー2
    33. キャッチコピー3
    34. 1日のスケジュール(縦並び)
    35. 1年のスケジュール(横並び)
    36. 代表挨拶1
    37. 代表挨拶2
    38. 代表挨拶3
    39. 代表挨拶4
    40. ニュース更新日
    41. 目次とコラム
  3. リンク
    1. コンバージョン
    2. ミニコンバージョン
    3. 外部リンクアイコン
    4. 更に詳しく
    5. pager
    6. pdf
    7. 関連ページ
    8. ページ内横スクロールナビ
    9. パンくずリンク
    10. CTA1
    11. CTA2
    12. CTA3
    13. CTA4
    14. CTA5
    15. CTA6
  4. カード(横並びカラム)
    1. 2カラム ul li
    2. 2カラム ul li 装飾版
    3. 3カラム ul li
    4. 4カラム ul li(タブレット以下3カラム)
    5. 5カラム ul li(タブレット以下4カラム)
    6. 6カラム ul li(タブレット以下4カラム)
    7. 2カラム box
    8. 3カラム box
    9. 4カラム box
    10. 親ページ ul li
    11. カード1
    12. カード2
    13. カード3
    14. お客様の声1
    15. お客様の声2
    16. お客様の声3
    17. スタッフ紹介1
    18. スタッフ紹介2
    19. スタッフ紹介3
  5. 表・チャート
    1. data
    2. chart
    3. scrollhint
    4. 大きな表組
    5. dl dt dd
    6. フロー ol li 1
    7. フロー ol li 2
    8. フロー ol li 3
    9. フロー ol li 4
    10. フローセクション1
    11. フローセクション2
  6. メディア
    1. iframe mapなど
    2. youtube動画
    3. 画像横幅100%
    4. 画像左寄せ
    5. 画像右寄せ
    6. video
    7. スクリーンショット(影付き画像)
    8. 画像幅 100% 中央寄せ
    9. 画像表示(複数メディア掲載)
  7. 料金比較テーブル
    1. 料金比較1
    2. 料金比較2
    3. 料金比較3
    4. 料金比較4
    5. 料金比較5
    6. 料金比較6

見出し一覧(h2見出し)

h2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキスト。

<h2>見出し一覧(h2見出し)</h2>
<p>h2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキストh2p テキストテキストテキスト。</p>

h3見出し

1行あたり36文字以内(width:640pxくらい)で改行が望ましい。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。

<h3>h3見出し</h3>
<p>1行あたり36文字以内(width:640pxくらい)で改行が望ましい。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。<a href="/">ここに本文テキストが入ります。</a>ここに本文テキストが入ります。<a href="/">ここに本文テキストが入ります。</a>ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。ここに本文テキストが入ります。</p>

h4見出し

h4-p テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<h4>h4見出し</h4>
<p>h4-p テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
h5見出し

h5-p テキストテキストテキストテキストテキストテキストテキストテキストテキスト

<h5>h5見出し</h5>
<p>h5-p テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
h6見出し

h6-p テキストテキストテキストテキストテキストテキストテキストテキストテキスト

<h6>h6見出し</h6>
<p>h6-p テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

テキスト

リード文

これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。

<p class="c-lead">これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。これはページの冒頭に来るリード文です。少しフォントサイズを大きくしています。</p>
コピー完了

強調テキスト1

だから私は会社の経営理念に人が幸せになるあり方の追求という言葉を選びました。

<div class="c-st1">
        <p>だから私は会社の経営理念に<span>人が幸せになるあり方の追求</span>という言葉を選びました。</p>
</div>
コピー完了

強調テキスト2

だから私は会社の経営理念に人が幸せになるあり方の追求という言葉を選びました。

<div class="c-st2">
        <p>だから私は会社の経営理念に<span><strong>人が幸せになるあり方の追求</strong></span>という言葉を選びました。</p>
</div>
コピー完了

強調テキスト3

だから私は会社の経営理念に人が幸せになるあり方の追求という言葉を選びました。

<div class="c-st3">
        <p>だから私は会社の経営理念に<span>人が幸せになるあり方の追求</span>という言葉を選びました。</p>
</div>
コピー完了

strong強調

私たちが本当に強調をしたいのは、我々の信念です。私たちの想いや信念を理解してもらえることこそが、今回のミッションだと考えています。

<p>私たちが本当に<strong>強調をしたいのは、我々の信念</strong>です。私たちの想いや信念を理解してもらえることこそが、今回のミッションだと考えています。</p>
コピー完了

markハイライト

私たちが本当に強調をしたいのは、我々の信念です。私たちの想いや信念を理解してもらえることこそが、今回のミッションだと考えています。

<p>私たちが本当に<mark>強調をしたいのは、我々の信念</mark>です。私たちの想いや信念を理解してもらえることこそが、今回のミッションだと考えています。</p>
コピー完了

注意書き

※注釈:14px Regular
注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。
注釈のテキストが入ります。注釈のテキストが入ります。

<p class="c-annotation">※注釈:14px Regular<br>注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。<br>注釈のテキストが入ります。注釈のテキストが入ります。</p>
コピー完了

ulリスト

  • リストリストリスト
  • リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。
  • リスト
  • リスト
  • リスト
  • リスト
<ul class="c-listing">
        <li>リストリストリスト</li>
        <li>リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
    </ul>
コピー完了

olリスト

  1. リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。
  2. リスト
  3. リストリストリストリストリストリスト
  4. リストリストリストリストリストリスト
  5. リスト
  6. リスト
<ol class="c-listing">
    <li>リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。</li>
    <li>リスト</li>
    <li>リストリストリストリストリストリスト</li>
    <li>リストリストリストリストリストリスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ol>
コピー完了

チェックリスト

  • チェックリストのテキストが入ります。
  • チェックリストのテキストが入ります。
  • チェックリストのテキストが入ります。
  • チェックリストのテキストが入ります。
  • チェックリストのテキストが入ります。
<ul class="c-checklist">
    <li>チェックリストのテキストが入ります。</li>
    <li>チェックリストのテキストが入ります。</li>
    <li>チェックリストのテキストが入ります。</li>
    <li>チェックリストのテキストが入ります。</li>
    <li>チェックリストのテキストが入ります。</li>
</ul>
コピー完了

番号リスト1

  1. 番号付きリストのテキストが入ります。
  2. 番号付きリストのテキストが入ります。
  3. 番号付きリストのテキストが入ります。
  4. 番号付きリストのテキストが入ります。
  5. 番号付きリストのテキストが入ります。
<ol class="c-numlist1">
    <li>番号付きリストのテキストが入ります。</li>
    <li>番号付きリストのテキストが入ります。</li>
    <li>番号付きリストのテキストが入ります。</li>
    <li>番号付きリストのテキストが入ります。</li>
    <li>番号付きリストのテキストが入ります。</li>
</ol>
コピー完了

番号リスト2

  1. 番号付きリストのテキストが入ります。
  2. 番号付きリストのテキストが入ります。
  3. 番号付きリストのテキストが入ります。
  4. 番号付きリストのテキストが入ります。
  5. 番号付きリストのテキストが入ります。
<ol class="c-numlist2">
    <li>番号付きリストのテキストが入ります。</li>
    <li>番号付きリストのテキストが入ります。</li>
    <li>番号付きリストのテキストが入ります。</li>
    <li>番号付きリストのテキストが入ります。</li>
    <li>番号付きリストのテキストが入ります。</li>
</ol>
コピー完了

必要書類1

必要書類

  • 商業登記簿謄本
  • 身分証明書
  • 決算書または確定申告書
  • 印鑑証明書
  • 取引銀行口座の通帳
  • 請求書・発注書・納品書・個別契約書など
  • 売掛先との基本契約書
<div class="c-document1">
    <p>必要書類</p>
    <ul>
        <li>商業登記簿謄本</li>
        <li>身分証明書</li>
        <li>決算書または確定申告書</li>
        <li>印鑑証明書</li>
        <li>取引銀行口座の通帳</li>
        <li>請求書・発注書・納品書・個別契約書など</li>
        <li>売掛先との基本契約書</li>
    </ul>
</div>
コピー完了

必要書類2

必要書類

  • 商業登記簿謄本
  • 身分証明書
  • 決算書または確定申告書
  • 印鑑証明書
  • 取引銀行口座の通帳
  • 請求書・発注書・納品書・個別契約書など
  • 売掛先との基本契約書
<div class="c-document2">
    <p>必要書類</p>
    <ul>
        <li>商業登記簿謄本</li>
        <li>身分証明書</li>
        <li>決算書または確定申告書</li>
        <li>印鑑証明書</li>
        <li>取引銀行口座の通帳</li>
        <li>請求書・発注書・納品書・個別契約書など</li>
        <li>売掛先との基本契約書</li>
    </ul>
</div>
コピー完了

キャプションボックス1

カレーの作り方

  1. 玉ねぎ・人参・じゃがいも・豚肉を一口大に切る。じゃがいもと人参は皮を剥こう。
  2. 鍋に切った材料を全部入れて煮込んでいきましょう。あくが浮いてきたら取り除きます。
  3. カレールーを入れましょう。カレールーを入れたら焦げないように注意して煮込みましょう。
<div class="c-caption1">
    <p>カレーの作り方</p>
    <div>
        <ol>
            <li>玉ねぎ・人参・じゃがいも・豚肉を一口大に切る。じゃがいもと人参は皮を剥こう。</li>
            <li>鍋に切った材料を全部入れて煮込んでいきましょう。あくが浮いてきたら取り除きます。</li>
            <li>カレールーを入れましょう。カレールーを入れたら焦げないように注意して煮込みましょう。</li>
        </ol>
    </div>
</div>
コピー完了

キャプションボックス2

カレーの作り方

  1. 玉ねぎ・人参・じゃがいも・豚肉を一口大に切る。じゃがいもと人参は皮を剥こう。
  2. 鍋に切った材料を全部入れて煮込んでいきましょう。あくが浮いてきたら取り除きます。
  3. カレールーを入れましょう。カレールーを入れたら焦げないように注意して煮込みましょう。
<div class="c-caption2">
    <p>カレーの作り方</p>
    <div>
        <ol>
            <li>玉ねぎ・人参・じゃがいも・豚肉を一口大に切る。じゃがいもと人参は皮を剥こう。</li>
            <li>鍋に切った材料を全部入れて煮込んでいきましょう。あくが浮いてきたら取り除きます。</li>
            <li>カレールーを入れましょう。カレールーを入れたら焦げないように注意して煮込みましょう。</li>
        </ol>
    </div>
</div>
コピー完了

キャプションボックス3

カレーの作り方

  1. 玉ねぎ・人参・じゃがいも・豚肉を一口大に切る。じゃがいもと人参は皮を剥こう。
  2. 鍋に切った材料を全部入れて煮込んでいきましょう。あくが浮いてきたら取り除きます。
  3. カレールーを入れましょう。カレールーを入れたら焦げないように注意して煮込みましょう。
<div class="c-caption3">
    <p>カレーの作り方</p>
    <div>
        <ol>
            <li>玉ねぎ・人参・じゃがいも・豚肉を一口大に切る。じゃがいもと人参は皮を剥こう。</li>
            <li>鍋に切った材料を全部入れて煮込んでいきましょう。あくが浮いてきたら取り除きます。</li>
            <li>カレールーを入れましょう。カレールーを入れたら焦げないように注意して煮込みましょう。</li>
        </ol>
    </div>
</div>
コピー完了

blockquote 引用

引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。

引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。

引用元:株式会社AAA

<blockquote>
    <p>引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。 </p>
    <p>引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。引用された文章です。 </p>
    <p class="cite">引用元:<cite>株式会社AAA</cite></p>
</blockquote>
コピー完了

FAQ1

質問1です。質問を記載します。質問1です。質問を記載します。
解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。
質問2です。質問を記載します。質問2です。質問を記載します。写真1
解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。
質問3です。質問を記載します。質問3です。質問を記載します。
解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。
質問4です。質問を記載します。質問4です。質問を記載します。質問を記載します。質問を記載します。
解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。写真
質問5です。質問を記載します。質問5です。質問を記載します。
解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。
<dl class="c-faq">
    <dt><span>質問1です。質問を記載します。質問1です。質問を記載します。</span></dt>
    <dd><span>解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。解答1です。回答を記載します。</span></dd>
    <dt><span>質問2です。質問を記載します。質問2です。質問を記載します。<img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="写真1"></span></dt>
    <dd><span>解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。解答2です。回答を記載します。</span></dd>
    <dt><span>質問3です。質問を記載します。質問3です。質問を記載します。</span></dt>
    <dd><span>解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。解答3です。回答を記載します。</span></dd>
    <dt><span>質問4です。質問を記載します。質問4です。質問を記載します。質問を記載します。質問を記載します。</span></dt>
    <dd><span>解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。解答4です。回答を記載します。<img src="https://v2.s-contigo.website/images/img/regulation/dum_01.jpg" alt="写真"  width="600" height="450"></span></dd>
    <dt><span>質問5です。質問を記載します。質問5です。質問を記載します。</span></dt>
    <dd><span>解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。解答5です。回答を記載します。</span></dd>
</dl>
コピー完了

FAQ2

初期費用はかかりますか?
初期費用はかかりません。また、月額費用以外に追加で費用が発生することもありません。
契約期間の縛りはありますか?
最低契約期間はありません。1か月単位でご利用いただけます。
<dl class="c-faq2">
    <div>
        <dt>初期費用はかかりますか?</dt>
        <dd>初期費用はかかりません。また、月額費用以外に追加で費用が発生することもありません。</dd>
    </div>
    <div>
        <dt>契約期間の縛りはありますか?</dt>
        <dd>最低契約期間はありません。1か月単位でご利用いただけます。</dd>
    </div>
</dl>
コピー完了

FAQ3

決済手数料・振込手数料はどのくらいですか?

決済手数料は決済方法により異なります。詳しくはこちらをご覧ください。

対応しているクレジットカードを教えてください。

VISA・Mastercard・JCB・American Express・Dinersに対応しています。

申し込みからどのくらいで利用開始できますか?

お申し込みから最短3営業日でご利用いただけます。

<details class="c-faq3" open>
    <summary>決済手数料・振込手数料はどのくらいですか?</summary>
    <p>決済手数料は決済方法により異なります。詳しくは<a href="/">こちら</a>をご覧ください。</p>
</details>
<details class="c-faq3">
    <summary>対応しているクレジットカードを教えてください。</summary>
    <p>VISA・Mastercard・JCB・American Express・Dinersに対応しています。</p>
</details>
<details class="c-faq3">
    <summary>申し込みからどのくらいで利用開始できますか?</summary>
    <p>お申し込みから最短3営業日でご利用いただけます。</p>
</details>
コピー完了

FAQ4

初期費用はかかりますか?

初期費用はかかりません。また、月額費用以外に追加で費用が発生することもありません。

途中で解約した場合、違約金はありますか?

違約金はありません。解約月の月額費用のみお支払いいただきます。

<details class="c-faq4" open>
    <summary>初期費用はかかりますか?</summary>
    <p>初期費用はかかりません。また、月額費用以外に追加で費用が発生することもありません。</p>
</details>
<details class="c-faq4">
    <summary>途中で解約した場合、違約金はありますか?</summary>
    <p>違約金はありません。解約月の月額費用のみお支払いいただきます。</p>
</details>
コピー完了

LINE風 対話

お客様 お客様

3月15日に注文したAG-0473の納期を教えていただけますか?宜しくお願いします。

弊社 弊社

おはようございます、かしこまりました。

全て商品が揃い次第発送させていただきます。もうしばらくお待ち下さい。

概算で4月下旬を予定していますが、工場の混雑状況や税関の都合により遅延が発生する場合があります。遅延が発生する場合は事前にお知らせいたします。よろしくお願いします。

お客様 お客様

別途で注文をした、以下の商品の在庫状況を教えていただけますか?

写真の説明文

弊社 弊社

後ほどメールにて在庫表を送らせていただきますが、弊社のオンラインサイトからもご覧になれます。

<div class="c-chat left">
    <p class="img">
        <img src="/images/common/logo.svg" alt="お客様" width="60" height="60">
        <span>お客様</span>
    </p>
    <div class="txt">
        <p>3月15日に注文したAG-0473の納期を教えていただけますか?宜しくお願いします。</p>
    </div>
</div>

<div class="c-chat right">
    <p class="img">
        <img src="https://v2.s-contigo.website/images/img/regulation/contigo.svg" alt="弊社" width="60" height="60">
        <span>弊社</span>
    </p>
    <div class="txt">
        <p>おはようございます、かしこまりました。</p>
        <p>全て商品が揃い次第発送させていただきます。もうしばらくお待ち下さい。</p>
        <p>概算で4月下旬を予定していますが、工場の混雑状況や税関の都合により遅延が発生する場合があります。遅延が発生する場合は事前にお知らせいたします。よろしくお願いします。</p>
    </div>
</div>

<div class="c-chat left">
    <p class="img">
        <img src="/images/common/logo.svg" alt="お客様" width="60" height="60">
        <span>お客様</span>
    </p>
    <div class="txt">
        <p>別途で注文をした、以下の商品の在庫状況を教えていただけますか?</p>
        <p><img src="https://v2.s-contigo.website/images/img/regulation/dum_01.jpg" alt="写真の説明文" width="400" height="300"></p>
    </div>
</div>

<div class="c-chat right">
    <p class="img">
        <img src="https://v2.s-contigo.website/images/img/regulation/contigo.svg" alt="弊社" width="60" height="60">
        <span>弊社</span>
    </p>
    <div class="txt">
        <p>後ほどメールにて在庫表を送らせていただきますが、弊社の<a href="https://www.agrina-s.com/online" target="_blank">オンラインサイト</a>からもご覧になれます。</p>
    </div>
</div>
コピー完了

準備中・中央寄せ

準備中
<div class="c-const">準備中</div>
コピー完了

コンセプト

CONCEPT

こだわりに
こだわりぬいて

私たちのミッションは、お客様のビジネスに
最適なオンラインプレゼンスを提供すること。

私たちはユーザビリティに優れた
ホームページを制作し、魅力的なデザインと
使いやすいナビゲーションを組み合わせています。

また、最新のウェブ技術とSEO対策を駆使し、
検索エンジンでの上位表示を目指します。

お客様のニーズに合わせた
カスタマイズと迅速なサポートを提供し、
ビジネスの成長をサポートします。

信頼性と専門性を大切にし、
お客様の成功を共に追求する
パートナーとしてお手伝いいたします。

CONCEPT CHANGE HERE
<div class="c-concept">
<div class="concept-left">
<p class="tit">CONCEPT</p>
<p class="catchcopy">こだわりに<br>こだわりぬいて</p>
</div>
<div class="concept-right">
<p>私たちのミッションは、お客様のビジネスに<br>最適なオンラインプレゼンスを提供すること。</p>
<p>私たちはユーザビリティに優れた<br>ホームページを制作し、魅力的なデザインと<br>使いやすいナビゲーションを組み合わせています。</p>
<p>また、最新のウェブ技術とSEO対策を駆使し、<br>検索エンジンでの上位表示を目指します。</p>
<p>お客様のニーズに合わせた<br>カスタマイズと迅速なサポートを提供し、<br>ビジネスの成長をサポートします。</p>
<p>信頼性と専門性を大切にし、<br>お客様の成功を共に追求する<br>パートナーとしてお手伝いいたします。</p>
</div>
<div class="concept-bg">CONCEPT CHANGE HERE</div>
</div>
コピー完了

Before / After

  • BEFORE切り抜き前の画像切り抜き前の画像
  • AFTER切り抜き後の画像AFTER切り抜き後の画像(画像をクリックで拡大)
<ul class="c-before-after">
    <li><img src="https://v2.s-contigo.website/images/img/regulation/img-before.jpg" width="1280" height="1820" alt="BEFORE切り抜き前の画像">切り抜き前の画像</li>
    <li><a href="https://v2.s-contigo.website/images/img/regulation/img-after.jpg" rel="cbox"><img src="https://v2.s-contigo.website/images/img/regulation/img-after.jpg" width="1280" height="1820" alt="AFTER切り抜き後の画像"></a>AFTER切り抜き後の画像(画像をクリックで拡大)</li>
</ul>
コピー完了

悩み1

  • とにかくコストを抑えたい
  • 時間がない
  • 業務を一本化したい
<ul class="c-worry1">
    <li><small>とにかく</small><span>コストを抑えたい</span></li>
    <li><span>時間がない</span></li>
    <li><span>業務を一本化したい</span></li>
</ul>
コピー完了

数字デザイン1

<div class="c-number1">
    <div>
        <p>事業所</p>
        <p>12</p>
    </div>
    <p><a href="/">事業所一覧ページへ</a></p>
</div>
コピー完了

数字デザイン2

業績

売上高
2,000億円
営業利益
300億円
<div class="c-number2">
    <p>業績</p>
    <dl>
        <div><dt>売上高</dt><dd>2,000<span>億円</span></dd></div>
        <div><dt>営業利益</dt><dd>300<span>億円</span></dd></div>
    </dl>
</div>
コピー完了

実績表示

  • 契約社数

    2,000

  • 顧客満足度

    99.66%

<ul class="c-achievement">
    <li>
        <p><i class="far fa-building" aria-hidden="true"></i>契約社数</p>
        <p>2,000<span>社</span></p>
    </li>
    <li>
        <p><i class="far fa-user" aria-hidden="true"></i>顧客満足度</p>
        <p>99.66<span>%</span></p>
    </li>
</ul>
コピー完了

キャッチコピー1

あなたの未来の一歩を
私たちと一緒に踏み出しましょう!

<div class="c-catch1">
    <p>あなたの未来の一歩を<br>私たちと一緒に踏み出しましょう!</p>
</div>
コピー完了

キャッチコピー2

未来へ続くものづくりへ、
挑戦を重ねていく

<div class="c-catch2">
    <p>未来へ続くものづくりへ、<br class="sp">挑戦を重ねていく</p>
</div>
コピー完了

キャッチコピー3

Philosophy

あなたの未来の一歩を
私たちと一緒に踏み出しましょう!

<div class="c-catch3">
    <p class="c-catch3-title">Philosophy</p>
    <p class="c-catch3-txt">あなたの未来の一歩を<br>私たちと一緒に踏み出しましょう!</p>
</div>
コピー完了

1日のスケジュール(縦並び)

  • 9:00
    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • 10:00
    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • 11:00
    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • 12:00
    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • 14:00
    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • 15:00
    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • 16:00
    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • 17:00
    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキスト

<div class="c-aday">
    <ul>
        <li>
            <div class="c-aday-time">9:00</div>
            <div class="c-aday-container">
                <div class="c-aday-tit">タイトル</div>
                <div class="c-aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="c-aday-time">10:00</div>
            <div class="c-aday-container">
                <div class="c-aday-tit">タイトル</div>
                <div class="c-aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="c-aday-time">11:00</div>
            <div class="c-aday-container">
                <div class="c-aday-tit">タイトル</div>
                <div class="c-aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="c-aday-time">12:00</div>
            <div class="c-aday-container">
                <div class="c-aday-tit">タイトル</div>
                <div class="c-aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="c-aday-time">14:00</div>
            <div class="c-aday-container">
                <div class="c-aday-tit">タイトル</div>
                <div class="c-aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="c-aday-time">15:00</div>
            <div class="c-aday-container">
                <div class="c-aday-tit">タイトル</div>
                <div class="c-aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="c-aday-time">16:00</div>
            <div class="c-aday-container">
                <div class="c-aday-tit">タイトル</div>
                <div class="c-aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="c-aday-time">17:00</div>
            <div class="c-aday-container">
                <div class="c-aday-tit">タイトル</div>
                <div class="c-aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
    </ul>
</div>
コピー完了

1年のスケジュール(横並び)

  • 4月
    • 4種サッカーリーグ(4月~9月)
    • 青年会議所杯
  • 5月
    • 富士見市サッカー協会杯
  • 6月
    • 志木教育リーグ(年間)
    • 埼玉Sリーグ(年間)
  • 7月
    • 富士見市フットサル大会
  • 8月
    • 合宿 2泊3日
    • 西部地区育成大会
  • 9月
    • 富士見市増進スポーツ杯
    • 埼玉県スポーツ少年団大会U10
    • 埼玉県スポーツ少年団大会U12
  • 10月
    • 富士見市民スポーツ大会
  • 11月
    • 新人戦
  • 12月
    • フットサル大会
    • 親子サッカー(学年毎 親子で対決)
    • クリスマス会(会食、ビンゴゲーム他)
  • 1月
    • 初詣、初蹴
    • 大東武州ガス杯
  • 2月
    • 協会杯U11
    • くらづくり店舗杯
    • 東武鉄道杯
  • 3月
    • 富士見市送別大会
    • 卒団式、親子サッカー
<div class="c-year">
	<ul>
		<li>
			<div class="c-year-time">4月</div>
			<div class="c-year-container">
				<ul>
					<li>4種サッカーリーグ(4月~9月)</li>
					<li>青年会議所杯</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">5月</div>
			<div class="c-year-container">
				<ul>
					<li>富士見市サッカー協会杯</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">6月</div>
			<div class="c-year-container">
				<ul>
					<li>志木教育リーグ(年間)</li>
					<li>埼玉Sリーグ(年間)</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">7月</div>
			<div class="c-year-container">
				<ul>
					<li>富士見市フットサル大会</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">8月</div>
			<div class="c-year-container">
				<ul>
					<li>合宿 2泊3日</li>
					<li>西部地区育成大会</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">9月</div>
			<div class="c-year-container">
				<ul>
					<li>富士見市増進スポーツ杯</li>
					<li>埼玉県スポーツ少年団大会<span>U10</span></li>
					<li>埼玉県スポーツ少年団大会<span>U12</span></li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">10月</div>
			<div class="c-year-container">
				<ul>
					<li>富士見市民スポーツ大会</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">11月</div>
			<div class="c-year-container">
				<ul>
					<li>新人戦</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">12月</div>
			<div class="c-year-container">
				<ul>
					<li>フットサル大会</li>
					<li>親子サッカー(学年毎 親子で対決)</li>
					<li>クリスマス会(会食、ビンゴゲーム他)</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">1月</div>
			<div class="c-year-container">
				<ul>
					<li>初詣、初蹴</li>
					<li>大東武州ガス杯</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">2月</div>
			<div class="c-year-container">
				<ul>
					<li>協会杯<span>U11</span></li>
					<li>くらづくり店舗杯</li>
					<li>東武鉄道杯</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="c-year-time">3月</div>
			<div class="c-year-container">
				<ul>
					<li>富士見市送別大会</li>
					<li>卒団式、親子サッカー</li>
				</ul>
			</div>
		</li>
	</ul>
</div>
コピー完了

代表挨拶1

鈴木 一郎の写真

代表取締役 鈴木 一郎

未来へ続くものづくりへ
挑戦を重ねていく

テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。

<div class="c-deputy1">
        <div class="right">
            <div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/deputy_01.webp" alt="鈴木 一郎の写真" width="640" height="420"></div>
            <p class="name">代表取締役  鈴木 一郎</p>
        </div>
        <div class="left">
            <p class="philosophy-txt">未来へ続くものづくりへ<br>挑戦を重ねていく</p>
            <p>テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。</p>
        </div>
</div>
コピー完了

代表挨拶2

代表取締役 鈴木 一郎の画像

未来へ続くものづくりへ
挑戦を重ねていく

テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。

<div class="c-deputy2">
    <div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/deputy_02.webp" alt="代表取締役 鈴木 一郎の画像" width="1280" height="592"></div>
    <div class="c-deputy2-container">
        <p  class="philosophy-txt">未来へ続くものづくりへ<br>挑戦を重ねていく</p>
        <p>テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。</p>
    </div>
</div>
コピー完了

代表挨拶3

Philosophy経営理念

新たな社会づくりを目指して

テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。

代表取締役 鈴木 一郎

代表取締役 鈴木 一郎の画像
<div class="c-deputy3">
    <p class="philosophy-txt">Philosophy<span>経営理念</span></p>
    <p class="c-lead">新たな社会づくりを目指して</p>
    <div class="c-deputy3-container">
        <div class="left">
            <p class="txt">テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。</p>
            <p class="name">代表取締役 鈴木 一郎</p>
        </div>
        <div class="right">
            <div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/deputy_03.webp" width="600" height="600" alt="代表取締役 鈴木 一郎の画像"></div>
        </div>
    </div>
</div>
コピー完了

代表挨拶4

未来へ続くものづくりへ 挑戦を重ねていく

代表取締役 鈴木 一郎

代表取締役 鈴木 一郎の画像

テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。

<div class="c-deputy4">
    <p class="philosophy-txt">未来へ続くものづくりへ 挑戦を重ねていく</p>
    <p class="name">代表取締役 鈴木 一郎</p>
    <div class="c-deputy4-container">
        <div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/deputy_03.webp" width="600" height="600" alt="代表取締役 鈴木 一郎の画像"></div>
        <p class="txt">テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。</p>
    </div>
</div>
コピー完了

ニュース更新日

  • NEW
  • 2026/02/16 更新
<ul class="c-update-date">
    <li><span>NEW</span></li>
    <li>2026/02/16 更新</li>
</ul>
コピー完了

目次とコラム

管理画面:レイアウト設定を表示する>目次付き(コピーをしても動作しません)

<p>管理画面:レイアウト設定を表示する>目次付き(コピーをしても動作しません)</p>
コピー完了

カード(横並びカラム)

2カラム ul li

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="c-twoColumns">
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389">画像キャプション</li>
</ul>
コピー完了

2カラム ul li 装飾版

  • 画像
  • 画像
  • 画像
  • 画像
<ul class="c-twodesign">
        <li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389"></li>
        <li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389"></li>
        <li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389"></li>
        <li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="519" height="389"></li>
    </ul>
コピー完了

3カラム ul li

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="c-threeColumns">
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="339" height="254">画像キャプション</li>
</ul>
コピー完了

4カラム ul li(タブレット以下3カラム)

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="c-fourColumns">
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="249" height="187">画像キャプション</li>
</ul>
コピー完了

5カラム ul li(タブレット以下4カラム)

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="c-fiveColumns">
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146"></li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="195" height="146">画像キャプション</li>
</ul>
コピー完了

6カラム ul li(タブレット以下4カラム)

  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像
  • 画像
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
  • 画像画像キャプション
<ul class="c-sixColumns">
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119"></li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119"></li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
<li><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="画像" width="159" height="119">画像キャプション</li>
</ul>
コピー完了

2カラム box

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

<div class="c-flex-container-two">
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
</div>
コピー完了

3カラム box

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

<div class="c-flex-container-three">
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
</div>
コピー完了

4カラム box

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

内部ページ

画像で表すHTML構造<

説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。

<div class="c-flex-container-four">
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
<section>
<h3>内部ページ</h3>
<div><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" width="1280" height="300" alt="画像で表すHTML構造<"></div>
<p>説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。説明文の挿入。</p>
</section>
</div>
コピー完了

親ページ ul li

<ul class="c-page-parent">
    <li><a href="#">選ばれる理由</a></li>
    <li><a href="#">お客様の声</a></li>
    <li><a href="#">サービス一覧</a></li>
    <li><a href="#">施工事例</a></li>
    <li><a href="#">施工までの流れ</a></li>
</ul>
コピー完了

カード1

画像

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

画像

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

画像

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

<div class="c-card1-container">
    <section>
        <figure><img src="https://v2.s-contigo.website/images/img/regulation/deputy_02.webp" width="800" height="533" alt="画像"></figure>
        <h3>タイトルタイトル</h3>
        <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
    <section>
        <figure><img src="https://v2.s-contigo.website/images/img/regulation/deputy_02.webp" width="800" height="533" alt="画像"></figure>
        <h3>タイトルタイトル</h3>
        <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
    <section>
        <figure><img src="https://v2.s-contigo.website/images/img/regulation/deputy_02.webp" width="800" height="533" alt="画像"></figure>
        <h3>タイトルタイトル</h3>
        <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
</div>
コピー完了

カード2

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

<div class="c-card2-container">
    <section data-case-prefix="scene">
        <h3>タイトルタイトル</h3>
        <p data-label="悩み">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        <p data-label="解決策">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
    <section data-case-prefix="scene">
        <h3>タイトルタイトル</h3>
        <p data-label="悩み">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        <p data-label="解決策">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
    <section data-case-prefix="scene">
        <h3>タイトルタイトル</h3>
        <p data-label="悩み">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        <p data-label="解決策">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
</div>
コピー完了

カード3

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

タイトルタイトル

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

<div class="c-card3-container">
    <section>
        <h3>タイトルタイトル</h3>
        <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
    <section>
        <h3>タイトルタイトル</h3>
        <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
    <section>
        <h3>タイトルタイトル</h3>
        <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    </section>
</div>
コピー完了

お客様の声1

  • A社

    とても助かりました!A社 企画部

    お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。

  • B社

    効率が上がりました。B社 経理部

    お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。

  • C社

    サポートに感謝です。C社 経理部

    お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。

<ul class="c-customer1">
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/customer_icon01.svg" alt="A社">
        <div>
            <p>とても助かりました!<span>A社 企画部</span></p>
            <p>お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。</p>
        </div>
    </li>
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/customer_icon02.svg" alt="B社">
        <div>
            <p>効率が上がりました。<span>B社 経理部</span></p>
            <p>お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。</p>
        </div>
    </li>
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/customer_icon03.svg" alt="C社">
        <div>
            <p>サポートに感謝です。<span>C社 経理部</span></p>
            <p>お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。</p>
        </div>
    </li>
</ul>
コピー完了

お客様の声2

  • 企画部

    お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。

  • 経理部

    お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。

<ul class="c-customer2">
    <li>
        <p>企画部</p>
        <div>
            <img src="https://v2.s-contigo.website/images/img/regulation/customer_icon04.svg" alt="">
            <p><a href="/">とても助かりました!</a></p>
        </div>
        <p>お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。</p>
    </li>
    <li>
        <p>経理部</p>
        <div>
            <img src="https://v2.s-contigo.website/images/img/regulation/customer_icon05.svg" alt="">
            <p><a href="/">サポートに感謝です。</a></p>
        </div>
        <p>お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。</p>
    </li>
</ul>
コピー完了

お客様の声3

  • Aさん

    Aさん
    60代 男性

    ○○についてのご相談

    お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。

  • Bさん

    Bさん
    40代 女性

    ○○についてのご相談

    お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。

  • Cさん

    Cさん
    30代 女性

    ○○についてのご相談

    お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。

<ul class="c-customer3">
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/customer_icon06.svg" alt="Aさん">
        <p>Aさん<br>60代 男性</p>
        <p>○○についてのご相談</p>
        <p>お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。</p>
    </li>
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/customer_icon07.svg" alt="Bさん">
        <p>Bさん<br>40代 女性</p>
        <p>○○についてのご相談</p>
        <p>お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。</p>
    </li>
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/customer_icon08.svg" alt="Cさん">
        <p>Cさん<br>30代 女性</p>
        <p>○○についてのご相談</p>
        <p>お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。お客様の感想が入ります。</p>
    </li>
</ul>
コピー完了

スタッフ紹介1

<ul class="c-staff1">
    <li>
        <a href="/">
            <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff01.webp" alt="山田 太郎">
            <p>山田 太郎<span>Taro Yamada</span></p>
        </a>
    </li>
    <li>
        <a href="/">
            <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff02.webp" alt="鈴木 花子">
            <p>鈴木 花子<span>Hanako Suzuki</span></p>
        </a>
    </li>
    <li>
        <a href="/">
            <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff03.webp" alt="田中 次郎">
            <p>田中 次郎<span>Jiro Tanaka</span></p>
        </a>
    </li>
</ul>
コピー完了

スタッフ紹介2

  • エンジニア

    山田 太郎

    山田 太郎Taro Yamada

  • 総務

    鈴木 花子

    鈴木 花子Hanako Suzuki

  • デザイナー

    田中 美穂

    田中 美穂Miho Tanaka

<ul class="c-staff2">
    <li>
        <p>エンジニア</p>
        <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff04.webp" alt="山田 太郎">
        <p>山田 太郎<span>Taro Yamada</span></p>
    </li>
    <li>
        <p>総務</p>
        <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff05.webp" alt="鈴木 花子">
        <p>鈴木 花子<span>Hanako Suzuki</span></p>
    </li>
    <li>
        <p>デザイナー</p>
        <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff06.webp" alt="田中 美穂">
        <p>田中 美穂<span>Miho Tanaka</span></p>
    </li>
</ul>
コピー完了

スタッフ紹介3

  • 田中 美穂

    役職名田中 美穂Miho Tanaka

    プロフィールのテキストが入ります。プロフィールのテキストが入ります。プロフィールのテキストが入ります。

  • 山田 太郎

    役職名山田 太郎Taro Yamada

    プロフィールのテキストが入ります。プロフィールのテキストが入ります。プロフィールのテキストが入ります。

  • 鈴木 花子

    役職名鈴木 花子Hanako Suzuki

    プロフィールのテキストが入ります。プロフィールのテキストが入ります。プロフィールのテキストが入ります。

  • 佐藤 次郎

    役職名佐藤 次郎Jiro Sato

    プロフィールのテキストが入ります。プロフィールのテキストが入ります。プロフィールのテキストが入ります。

<ul class="c-staff3">
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff07.webp" alt="田中 美穂">
        <p><small>役職名</small>田中 美穂<span>Miho Tanaka</span></p>
        <p>プロフィールのテキストが入ります。プロフィールのテキストが入ります。プロフィールのテキストが入ります。</p>
    </li>
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff08.webp" alt="山田 太郎">
        <p><small>役職名</small>山田 太郎<span>Taro Yamada</span></p>
        <p>プロフィールのテキストが入ります。プロフィールのテキストが入ります。プロフィールのテキストが入ります。</p>
    </li>
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff09.webp" alt="鈴木 花子">
        <p><small>役職名</small>鈴木 花子<span>Hanako Suzuki</span></p>
        <p>プロフィールのテキストが入ります。プロフィールのテキストが入ります。プロフィールのテキストが入ります。</p>
    </li>
    <li>
        <img src="https://v2.s-contigo.website/images/img/regulation/staff/staff10.webp" alt="佐藤 次郎">
        <p><small>役職名</small>佐藤 次郎<span>Jiro Sato</span></p>
        <p>プロフィールのテキストが入ります。プロフィールのテキストが入ります。プロフィールのテキストが入ります。</p>
    </li>
</ul>
コピー完了

表・チャート

data

シャツ
100 110 120 130 140 150 160 S M L XL 3L 4L 5L
着丈 35.5 39 42.5 45 48.5 52 55 57 59 61 63 66 68 69.5
身幅 31 33.5 36 38.5 41 43.5 46 48 50 52 53.5 55 56.5 58
半袖丈 22.5 24 25.5 27 28.5 30 31.5 33 34 35.5 37 39 40.5 42
長袖丈 48 52 55 59 63 67 71 74 76 78 80 81.5 83 84.5
<div class="c-data">
    <table>
        <caption>シャツ</caption>
        <thead>
            <tr>
                <th></th>
                <th>100</th>
                <th>110</th>
                <th>120</th>
                <th>130</th>
                <th>140</th>
                <th>150</th>
                <th>160</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
                <th>3L</th>
                <th>4L</th>
                <th>5L</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>着丈</th>
                <td>35.5</td>
                <td>39</td>
                <td>42.5</td>
                <td>45</td>
                <td>48.5</td>
                <td>52</td>
                <td>55</td>
                <td>57</td>
                <td>59</td>
                <td>61</td>
                <td>63</td>
                <td>66</td>
                <td>68</td>
                <td>69.5</td>
            </tr>
            <tr>
                <th>身幅</th>
                <td>31</td>
                <td>33.5</td>
                <td>36</td>
                <td>38.5</td>
                <td>41</td>
                <td>43.5</td>
                <td>46</td>
                <td>48</td>
                <td>50</td>
                <td>52</td>
                <td>53.5</td>
                <td>55</td>
                <td>56.5</td>
                <td>58</td>
            </tr>
            <tr>
                <th>半袖丈</th>
                <td>22.5</td>
                <td>24</td>
                <td>25.5</td>
                <td>27</td>
                <td>28.5</td>
                <td>30</td>
                <td>31.5</td>
                <td>33</td>
                <td>34</td>
                <td>35.5</td>
                <td>37</td>
                <td>39</td>
                <td>40.5</td>
                <td>42</td>
            </tr>
            <tr>
                <th>長袖丈</th>
                <td>48</td>
                <td>52</td>
                <td>55</td>
                <td>59</td>
                <td>63</td>
                <td>67</td>
                <td>71</td>
                <td>74</td>
                <td>76</td>
                <td>78</td>
                <td>80</td>
                <td>81.5</td>
                <td>83</td>
                <td>84.5</td>
            </tr>
        </tbody>
    </table>
</div>
コピー完了

chart

関東の県庁所在地
都道府県 市区町村
東京都 新宿区
埼玉県 さいたま市
神奈川県 横浜市
<div class="c-chart">
<table>
    <caption>関東の県庁所在地</caption>
    <thead>
        <tr>
            <th>都道府県</th>
            <th>市区町村</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>東京都</th>
            <td>新宿区</td>
        </tr>
        <tr>
            <th>埼玉県</th>
            <td>さいたま市</td>
        </tr>
        <tr>
            <th>神奈川県</th>
            <td>横浜市</td>
        </tr>
    </tbody>
</table>
</div>
コピー完了

scrollhint

シャツサイズ
100 110 120 130 140 150 160 S M L XL 3L 4L 5L
着丈 35.5 39 42.5 45 48.5 52 55 57 59 61 63 66 68 69.5
身幅 31 33.5 36 38.5 41 43.5 46 48 50 52 53.5 55 56.5 58
半袖丈 22.5 24 25.5 27 28.5 30 31.5 33 34 35.5 37 39 40.5 42
長袖丈 48 52 55 59 63 67 71 74 76 78 80 81.5 83 84.5
<div class="c-scroll">
    <table>
    <caption>シャツサイズ</caption>
        <thead>
            <tr>
                <th></th>
                <th>100</th>
                <th>110</th>
                <th>120</th>
                <th>130</th>
                <th>140</th>
                <th>150</th>
                <th>160</th>
                <th>S</th>
                <th>M</th>
                <th>L</th>
                <th>XL</th>
                <th>3L</th>
                <th>4L</th>
                <th>5L</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>着丈</th>
                <td>35.5</td>
                <td>39</td>
                <td>42.5</td>
                <td>45</td>
                <td>48.5</td>
                <td>52</td>
                <td>55</td>
                <td>57</td>
                <td>59</td>
                <td>61</td>
                <td>63</td>
                <td>66</td>
                <td>68</td>
                <td>69.5</td>
            </tr>
            <tr>
                <th>身幅</th>
                <td>31</td>
                <td>33.5</td>
                <td>36</td>
                <td>38.5</td>
                <td>41</td>
                <td>43.5</td>
                <td>46</td>
                <td>48</td>
                <td>50</td>
                <td>52</td>
                <td>53.5</td>
                <td>55</td>
                <td>56.5</td>
                <td>58</td>
            </tr>
            <tr>
                <th>半袖丈</th>
                <td>22.5</td>
                <td>24</td>
                <td>25.5</td>
                <td>27</td>
                <td>28.5</td>
                <td>30</td>
                <td>31.5</td>
                <td>33</td>
                <td>34</td>
                <td>35.5</td>
                <td>37</td>
                <td>39</td>
                <td>40.5</td>
                <td>42</td>
            </tr>
            <tr>
                <th>長袖丈</th>
                <td>48</td>
                <td>52</td>
                <td>55</td>
                <td>59</td>
                <td>63</td>
                <td>67</td>
                <td>71</td>
                <td>74</td>
                <td>76</td>
                <td>78</td>
                <td>80</td>
                <td>81.5</td>
                <td>83</td>
                <td>84.5</td>
            </tr>
        </tbody>
    </table>
</div>
コピー完了

大きな表組

工事名称 単価 合計 説明
仮設足場 800~1,200円 約12.7万~19万円 足場を組むことで職人が安全に作業できるようになります。姿勢も安定するため丁寧な塗装が可能となります。
飛散防止シート 200~350円 約3.2万~5.5万円 隣家や駐車場の車、自転車、庭木などに塗料が飛散しないようメッシュシートで養生します。
高圧洗浄 250~350円 約4万~5.5万円 塗装前に住宅全体の汚れを落とします。劣化が著しい外壁の場合、はじめに高圧洗浄をしてしまうと、雨漏りの原因になるため、まずはシーリング工事を行い、続いて高圧洗浄となります。
下地処理 150~500円 約1.6万~7.9万円 ひび割れ(クラック)や穴などがあった場合、塗装する前に修復します。ケレン作業も行います。
養生 300~500円 約4.7万~7.9万円 窓や雨戸など、塗装しない部分をビニールで覆ったり、隣家に塗料が飛ばないよう養生シートで囲います。
外壁下塗り 800~1,200円 約12.7万~19万円 下地調整のために行う塗装作業で、シーラーとも呼ばれます。下塗りすることでその後の中塗り、上塗りが美しく仕上がります。下塗りによって、外壁塗装の遮熱性、防サビ性、防藻・防カビ性などの機能が向上します。
外壁中塗り 850~2,700円 約13.5万~42.8万円 凹凸のない平らで滑らかな下地に整えるための塗装作業です。下塗りした外壁が完全に乾いた後に行われますが、乾燥までに要する時間は塗料によって異なります。季節によっても乾燥までの時間は変化します。
外壁上塗り 850~2,700円 約13.5万~42.8万円 塗装の仕上げ工程で、ムラや塗り残しのない美しい仕上がりになっているかが重要です。上塗りが十分ではなかったり、省略されてしまうと塗料の厚みが不足し、本来期待できる耐用年数よりも早く塗膜が劣化する恐れがあります。
雨樋 1式 約5万~7万円 外壁の付帯物の一つです。雨どいの多くは塩ビ製で、錆びや劣化には耐性があります。ただし、外壁をきれいに塗り替えると、それまではあまり気にならなかった雨樋の色褪せが目立つようになります。外壁と合わせての塗装をおすすめします。
その他付帯物 1式 約10万円 軒天(庇の裏側)や水切りなどの鉄部、破風、雨戸、出窓、銅差、鉄骨階段、換気フード、霧除け、ベランダなど付帯物の塗装です。
シーリング 800~1,500円 約12.7万~23.8万円 つなぎ目から雨水などの侵入を阻止し、雨漏りを防止するため、外壁のボードとボードのつなぎ目(隙間)にシーリング材(コーキング材)を埋めて補修します。その際、古いシーリング材は撤去します。シーリング(コーキング)工事が必要なのは、サイディング外壁、ALC外壁、タイル外壁であり、モルタル外壁はほとんど必要ありません。
<div class="c-largeT">
    <table>
        <thead>
            <tr>
                <th>工事名称</th>
                <th>単価</th>
                <th>合計</th>
                <th>説明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>仮設足場</th>
                <td data-label="単価">800~1,200円</td>
                <td data-label="合計">約12.7万~19万円</td>
                <td data-label="説明">足場を組むことで職人が安全に作業できるようになります。姿勢も安定するため丁寧な塗装が可能となります。</td>
            </tr>
            <tr>
                <th>飛散防止シート</th>
                <td data-label="単価">200~350円</td>
                <td data-label="合計">約3.2万~5.5万円</td>
                <td data-label="説明">隣家や駐車場の車、自転車、庭木などに塗料が飛散しないようメッシュシートで養生します。</td>
            </tr>
            <tr>
                <th>高圧洗浄</th>
                <td data-label="単価">250~350円</td>
                <td data-label="合計">約4万~5.5万円</td>
                <td data-label="説明">塗装前に住宅全体の汚れを落とします。劣化が著しい外壁の場合、はじめに高圧洗浄をしてしまうと、雨漏りの原因になるため、まずはシーリング工事を行い、続いて高圧洗浄となります。</td>
            </tr>
            <tr>
                <th>下地処理</th>
                <td data-label="単価">150~500円</td>
                <td data-label="合計">約1.6万~7.9万円</td>
                <td data-label="説明">ひび割れ(クラック)や穴などがあった場合、塗装する前に修復します。ケレン作業も行います。</td>
            </tr>
            <tr>
                <th>養生</th>
                <td data-label="単価">300~500円</td>
                <td data-label="合計">約4.7万~7.9万円</td>
                <td data-label="説明">窓や雨戸など、塗装しない部分をビニールで覆ったり、隣家に塗料が飛ばないよう養生シートで囲います。</td>
            </tr>
            <tr>
                <th>外壁下塗り</th>
                <td data-label="単価">800~1,200円</td>
                <td data-label="合計" nowrap="nowrap">約12.7万~19万円</td>
                <td data-label="説明">下地調整のために行う塗装作業で、シーラーとも呼ばれます。下塗りすることでその後の中塗り、上塗りが美しく仕上がります。下塗りによって、外壁塗装の遮熱性、防サビ性、防藻・防カビ性などの機能が向上します。</td>
            </tr>
            <tr>
                <th>外壁中塗り</th>
                <td data-label="単価" nowrap="nowrap">850~2,700円</td>
                <td data-label="合計">約13.5万~42.8万円</td>
                <td data-label="説明">凹凸のない平らで滑らかな下地に整えるための塗装作業です。下塗りした外壁が完全に乾いた後に行われますが、乾燥までに要する時間は塗料によって異なります。季節によっても乾燥までの時間は変化します。</td>
            </tr>
           <tr>
                <th>外壁上塗り</th>
               	<td data-label="単価">850~2,700円</td>
                <td data-label="合計">約13.5万~42.8万円</td>
                <td data-label="説明">塗装の仕上げ工程で、ムラや塗り残しのない美しい仕上がりになっているかが重要です。上塗りが十分ではなかったり、省略されてしまうと塗料の厚みが不足し、本来期待できる耐用年数よりも早く塗膜が劣化する恐れがあります。</td>
            </tr>
            <tr>
                <th>雨樋</th>
                <td data-label="単価">1式</td>
                <td data-label="合計">約5万~7万円</td>
                <td data-label="説明">外壁の付帯物の一つです。雨どいの多くは塩ビ製で、錆びや劣化には耐性があります。ただし、外壁をきれいに塗り替えると、それまではあまり気にならなかった雨樋の色褪せが目立つようになります。外壁と合わせての塗装をおすすめします。</td>
            </tr>
            <tr>
                <th>その他付帯物</th>
                <td data-label="単価">1式</td>
                <td data-label="合計">約10万円</td>
                <td data-label="説明">軒天(庇の裏側)や水切りなどの鉄部、破風、雨戸、出窓、銅差、鉄骨階段、換気フード、霧除け、ベランダなど付帯物の塗装です。</td>
            </tr>
            <tr>
                <th>シーリング</th>
                <td data-label="単価">800~1,500円</td>
                <td data-label="合計" nowrap="nowrap">約12.7万~23.8万円</td>
                <td data-label="説明">つなぎ目から雨水などの侵入を阻止し、雨漏りを防止するため、外壁のボードとボードのつなぎ目(隙間)にシーリング材(コーキング材)を埋めて補修します。その際、古いシーリング材は撤去します。シーリング(コーキング)工事が必要なのは、サイディング外壁、ALC外壁、タイル外壁であり、モルタル外壁はほとんど必要ありません。</td>
            </tr>
        </tbody>
    </table>
</div>
コピー完了

dl dt dd

概算納品予定日
6月16日
新規最低オーダー数
5着~
追加最低オーダー数
1着~
素材
ポリエステル100%
<dl class="c-table">
<dt>概算納品予定日</dt>
<dd>6月16日</dd>
<dt>新規最低オーダー数</dt>
<dd>5着~</dd>
<dt>追加最低オーダー数</dt>
<dd>1着~</dd>
<dt>素材</dt>
<dd>ポリエステル100%</dd>
</dl>
コピー完了

フロー ol li 1

  1. お問合せ
  2. ヒアリング
  3. プラン提案
  4. 制作スタート
  5. リリース
  6. サポート
<div class="c-flow-ol-container">
<ol>
<li>お問合せ</li>
<li>ヒアリング</li>
<li>プラン提案</li>
<li>制作スタート</li>
<li>リリース</li>
<li>サポート</li>
</ol>
</div>
コピー完了

フロー ol li 2

  1. お問合せ

    テキストが入ります。テキストが入ります。テキストが入ります。

  2. 打ち合せ

    テキストが入ります。テキストが入ります。テキストが入ります。

  3. 開始日とプランの確定

    テキストが入ります。テキストが入ります。テキストが入ります。

  4. 申込み

    テキストが入ります。テキストが入ります。テキストが入ります。

  5. サービス開始

    テキストが入ります。テキストが入ります。テキストが入ります。

<ol class="c-flow2">
    <li>
        <p>お問合せ</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
    <li>
        <p>打ち合せ</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
    <li>
        <p>開始日とプランの確定</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
    <li>
        <p>申込み</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
    <li>
        <p>サービス開始</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
</ol>
コピー完了

フロー ol li 3

  1. お問合せ(フォーム・LINE・電話)

  2. 無料相談・現地調査

  3. ご提案・お見積り

  4. ご契約・手続き開始

  5. 完了・アフターサポート

<ol class="c-flow3">
    <li>
        <p><i class="fas fa-envelope" aria-hidden="true"></i></p>
        <p>お問合せ<span>(フォーム・LINE・電話)</span></p>
    </li>
    <li>
        <p><i class="fas fa-yen-sign" aria-hidden="true"></i></p>
        <p>無料相談・現地調査</p>
    </li>
    <li>
        <p><i class="fas fa-clipboard-list" aria-hidden="true"></i></p>
        <p>ご提案・お見積り</p>
    </li>
    <li>
        <p><i class="fas fa-handshake" aria-hidden="true"></i></p>
        <p>ご契約・手続き開始</p>
    </li>
    <li>
        <p><i class="fas fa-star" aria-hidden="true"></i></p>
        <p>完了・アフターサポート</p>
    </li>
</ol>
コピー完了

フロー ol li 4

  1. 01

    オンライン無料相談

  2. 02

    事業内容・状況ヒアリング

  3. 03

    対応可否・方針説明

  4. 04

    正式依頼・着手

<ol class="c-flow4">
    <li>
        <p>01</p>
        <p><i class="fas fa-laptop" aria-hidden="true"></i></p>
        <p>オンライン無料相談</p>
    </li>
    <li>
        <p>02</p>
        <p><i class="fas fa-comments" aria-hidden="true"></i></p>
        <p>事業内容・状況ヒアリング</p>
    </li>
    <li>
        <p>03</p>
        <p><i class="fas fa-file-lines" aria-hidden="true"></i></p>
        <p>対応可否・方針説明</p>
    </li>
    <li>
        <p>04</p>
        <p><i class="fas fa-handshake" aria-hidden="true"></i></p>
        <p>正式依頼・着手</p>
    </li>
</ol>
コピー完了

フローセクション1

お届けまでの流れ

ミーティング

当社営業スタッフが直接ご要望をうかがいます。今抱えられているお悩みや改善したい点など何でもご相談ください。

ミーティング

デザイン提案

お客様の声をもとに企画しご提案します。生地のサンプルや完成イメージ図などを用いて、理想の1着に向けて進めていきます。

デザイン提案

サンプル制作

決定したデザイン案にてサンプルをお作りします。実際に着用いただき、シルエットや仕様などをチェックいただけます。

サンプル制作

生産

最終仕様が決定したらお客様のサイズと必要な数量を確認。生地などの材料を手配し、製造にとりかかります。

生産

納品

検品後、ご指定の納品先に出荷します。納品後の追加ご注文や仕様変更などアフター・フォローについてもおまかせください。

納品
<section class="c-flow-section-container">
	<h2>お届けまでの流れ</h2>
	<section>
		<div>
			<h3>ミーティング</h3>
			<p>当社営業スタッフが直接ご要望をうかがいます。今抱えられているお悩みや改善したい点など何でもご相談ください。</p>
		</div>
		<div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/dum_04.jpg" width="300" height="300" alt="ミーティング"></div>
	</section>
	<section>
		<div>
			<h3>デザイン提案</h3>
			<p>お客様の声をもとに企画しご提案します。生地のサンプルや完成イメージ図などを用いて、理想の1着に向けて進めていきます。</p>
		</div>
		<div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/dum_04.jpg" width="300" height="300" alt="デザイン提案"></div>
	</section>
	<section>
		<div>
			<h3>サンプル制作</h3>
			<p>決定したデザイン案にてサンプルをお作りします。実際に着用いただき、シルエットや仕様などをチェックいただけます。</p>
		</div>
		<div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/dum_04.jpg" width="300" height="300" alt="サンプル制作"></div>
	</section>
	<section>
		<div>
			<h3>生産</h3>
			<p>最終仕様が決定したらお客様のサイズと必要な数量を確認。生地などの材料を手配し、製造にとりかかります。</p>
		</div>
		<div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/dum_04.jpg" width="300" height="300" alt="生産"></div>
	</section>
	<section>
		<div>
			<h3>納品</h3>
			<p>検品後、ご指定の納品先に出荷します。納品後の追加ご注文や仕様変更などアフター・フォローについてもおまかせください。</p>
		</div>
		<div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/dum_04.jpg" width="300" height="300" alt="納品"></div>
	</section>
</section>
コピー完了

フローセクション2

  1. お申込み

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  2. 審査・ご契約

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  3. 利用登録

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  4. ご利用開始

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<ol class="c-flow-section2">
    <li>
        <p>お申込み</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
    <li>
        <p>審査・ご契約</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
    <li>
        <p>利用登録</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
    <li>
        <p>ご利用開始</p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </li>
</ol>
コピー完了

メディア

iframe mapなど

<div class="c-iframe-content"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13703.561911378798!2d139.52924467488197!3d35.85856060352935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018c2d96b2c6c47%3A0x94a32359b4e28959!2z44CSMzU0LTAwMjQg5Z-8546J55yM5a-M5aOr6KaL5biC6ba054Cs5p2x77yS5LiB55uu77yR77yU4oiS77yT!5e0!3m2!1sja!2sjp!4v1619651243751!5m2!1sja!2sjp" width="600" height="450"  loading="lazy"></iframe></div>
コピー完了

youtube動画

変更箇所は、embed/5kah8d0256I
embed/ 以降の数字の部分のみ。

<div class="c-iframe-youtube"><iframe src="https://www.youtube.com/embed/5kah8d0256I" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></div>
<p>変更箇所は、<strong>embed/5kah8d0256I</strong><br>
embed/ 以降の数字の部分のみ。</p>
コピー完了

画像横幅100%

<p class="page-header"><img src="https://v2.s-contigo.website/images/img/regulation/dum_03.jpg" alt="デザイン規定" width="1280" height="300"></p>
コピー完了

画像左寄せ

この画像の説明文

画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像のサイズはCSSによって制御されています。変更が必要な場合は、CSSを変更する必要があります。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。

<div class="c-leftImg clearfix">
<div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="この画像の説明文" width="371" height="278"></div>
<p>画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像のサイズはCSSによって制御されています。変更が必要な場合は、CSSを変更する必要があります。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。</p>
</div>
コピー完了

画像右寄せ

この画像の説明文

画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。

<div class="c-rightImg clearfix">
<div class="img"><img src="https://v2.s-contigo.website/images/img/regulation/dum_02.jpg" alt="この画像の説明文" width="371" height="278"></div>
<p>画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。</p>
</div>
コピー完了

video

<video src="https://v2.s-contigo.website/images/img/regulation/movie.mp4" autoplay="" muted="" loop="" controls=""></video>
コピー完了

スクリーンショット(影付き画像)

スクリーンショット
<div class="c-screenshot"><img src="https://v2.s-contigo.website/images/img/regulation/dum_05.jpg" alt="スクリーンショット"  width="1280" height="550"></div>
コピー完了

画像幅 100% 中央寄せ

デザイン規定
<div class="c-page-img"><img src="/images/header/top.webp" alt="デザイン規定" width="1280" height="550"></div>
コピー完了

画像表示(複数メディア掲載)

<ul class="c-attach-file">
    <li><a href="/images/img/dum_01.jpg" rel="cbox"><img src="/images/img/dum_01.jpg" width="400" height="300"></a></li>
    <li><a href="/images/img/dum_02.jpg" rel="cbox"><img src="/images/img/dum_02.jpg" width="400" height="300"></a></li>
    <li><a href="/images/img/dum_03.jpg" rel="cbox"><img src="/images/img/dum_03.jpg" width="400" height="300"></a></li>
    <li><a href="/images/img/SCT_6430.JPG" rel="cbox"><img src="/images/img/SCT_6430.JPG" width="492" height="328"></a></li>
    <li><a href="/images/img/SCT_6499.JPG" rel="cbox"><img src="/images/img/SCT_6499.JPG" width="492" height="328"></a></li>
    <li><a href="/images/img/SCT_6530.JPG" rel="cbox"><img src="/images/img/SCT_6530.JPG" width="492" height="328"></a></li>
</ul>
コピー完了

料金比較テーブル

料金比較1

  • ベーシックBasic

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

    5,000円/月

    オプション名 オプション説明
    オプション名
    オプション名
    オプション名
  • スタンダードStandard

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

    10,000円/月

    オプション名 オプション説明
    オプション名
    オプション名
    オプション名
  • カスタムCustom

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

    20,000円/月

    オプション名 オプション説明
    オプション名
    オプション名
    オプション名
<ul class="c-price1">
    <li>
        <p>ベーシック<span>Basic</span></p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <p>5,000円/月</p>
        <table>
            <tr>
                <th>オプション名</th>
                <th>オプション説明</th>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
        </table>
    </li>
    <li>
        <p>スタンダード<span>Standard</span></p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <p>10,000円/月</p>
        <table>
            <tr>
                <th>オプション名</th>
                <th>オプション説明</th>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
        </table>
    </li>
    <li>
        <p>カスタム<span>Custom</span></p>
        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
        <p>20,000円/月</p>
        <table>
            <tr>
                <th>オプション名</th>
                <th>オプション説明</th>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
            <tr>
                <td>オプション名</td>
                <td>○</td>
            </tr>
        </table>
    </li>
</ul>
コピー完了

料金比較2

  • ワンデーパス

    大人(中学生以上)
    3,000円(税込)
    子ども(4歳〜小学生)
    2,000円(税込)

    ※注意事項記載

  • 入園券

    大人・子供
    1,500円(税込)

    ※注意事項記載

<ul class="c-price2">
    <li>
        <p>ワンデーパス</p>
        <dl>
            <dt>大人<span>(中学生以上)</span></dt>
            <dd>3,000円<span>(税込)</span></dd>
            <dt>子ども<span>(4歳〜小学生)</span></dt>
            <dd>2,000円<span>(税込)</span></dd>
        </dl>
        <p>※注意事項記載</p>
    </li>
    <li>
        <p>入園券</p>
        <dl>
            <dt>大人・子供</dt>
            <dd>1,500円<span>(税込)</span></dd>
        </dl>
        <p>※注意事項記載</p>
    </li>
</ul>
コピー完了

料金比較3

  • Basic

    ¥1,200/月

  • Advanced

    ¥2,400/月

  • Professional

    ¥5,800/月

<ul class="c-price3">
    <li>
        <p>Basic</p>
        <p>¥1,200<span>/月</span></p>
    </li>
    <li>
        <p>Advanced</p>
        <p>¥2,400<span>/月</span></p>
    </li>
    <li>
        <p>Professional</p>
        <p>¥5,800<span>/月</span></p>
    </li>
</ul>
コピー完了

料金比較4

年間 月間
基本料金 120,000円 10,000円
追加料金 1人あたり6,000円 1人あたり500円
<table class="c-price4">
    <tr>
        <th></th>
        <th>年間</th>
        <th>月間</th>
    </tr>
    <tr>
        <th>基本料金</th>
        <td>120,000円</td>
        <td>10,000円</td>
    </tr>
    <tr>
        <th>追加料金</th>
        <td><span>1人あたり</span>6,000円</td>
        <td><span>1人あたり</span>500円</td>
    </tr>
</table>
コピー完了

料金比較5

料金表

プラン 初期費用 月額料金
Aプラン 20,000円 3,000円
Bプラン 10,000円 5,000円
<div class="c-price5">
    <p>料金表</p>
    <table>
        <tr>
            <th>プラン</th>
            <th>初期費用</th>
            <th>月額料金</th>
        </tr>
        <tr>
            <td>Aプラン</td>
            <td>20,000円</td>
            <td>3,000円</td>
        </tr>
        <tr>
            <td>Bプラン</td>
            <td>10,000円</td>
            <td>5,000円</td>
        </tr>
    </table>
</div>
コピー完了

料金比較6

機能一覧 Standard Professional
初期費用・月額費用 都度お見積り 都度お見積り
手数料 各決済サービスに利用に準ずる 各決済サービスに利用に準ずる
<table class="c-price6">
    <tr>
        <th>機能一覧</th>
        <th>Standard</th>
        <th>Professional</th>
    </tr>
    <tr>
        <td>初期費用・月額費用</td>
        <td>都度お見積り</td>
        <td>都度お見積り</td>
    </tr>
    <tr>
        <td>手数料</td>
        <td>各決済サービスに利用に準ずる</td>
        <td>各決済サービスに利用に準ずる</td>
    </tr>
</table>
コピー完了