デザイン規定

リード文内部デザイン

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

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

ulリスト内部デザイン

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

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

olリスト

1. リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。リストリストリストリストリストリスト。
2. リスト
3. リストリストリストリストリストリスト
4. リストリストリストリストリストリスト
5. リスト
6. リスト

<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風 対話

<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>

コンセプト内部デザイン

<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日のスケジュール（縦並び）

<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年のスケジュール（横並び）

<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>