テキスト

リード文内部デザイン

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

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

強調テキスト１

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

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

強調テキスト２

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

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

強調テキスト３

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

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

ulリスト内部デザイン

リストリストリスト
リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。
リスト
リスト
リスト
リスト

<ul class="listing">
        <li>リストリストリスト</li>
        <li>リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。リストリストリストリストリストリストリストリストリストリストリストリスト。</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
    </ul>

olリスト

リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。
リスト
リストリストリストリストリストリスト
リストリストリストリストリストリスト
リスト
リスト

<ol class="listing">
    <li>リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。</li>
    <li>リスト</li>
    <li>リストリストリストリストリストリスト</li>
    <li>リストリストリストリストリストリスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ol>

注意書き

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

<p class="annotation">※注釈：14px Regular<br>注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。注釈のテキストが入ります。<br>注釈のテキストが入ります。注釈のテキストが入ります。</p>

strong強調

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

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

markハイライト

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

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

LINE風対話

お客様

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

弊社

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

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

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

お客様

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

写真の説明文

弊社

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

<div class="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="chat right">
    <p class="img">
        <img src="https://www.s-contigo.com/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="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://www.s-contigo.com/images/img/regulation/dum_01.jpg" alt="写真の説明文" width="400" height="300"></p>
    </div>
</div>

<div class="chat right">
    <p class="img">
        <img src="https://www.s-contigo.com/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>

FAQ

質問１です。質問を記載します。質問１です。質問を記載します。: 解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。
質問２です。質問を記載します。質問２です。質問を記載します。: 解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。
質問３です。質問を記載します。質問３です。質問を記載します。: 解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。
質問４です。質問を記載します。質問４です。質問を記載します。質問を記載します。質問を記載します。: 解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。
質問５です。質問を記載します。質問５です。質問を記載します。: 解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。

<dl class="faq">
    <dt><span>質問１です。質問を記載します。質問１です。質問を記載します。</span></dt>
    <dd><span>解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。解答１です。回答を記載します。</span></dd>
    <dt><span>質問２です。質問を記載します。質問２です。質問を記載します。<img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="写真１"></span></dt>
    <dd><span>解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。解答２です。回答を記載します。</span></dd>
    <dt><span>質問３です。質問を記載します。質問３です。質問を記載します。</span></dt>
    <dd><span>解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。解答３です。回答を記載します。</span></dd>
    <dt><span>質問４です。質問を記載します。質問４です。質問を記載します。質問を記載します。質問を記載します。</span></dt>
    <dd><span>解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。解答４です。回答を記載します。<img src="https://www.s-contigo.com/images/img/regulation/dum_01.jpg" alt="写真"  width="600" height="450"></span></dd>
    <dt><span>質問５です。質問を記載します。質問５です。質問を記載します。</span></dt>
    <dd><span>解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。解答５です。回答を記載します。</span></dd>
</dl>

blockquote 引用

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

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

引用元:株式会社AAA

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

準備中・中央寄せ

準備中

<div class="const">準備中</div>

コンセプト内部デザイン

CONCEPT

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

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

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

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

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

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

CONCEPT CHANGE HERE

<div class="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

切り抜き前の画像
AFTER切り抜き後の画像（画像をクリックで拡大）

<ul class="before-after">
    <li><img src="https://www.s-contigo.com/images/img/regulation/img-before.jpg" width="1280" height="1820" alt="BEFORE切り抜き前の画像">切り抜き前の画像</li>
    <li><a href="https://www.s-contigo.com/images/img/regulation/img-after.jpg" rel="cbox"><img src="https://www.s-contigo.com/images/img/regulation/img-after.jpg" width="1280" height="1820" alt="AFTER切り抜き後の画像"></a>AFTER切り抜き後の画像（画像をクリックで拡大）</li>
</ul>

1日のスケジュール（縦並び）

9:00

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
10:00

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
11:00

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
12:00

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
14:00

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
15:00

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
16:00

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキスト
17:00

タイトル

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

