pictcode

	public $layout = 'procedure';

	public function privacy() {

 * terms

	public function terms() {

 * about us

	public function aboutus() {

<!-- 運営会社情報 -->

	<main role="main">

		<article class="legacy">

			<h2>

				<img src="/img/img_h1_aboutus.png" alt="運営会社情報">

			</h2>

			<p>この規約（以下「本規約」といいます。）は、IT KiDS株式会社（以下「当社」といいます。）が提供するPictCodeに関するすべての製品およびサービス（以下「本サービス」といいます。）の利用に関する条件を、本サービスを利用するお客様（以下「お客様」といいます。）と当社との間で定めるものです。</p>

			<div id="contents">

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			</div>

		</article>

	</main>

<!-- お問い合わせ -->

	<main role="main">

		<article class="contact">

			<h2>

				<img src="/img/img_h1_contact01.png" alt="お問い合わせ - 送信内容入力">

			</h2>

			<p class="">PictCodeに関するお問い合わせやご相談、ご質問などがございましたら、下記のお問い合わせフォームより対応いたします。</p>

		<hr>

			<section>

				<dl>

					<dt><label for="">お名前</label></dt>

					<dd><input type="text" name="name" value="" id="" placeholder="お名前" /></dd>

					<dt><label for="">年齢</label></dt>

					<dd><input type="text" name="age" value="" id="" pattern="^[0-9A-Za-z]+$" placeholder="半角数字" /></dd>

					<dt><label for="">メールアドレス</label></dt>

					<dd><input type="text" name="email" value="" id="" pattern="^[0-9A-Za-z]+$" placeholder="半角英数字" /></dd>

					<dt><label for="">メールアドレス(確認用)</label></dt>

					<dd><input type="text" name="email" value="" id="" pattern="^[0-9A-Za-z]+$" placeholder="半角英文字(再入力)" /></dd>

					<dt><label for="">郵便番号</label></dt>

					<dd><input type="text" name="email" value="" id="" pattern="^[0-9A-Za-z]+$" placeholder="半角数字で入力して下さい" /></dd>

					<dt><label for="">ご住所</label></dt>

					<dd><input type="text" name="address01" value="" id="" placeholder="例） ○○県 ○○市○○町 ○丁目 ○‐○" /></dd>

					<dd><input type="text" name="address02" value="" id="" placeholder="例） ○○ビル○○号室" /></dd>

					<dt><label for="">お電話番号</label></dt>

					<dd><input type="text" name="email" value="" pattern="^[0-9]+$" id="" placeholder="半角数字" /></dd>

					<dt><label for="">お問い合わせ内容</label></dt>

					<dd><textarea type="text" name="details" value="" id="" placeholder="お問い合わせ内容をご記入ください"></textarea></dd>

				</dl>

			</section>

			<section class="button_area01">

				<a href="index.html"><p class="button btn_back01"></p></a>

				<a href="contact_check.html"><p class="button btn_check01"></p></a>

			</section>

		</article>

	</main>

<!-- お問い合わせ 内容確認 -->

	<main role="main">

		<article class="contact">

			<h2>

				<img src="/img/img_h1_contact02.png" alt="お問い合わせ - 送信内容確認">

			</h2>

			<p>ご記入内容に誤りがないかをご確認ください。内容に誤りがある場合には「修正する」ボタンを押して修正を、問題がないようでしたら「送信する」ボタンを押して送信してください。</p>

			<hr>

				<section>

					<dl>

						<dt><label for="">お名前</label></dt>

						<dd>お名前　太郎</dd>

						<dt><label for="">年齢</label></dt>

						<dd>92歳</dd>

						<dt><label for="">メールアドレス</label></dt>

						<dd>onamaetarou@onamae.com</dd>

						<dt><label for="">郵便番号</label></dt>

						<dd>〒180-0004</dd>

						<dt><label for="">ご住所</label></dt>

						<dd>東京都港区西麻布4-18-1</dd>

						<dd>麻布ウェストB1F</dd>

						<dt><label for="">お電話番号</label></dt>

						<dd>03-3409-4767</dd>

						<dt><label for="">お問い合わせ内容</label></dt>

						<dd>西麻布で長年愛され続けるオムライスが有名な洋食屋。<br>以前、職場が近かったのでよく利用していましたが、突然の閉店。その1年後に場所を変えて復活したという噂は聞いていましたが、職場が変りなかなか行けていなかったのですが、久々に行きました。<br>場所は以前の場所よりもさらに牛坂を上がった住宅地の奥。確実に知っている人しか来れない場所なので心配です。<br>店内は半地下ですが、以前よりも広く開放的になっていました。<br>オムライス（945円・大盛り1,155円）はデミソース、ホワイトソース、ケチャップの3種類から選べます。個人的にはほろ苦いデミソースが好きです。</dd>

					</dl>

				</section>

				<section class="button_area01">

					<a href="contact.html"><p class="button btn_alter01"></p></a>

					<a href="contact_thanks.html"><p class="button btn_submit"></p></a>

				</section>

		</article>

	</main>

<!-- お問い合わせ Thanksページ -->

	<main role="main">

		<article class="contact">

			<h2>

				<img src="/img/img_h1_contact03.png" alt="お問い合わせ - 送信完了">

			</h2>

				<p>お問い合わせいただき、ありがとうございます。</p>

				<p>ご記入いただきましたメールアドレスに送信確認メールを自動送信致しました。折り返し、３営業日以内にご返答させていただきます。お問い合わせ内容によっては３営業日以上お時間をいただく場合がございます。何卒、ご了承くださいませ。</p>

				<p>万が一、送信確認メールが来ない場合は、自動的に振り分け処理にて迷惑メールに保管されているか、もしくはメールアドレスに誤りがある可能性があります。この場合には、大変お手数ではございますが、メールアドレスをご確認の上、お問い合わせフォームより再度ご送信下さい。</p>

			<section class="button_area01">

				<a href="index.html"><p class="button btn_top02"></p></a>

			</section>

		</article>

	</main>

<!-- 保存データ削除 確認画面 -->

	<main role="main">

		<article class="register">

			<h2>

				<img src="/img/img_h1_delete02.png" alt="ほぞんデータ - さくじょかくにん">

			</h2>

				<p>せんたくした プログラムを さくじょ します。</p>

				<p>一度さくじょした プログラムは もとにもどすことが できません。 さくじょを 止めるばあいには「もどる」ボタンを、 さくじょしても よい ばあいには「さくじょ」ボタンをおして さくじょしてください。</p>

				<section class="delete">

					<h3>タイトルのタイトル</h3>

					<img src="/img/img_save_sample.png" alt="title">

					<p>プログラム説明文・プログラム説明文・プログラム説明文・プログラム説明文・プログラム説明文・プログラム説明文・プログラム説明文・プログラム説明文</p>

				</section>

				<section class="button_area01">

					<a href="data_index.html"><p class="button btn_back02"></p></a>

					<a href="delete_comp.html"><p class="button btn_delete"></p></a>

				</section>

		</article>

	</main>

<!--保存データ 削除完了画面 -->

	<main role="main">

		<article class="register">

			<h2>

				<img src="/img/img_h1_delete03.png" alt="ほぞんデータ - さくじょかんりょう">

			</h2>

			<div id="contents">

				<p>せんたくした プログラムを さくじょ しました。</p>

				<section class="delete">

					<img src="/img/img_img_delete.png" alt="プログラムをさくじょしました">

				</section>

			</div>

				<section class="button_area01">

					<a href="login_top.html"><p class="button btn_top03"></p></a>

				</section>

		</article>

	</main>

<!-- プライバシー・ポリシー -->

	<main role="main">

		<article class="legacy">

			<h2>

				<img src="/img/img_h1_privacy.png" alt="プライバシーポリシー">

			</h2>

			<p>この規約（以下「本規約」といいます。）は、IT KiDS株式会社（以下「当社」といいます。）が提供するPictCodeに関するすべての製品およびサービス（以下「本サービス」といいます。）の利用に関する条件を、本サービスを利用するお客様（以下「お客様」といいます。）と当社との間で定めるものです。</p>

			<div id="contents">

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			</div>

		</article>

	</main>

<!-- ログイン リマインダー -->

	<main role="main">

		<article class="contact">

			<h2>

				<img src="/img/img_h1_reissue.png" alt="パスワードの再設定">

			</h2>

			<p>パスワードを再発行します。ご両親にご確認の上、ご登録いただいたメールアドレスを入力し、パスワード再発行用のURLを取得してください。ニックネームに関しましては、再発行用URLをクリックした際に表示されます。<br>(※携帯電話用メールアカウントの場合、メールフィルターを解除する必要があります。「itkids.club」のアカウント受信設定を行ってください。)</p>

			<div id="contents">

			<hr>

				<section>

					<dl>

						<dt><label for="">メールアドレス</label></dt>

						<dd><input type="text" name="email" value="" pattern="^[0-9]+$" id="" placeholder="メールアドレス" /></dd>

						<dt><label for="">メールアドレス(確認用)</label></dt>

						<dd><input type="text" name="email" value="" pattern="^[0-9]+$" id="" placeholder="メールアドレス(確認用)"/></dd>

					</dl>

				</section>

				<section class="caution">

					<p>メールアドレスが一致しません。<br>誤りがないかもう一度ご確認の上、正確にご入力ください。</p>

				</section>

			</div>

				<section class="button_area01">

					<a href="index.html"><p class="button btn_back01"></p></a>

					<a href="reminder_check.html"><p class="button btn_check01"></p></a>

				</section>

		</article>

	</main>

<!-- ログイン リマインダー確認画面 -->

	<main role="main">

		<article class="contact">

			<h2>

				<img src="/img/img_h1_reissue.png" alt="パスワードの再設定">

			</h2>

			<p class="">パスワードを再発行します。ご両親にご確認の上、ご登録いただいたメールアドレスを入力し、パスワード再発行用のURLを取得してください。ニックネームに関しましては、再発行用URLをクリックした際に表示されます。<br>(※携帯電話用メールアカウントの場合、メールフィルターを解除する必要があります。「itkids.club」のアカウント受信設定を行ってください。)</p>

			<div id="contents">

			<hr>

				<section>

					<dl>

						<dt><label for="">メールアドレス</label></dt>

						<dd>onamaetarou@onamae.com</dd>

					</dl>

				</section>

				<section>

					<p>以上の内容でよろしいでしょうか？内容に誤りがある場合には「修正する」ボタンを押し修正を、再発行する場合には「送信する」ボタンを押して再発行用URLを取得してください。</p>

				</section>

			</div>

					<section class="button_area01">

					<a href="reminder.html"><p class="button btn_alter01"></p></a>

					<a href="reminder_reissue.html"><p class="button btn_reissue"></p></a>

				</section>

		</article>

	</main>

<!-- ログイン リマインダー送信完了画面 -->

	<main role="main">

		<article class="contact">

			<h2>

				<img src="/img/img_h1_reissue.png" alt="お問い合わせ - 送信完了">

			</h2>

				<p>パスワード再発行用のURLを、ご登録いただいたメールアドレス宛てに送信しました。</p>

				<p>メールボックスをご確認の上、メールに添付されているURLをクリックし、指示に従ってパスワードの再発行を行ってください。</p>

			<section class="image">

				<img src="/img/img_img_sendmail.png">

			</section>

			<section class="button_area01">

				<a href="index.html"><p class="button btn_top02"></p></a>

			</section>

		</article>

	</main>

<!-- データ保存 -->

<main role="main">

		<article class="large_form">

			<h2>

				<img src="/img/img_h1_admin_save01.png" alt="プログラムほぞん">

			</h2>

				<p>さくせいした プログラムを ほぞん します。</p>

				<p>プログラムに タイトルを付け、せるめい文を 書いて みんなに アピールしましょう。</p>

				<p>プログラムの ないようと せつめいが 書けたら 「かくにん」ボタンを おしてね！</p>

				<section>

					<dl>

						<dt><label for="">タイトル</label></dt>

						<dd><input type="text" name="title" value="" id="" placeholder="タイトル" /></dd>

						<dt><label for="">せつめい</label></dt>

						<dd><textarea name="description" value="" id="" placeholder="せつめい" /></textarea></dd>

					</dl>

				</section>

				<section class="button_area01">

					<a href="index.html"><p class="button btn_back02"></p></a>

					<a href="save_check.html"><p class="button btn_check02"></p></a>

				</section>

		</article>

	</main>

<!-- データ保存 保存内容確認画面 -->

	<main role="main">

		<article class="register">

			<h2>

				<img src="/img/img_h1_admin_save02.png" alt="保存内容確認">

			</h2>

				<p>さくせいした プログラムを ほぞん します。</p>

				<p>文や タイトルに まちがいないか かくにんしましょう。 まちがいが あれば 「しゅうせい」 ボタンをおして しゅうせいし、 まちがいが なければ 「ほぞん」 ボタンを おして プログラムを ほぞんしましょう。</p>

				<section>

				<img src="img/img_save_sample.png" alt="保存したデータ名">

					<dl>

						<dt><label for="">タイトル</label></dt>

						<dd>タイトルのタイトル</dd>

						<dt><label for="">せつめい</label></dt>

						<dd>説明ごにょごにょ。説明ごにょごにょ。説明ごにょごにょ。説明ごにょごにょ。説明ごにょごにょ。説明ごにょごにょ。説明ごにょごにょ。説明ごにょごにょ。説明ごにょごにょ。説明ごにょごにょ。</textarea></dd>

					</dl>

				</section>

				<section class="button_area01">

					<a href="save.html"><p class="button btn_alter02"></p></a>

					<a href="save_comp.html"><p class="button btn_save"></p></a>

				</section>

		</article>

	</main>

<!-- データ保存 保存完了画面 -->

	<main role="main">

		<article class="admin">

			<h2>

				<img src="/img/img_h1_copy02.png" alt="ほぞんデータ - こぴーかんりょう">

			</h2>

			<p>さくせいした プログラムを ほぞん しました！</p>

			<!-- Save Data 01 -->

			<section class="save_data saved">

				<a name="#save_data01">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 02 -->

			<section class="save_data">

				<a name="#save_data02">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 03 -->

			<section class="save_data">

				<a name="#save_data03">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 04 -->

			<section class="save_data">

				<a name="#save_data04">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 05 -->

			<section class="save_data">

				<a name="#save_data05">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 06 -->

			<section class="save_data">

				<a name="#save_data06">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 07 -->

			<section class="save_data">

				<a name="#save_data07">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 08 -->

			<section class="save_data">

				<a name="#save_data08">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 09 -->

			<section class="save_data">

				<a name="#save_data09">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

			<!-- Save Data 10 -->

			<section class="save_data">

				<a name="#save_data10">

					<img src="img/img_save_sample02.png" alt="タイトル">

					<h3>作品タイトル作品タイトル</h3>

					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>

				</a>

				<ul class="data_button">

					<li><a href="delete_check.html">さくじょ</a></li>

					<li><a href="play.html">きょうゆう</a></li>

					<li><a href="copy.html">コピー</a></li>

				</ul>

			</section>

		</article>

	</main>

<!-- データ保存 ログイン画面 -->

	<main role="main">

		<article class="large_form">

			<h2>

				<img src="/img/img_h1_save06.png" alt="ぷろぐらむ の ほぞん - ログイン かくにん">

			</h2>

			<p>今はまだ ログイン されていません。 ログインすることで 作ったプログラムを ほぞんできるよ！</p>

			<p>ログインしますか？</p>

			<section class="button_area01">

				<a href="index.html"><p class="button btn_back03"></p></a>

				<a href="login.html"><p class="button btn_save02"></p></a>

			</section>

			<section class="login_top01">

				<a href="register.html"><p class="register_btn01"><img src="/img/img_arrow_top01.png" alt="今すぐとうろく！">今すぐとうろく！</p></a>

			</section>

			<section class="button_area01">

				<a href="index.html"><p class="button btn_top02"></p></a>

			</section>

		</article>

	</main>

<!-- 利用規約 -->

	<main role="main">

		<article class="legacy">

			<h2>

				<img src="/img/img_h1_terms.png" alt="利用規約">

			</h2>

			<p>この規約（以下「本規約」といいます。）は、IT KiDS株式会社（以下「当社」といいます。）が提供するPictCodeに関するすべての製品およびサービス（以下「本サービス」といいます。）の利用に関する条件を、本サービスを利用するお客様（以下「お客様」といいます。）と当社との間で定めるものです。</p>

			<div id="contents">

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			<section>

				<h3>1.&nbsp;定義</h3>

				<p>ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。ここに法規的文言が入ります。</p>

				<ol>

					<li></li>

					<li></li>

				</ol>

			</section>

			</div>

		</article>

	</main>

@header-height: 100px;

@header-color: white;

@header-bg: black;

@footer-height: 100px;

@footer-color: white;

@footer-bg: black;

@font-face {

font-family: 'Yasashisa';

src:url('../fonts/YasashisaGothic.woff');

}

* {

    margin: 0;

    padding: 0;

    -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

         -o-box-sizing: border-box;

        -ms-box-sizing: border-box;

            box-sizing: border-box;

}

body {

    background-color: #FFF;

	padding: 0px;

	margin: 0;

	font-family: Yasashisa !important;

	color: #4C2A01 !important;

	background-image: url(../img/bg_main_001.png);

}

#preload{

	width: 100%;

	height: 100%;

	position: relative;

	background: #777;

}

.progress{

	width: 200px;

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	margin: auto;

}

#preload_bar{

	width: 200px;

}

#ui-tab{

	position: absolute;

	/*background: blue;*/

	width: 100%;

	/*height: 100%;*/

}

#coding-tab{

	position: absolute;

}

#header{

	-moz-background-size:100% 100%;

	background-size:100% 100%;

	border:0px;

	width: 100%;

	height: 90px;

	z-index: 10;

	display: none;

}

.header_area {

	display:inline-block;

	text-align:center;

	position: absolute;

}

#header_left {

	width: 140px;

	left: 10px;

}	

#header_center {

	width: 210px;

	left: 0;

	right: 0;

	margin-left: auto;

	margin-right: auto;

}

#header_right {

	width: 420px;

	right: 10px;

}

.header_button {

	width: 64px;

	height: 64px;

	padding: 0px;

	background: transparent;

	margin-top:10px;

	margin-right: 2px;

	border:0px;

	outline: 0 !important;

	overflow : hidden;

	-moz-background-size:100% 100%;

	background-size:100% 100%;

	box-shadow: 3px 3px 5px 0px #555;

	-webkit-box-shadow: 3px 3px 5px 0px #555;

	-moz-box-shadow: 3px 3px 5px 0px #555;

	border-radius: 12px;

	-webkit-border-radius: 12px;

	-moz-border-radius: 12px;

}

.header_button:hover {

	width: 64px;

	height: 64px;

	padding: 0px;

	background: transparent;

	margin-top:10px;

	margin-right: 2px;

	margin-left: 2px;

	border:0px;

	-moz-background-size:100% 100%;

	background-size:100% 100%;

	box-shadow: 3px 3px 5px 0px #000 inset;

	-webkit-box-shadow: 3px 3px 5px 0px #000 inset;

	-moz-box-shadow: 3px 3px 5px 0px #000 inset;

	border-radius: 12px;

	-webkit-border-radius: 12px;

	-moz-border-radius: 12px;

}