<div class="aday">
    <ul>
        <li>
            <div class="aday-time">9:00</div>
            <div class="aday-container">
                <div class="aday-tit">タイトル</div>
                <div class="aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="aday-time">10:00</div>
            <div class="aday-container">
                <div class="aday-tit">タイトル</div>
                <div class="aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="aday-time">11:00</div>
            <div class="aday-container">
                <div class="aday-tit">タイトル</div>
                <div class="aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="aday-time">12:00</div>
            <div class="aday-container">
                <div class="aday-tit">タイトル</div>
                <div class="aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="aday-time">14:00</div>
            <div class="aday-container">
                <div class="aday-tit">タイトル</div>
                <div class="aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="aday-time">15:00</div>
            <div class="aday-container">
                <div class="aday-tit">タイトル</div>
                <div class="aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="aday-time">16:00</div>
            <div class="aday-container">
                <div class="aday-tit">タイトル</div>
                <div class="aday-txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </div>
            </div>
        </li>
        <li>
            <div class="aday-time">17:00</div>
            <div class="aday-container">
                <div class="aday-tit">タイトル</div>
                <div class="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="year">
	<ul>
		<li>
			<div class="year-time">4月</div>
			<div class="year-container">
				<ul>
					<li>4種サッカーリーグ（4月～9月）</li>
					<li>青年会議所杯</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">5月</div>
			<div class="year-container">
				<ul>
					<li>富士見市サッカー協会杯</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">6月</div>
			<div class="year-container">
				<ul>
					<li>志木教育リーグ（年間）</li>
					<li>埼玉Sリーグ（年間）</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">7月</div>
			<div class="year-container">
				<ul>
					<li>富士見市フットサル大会</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">8月</div>
			<div class="year-container">
				<ul>
					<li>合宿 2泊3日</li>
					<li>西部地区育成大会</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">9月</div>
			<div class="year-container">
				<ul>
					<li>富士見市増進スポーツ杯</li>
					<li>埼玉県スポーツ少年団大会<span>U10</span></li>
					<li>埼玉県スポーツ少年団大会<span>U12</span></li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">10月</div>
			<div class="year-container">
				<ul>
					<li>富士見市民スポーツ大会</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">11月</div>
			<div class="year-container">
				<ul>
					<li>新人戦</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">12月</div>
			<div class="year-container">
				<ul>
					<li>フットサル大会</li>
					<li>親子サッカー（学年毎 親子で対決）</li>
					<li>クリスマス会（会食、ビンゴゲーム他）</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">1月</div>
			<div class="year-container">
				<ul>
					<li>初詣、初蹴</li>
					<li>大東武州ガス杯</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">2月</div>
			<div class="year-container">
				<ul>
					<li>協会杯<span>U11</span></li>
					<li>くらづくり店舗杯</li>
					<li>東武鉄道杯</li>
				</ul>
			</div>
		</li>
		<li>
			<div class="year-time">3月</div>
			<div class="year-container">
				<ul>
					<li>富士見市送別大会</li>
					<li>卒団式、親子サッカー</li>
				</ul>
			</div>
		</li>
	</ul>
</div>

代表挨拶１

代表取締役鈴木一郎

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

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

<div class="deputy1">
        <div class="right">
            <div class="img"><img src="/images/img/coding/guide/deputy_01.jpg" alt="鈴木 一郎の写真" width="640" height="320"></div>
            <p class="name">代表取締役  鈴木 一郎</p>
        </div>
        <div class="left">
            <p class="philosophy-txt">未来へ続くものづくりへ<br>挑戦を重ねていく</p>
            <p>テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。</p>
        </div>
</div>

代表挨拶２

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

<div class="deputy2">
    <div class="img"><img src="/images/img/coding/guide/deputy_02.jpg" alt="代表取締役 鈴木 一郎の画像"></div>
    <div class="deputy2-container">
        <p  class="philosophy-txt">未来へ続くものづくりへ<br>挑戦を重ねていく</p>
        <p>テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。</p>
    </div>
</div>

代表挨拶３

Philosophy経営理念

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

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

代表取締役鈴木一郎

<div class="deputy3">
    <p class="philosophy-txt">Philosophy<span>経営理念</span></p>
    <p class="lead">新たな社会づくりを目指して</p>
    <div class="deputy3-container">
        <div class="left">
            <p class="txt">テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。</p>
            <p class="name">代表取締役 鈴木 一郎</p>
        </div>
        <div class="right">
            <div class="img"><img src="/images/img/coding/guide/deputy_03.jpg" alt="代表取締役 鈴木 一郎の画像"></div>
        </div>
    </div>
</div>

代表挨拶４

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

代表取締役鈴木一郎

<div class="deputy4">
    <p class="philosophy-txt">未来へ続くものづくりへ 挑戦を重ねていく</p>
    <p class="name">代表取締役 鈴木 一郎</p>
    <div class="deputy4-container">
        <div class="img"><img src="/images/img/coding/guide/deputy_04.jpg" alt="代表取締役 鈴木 一郎の画像"></div>
        <p class="txt">テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。テキストテキストテキスト。</p>
    </div>
</div>

キャッチコピー１

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

<div class="catch1">
    <p>あなたの未来の一歩を<br>私たちと一緒に踏み出しましょう！</p>
</div>

キャッチコピー２

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

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

キャッチコピー３

Philosophy

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

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