/*

.header_button_image {

	width: 64px;

	height: 64px;

	padding: 0px;

	margin: 0px;

}

#modal_coding_vector_cancel{

	padding: 5px;

	background: transparent;

	border:0px;

}*/

/* Header on WEB Pages */

header {  

    z-index: 128;

    position: fixed;

    top: 0;

    width: 100%;

    padding:9px 8px;

    color: @header-color;

    background: @header-bg;

    height: @header-height;

    line-height: @header-height;

	background-image: url(../img/bg_header_001.png);

	text-align: center;

}

header img.left {

	display: inline-block;

}

header img.left {

	float: left;

}

header img.right {

	float: right;

}

header img.center {

	margin: 25px auto;

}

/* Main on WEB Pages */

article {

	background-color: rgba(255,255,255,0.75);

	width: 944px;

	padding: 24px 111px 24px;

	margin: 20px auto !important;

	border-radius: 10px;

	box-shadow:5px 5px  rgba(51,38,20,0.5);

	font-family: 

}

main {

	display: block;

	height: ;

	margin-top: 112px;

	margin-bottom: 112px;

}

article.main_top{

	display: block;

	overflow: hidden;

	background-image: url(../img/img_bg_top01.png);

	width: 944px;

	height: calc(100% - 300px);

	padding: 24px 111px;

	margin: 20px auto !important;

	border-radius: 10px;

}

article h2 {

	margin: 0 auto 24px;

}

article h3{

	margin: 0 auto 24px auto;

	font-weight: bold;

}

article section {

	display: block;

	margin: 0 auto 48px;

}

/* Footer on WEB Pages */

footer {  

    z-index: 128;

    position: fixed;

    bottom: 0;

	background-image: url(../img/bg_footer_001.png);

    width: 100%;

	padding-top: 5px;

	padding-bottom: 5px;

	margin-top: 20px;

    color: @header-color;

    background: @header-bg;

    height: @footer-height;

    line-height: @footer-height;

    text-align: center;

}

footer ul {

	display: block;

	width: 940px;

	padding-left: 10px;

	padding-right: 10px;

	list-style-type: none;

}

footer ul li {

	float: left;

	background:url(../img/footer_arrow01.png) left no-repeat;

	padding: 10px 0 10px 20px;

	margin-right: 30px;

	text-decoration: none;

	color: #4C2A01 !important;

}

footer hr {

	clear: both;

	border-top:1px solid #4C2A01 !important;

	margin:5px auto;

}

footer ul li a,a:link,a:visited {

	font-size: 12px;

	color: #4C2A01 !important;

	font-weight: bold;

	text-decoration: none !important;

}

footer ul li a:hover {

	color: #4C2A01 !important;

	text-decoration: underline !important;

}

img.logo {

	float: right;

	right: 0;

	margin: 0 10px 0;

}

#wrapper {

	display: block;

	width: 960px;

	margin: 0 auto;

	text-align: left;

}

/* TOP Page */

section.main_top01 {

	display: block;

	width: 630px;

	height: 350px;

	margin: 6px auto 0 150px;

	background-image: url(../img/img_contents_top01.png);

}

section.main_top01 p.main_btn01{

	display:inline-block;

	width: 420px;

	height: 80px;

	margin:190px 0 3px 140px;

	text-align: center;

	background-color: #FFF;

	border-radius: 5px;

	box-shadow:0 5px rgba(58,20,20,0.65);

	}

section.main_top01 p.main_btn01 a{

	display:block;

	padding-top:20px;

	height:80px;

	font-size: 32px;

	font-weight: bold;

	color: #EA7575 !important;

}

section.main_top01 img {

	margin-right: 20px;

	margin-top: -5px;

}

section.main_top01 p.main_btn01:hover{

	margin:195px 0 0 140px;

	box-shadow:none;

}

section.main_top02{

	display: block;

	width: 738px;

	height: 270px;

	margin: 4px auto 0 auto;

	background-image: url(../img/img_contents_top02.png);

}

section.main_top02 p.main_btn02{

	width: 210px;

	height: 40px;

	margin:90px 0 3px 385px;

	font-size: 18px;

	font-weight: bold;

	display:inline-block;

	text-align: center;

	background-color: #F39800;

	border-radius: 3px;

	box-shadow:0 3px rgba(56,41,20,0.65);

	}

section.main_top02 p.main_btn02 a{

	display:block;

	padding-top: 8px;

	height:40px;

	font-size: 18px;

	font-weight: bold;

	color: #FFF !important;

}

section.main_top02 p.main_btn02:hover{

	margin:93px 0 0 385px;

	box-shadow:none;

}

section.main_top02 p.main_btn03{

	width: 190px;

	height: 30px;

	margin:60px 0 3px 395px;

	font-weight: bold;

	display:inline-block;

	text-align: center;

	background-color: #6AB4DE;

	border-radius: 3px;

	box-shadow:0 3px rgba(22,47,58,0.65);

	}

section.main_top02 p.main_btn03 a{

	display:block;

	padding-top: 5px;

	height:30px;

	font-size: 15px;

	font-weight: bold;

	color: #FFF !important;

}

section.main_top02 p.main_btn03:hover{

	margin:63px 0 0 395px;

	box-shadow:none;

}

article {

	display: block;

}

/* Login and Save Page */

article.large_form {

	font-size: 18px;

}

article.large_form p {

	margin-bottom: 6px;

}

article.large_form dl {

	display: inline-table;

	height: 40px;

	margin: 12px 0 0;

}

article.large_form dl dt {

	position: absolute;

	padding: 0;

	margin: 6px 0;

	display: block;

	width: 226px;

}

article.large_form dl dd {

	margin:0;

  padding: 3px 0 3px 155px;

}

article.large_form dl dt label{

	width: 226px;

	margin-right: 0;

	margin-bottom: 24px;

	float: left;

	text-align: left;

	font-size: 36px;

	font-weight: bold; 

}

article.large_form dl dd input,

article.large_form dl dd textarea {

	display: block;

	position: relative;

	width: 464px;

	height: 60px;

	margin: 0 0 24px 120px;

	padding: 3px 0 3px 1em;;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	font-size: 24px;

}

article.large_form dl dd textarea {

	height: 180px !important;

}

article.large_form dl dd input:focus,

article.large_form dl dd textarea:focus{

	-webkit-transition: all .3s;

	transition: all .3s;

	box-shadow: 0 0 7px #1abc9c;

	border: 1px solid #1abc9c;

}

/*

article.login dl dd {

	display: block;

	position: relative;

	width: 464px;

	margin: 0 0 24px 120px;

	padding: 3px 0 3px 1em;;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

}

article.login dl dd input {

	height: 60px;

}

article.login dl dd textarea {

	height: 180px;

}

*/

/* Register Page */

article.register,

article.contact {

	display: block;

	height:100%;

	margin-top:112px;

	padding: 24px 111px 24px;

}

article.register {

	font-size: 18px;

}

article.register ol {

	display: block;

	overflow: hidden;

	width: 768px;

	height: 85px;

	margin: 24px auto 48px;

	padding: 0;

	list-style: none;

}

article.register ol li {

	display: block;

	overflow: hidden;

	float: left;

	background-image: url(../img/img_register_nav.png);

	width: 185px;

	height: 85px;

	margin: 0;

}

article.register ol li#navigator01_off {background-position:0 0;}

article.register ol li#navigator01_on {background-position:0 -85px;}

article.register ol li#navigator02_off {background-position:555px 0;}

article.register ol li#navigator02_on {background-position:555px -85px;}

article.register ol li#navigator03_off {background-position:370px 0;}

article.register ol li#navigator03_on {background-position:370px -85px;}

article.register ol li#navigator04_off {background-position:185px 0;}

article.register ol li#navigator04_on {background-position:185px -85px;}

article h3 {

	text-align: center;

	margin: 24px auto;

	font-size: 36px;

	font-weight: bold;

	color:#4C2A01;

}

article.register img {

	display: block;

	margin: 24px auto 12px;

}

article.register dl {

	display: inline-table;

	height: 40px;

	margin: 12px 0 0;

}

article.register dl dt {

	position: absolute;

	padding: 12px 0 0;

	margin: 12px 0;

	display: block;

	width: 226px;

}

article.register dl dd {

	margin:12px 0 0;

  padding: 12px 0 3px 155px;

  font-size: 24px;

}

article.register dl dd p {

	margin:9px 0 0 0px;

  padding: 3px 0 3px 120px;

}

article.register dl dt label{

	width: 226px;

	margin-right: 0;

	float: left;

	text-align: left;

	font-size: 24px;

	font-weight: bold; 

}

article.register dl dd input {

	display: block;

	position: relative;

	width: 464px;

	height: 40px;

	margin: 0 0 0 120px;

	padding: 3px 0 3px 1em;;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

}

article.register dl dd input:focus{

	-webkit-transition: all .3s;

	transition: all .3s;

	box-shadow: 0 0 7px #1abc9c;

	border: 1px solid #1abc9c;

}

/* Contact Form */

article.contact{

	font-size: 14px;

}

article.contact dl {

	display: inline-table;

	height: 40px;

	margin: 12px 0 0;

}

article.contact dl dt {

	position: absolute;

	padding: 8px 0 0;

	margin: 12px 0;

 	display: block;

	width: 226px;

}

article.contact dl dd {

	margin:12px 0 0;

	padding: 6px 0 2px 155px;

}

article.contact dl dt label{

	width: 226px;

	margin-right: 0;

	float: left;

	text-align: left;

	font-size: 14px;

	font-weight: bold; 

}

article.contact dl dd input,

article.contact dl dd textarea {

	display: block;

	position: relative;

	width: 464px;

	height: 36px;

	margin: 0 0 0 120px;

	padding: 2px 0 2px 1em;;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

}

article.contact dl dd textarea {

	height: 180px;

}

article.contact dl dd.radio label,

article.contact dl dd.radio input {

	display: block;

	width: 80px;

	height: 36px;

	margin: 0 0 0 20px;

	padding: 2px 0 2px 1em;;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

}

article.contact dl dd input:focus,

article.contact dl dd textarea:focus,

article.contact dl dd.radio:focus {

	-webkit-transition: all .3s;

	transition: all .3s;

	box-shadow: 0 0 7px #1abc9c;

	border: 1px solid #1abc9c;

}

/* Nav Button */

section.button_area01 {

	display: block;

	overflow: hidden;

	position: bottom;

	width: 536px;

	height: 85px;

	margin:48px auto 0;

}

section.button_area01 .button {

	display: block;