commit 50763f5b80d4dad725037eb17828a99f1f889b3f
Author: shiwa <shiwa@i-hearts.jp>
Date:   Tue Mar 1 11:42:06 2016 +0900

    イメージ・CSS・HTML追加

diff --git a/app/Config/core.php b/app/Config/core.php
index 50900c4..5afca1a 100755
--- a/app/Config/core.php
+++ b/app/Config/core.php
@@ -34,7 +34,7 @@
  * In production mode, flash messages redirect after a time interval.
  * In development mode, you need to click the flash message to continue.
  */
-	Configure::write('debug', 0);
+	Configure::write('debug', 2);
 
 /**
  * Configure the Error handler used to handle errors for your application. By default
diff --git a/app/View/top/about.ctp b/app/View/top/about.ctp
index 52b93b2..4c284bb 100755
--- a/app/View/top/about.ctp
+++ b/app/View/top/about.ctp
@@ -4,6 +4,7 @@
 <div class="col-lg-12">
 <div class="intro-text">
 <span class="name">PictCodeについて</span>
+<img src="/img/cake.icon.png"/>
 </div>
 </div>
 </div>
diff --git a/app/View/top/admin_top.html b/app/View/top/admin_top.html
new file mode 100644
index 0000000..14eb05e
--- /dev/null
+++ b/app/View/top/admin_top.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="admin">
+			<h2>
+				<img src="img/img_h1_admin01.png" alt="お問い合わせ - 送信完了">
+			</h2>
+			<p>ほぞんした PictCodeの プログラムを へんしゅうしたり さくじょしたり、コピーしたりできるよ！</p>
+			<p>下のいちらんから せんたくして へんしゅうしよう！</p>
+
+			<!-- Save Data 01 -->
+			<section class="save_data">
+				<a name="#save_data01">
+					<img src="img/img_save_sample02.png" alt="タイトル">
+					<h3>作品タイトル作品タイトル</h3>
+					<p>内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。内容ないようナイヨウ内容ないようナイヨウ内容ないようナイヨウ。</p>
+				</a>
+				<ul>
+					<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>
+					<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>
+					<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>
+					<li><a href="delete_check.html">さくじょ</a></li>
+					<li><a href="play.html">きょうゆう</a></li>
+					<li><a href="copy.html">コピー</a></li>
+				</ul>
+				</a>
+			</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>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/contact.html b/app/View/top/contact.html
new file mode 100644
index 0000000..36c9b6f
--- /dev/null
+++ b/app/View/top/contact.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/contact_check.html b/app/View/top/contact_check.html
new file mode 100644
index 0000000..9e23d1f
--- /dev/null
+++ b/app/View/top/contact_check.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="contact">
+			<h2>
+				<img src="img/img_h1_contact02.png" alt="お問い合わせ - 送信内容確認">
+			</h2>
+			<p class="">ご記入内容に誤りがないかをご確認ください。内容に誤りがある場合には「修正する」ボタンを押して修正を、問題がないようでしたら「送信する」ボタンを押して送信してください。</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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/contact_thanks.html b/app/View/top/contact_thanks.html
new file mode 100644
index 0000000..79323a2
--- /dev/null
+++ b/app/View/top/contact_thanks.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/delete_check.html b/app/View/top/delete_check.html
new file mode 100644
index 0000000..753d88f
--- /dev/null
+++ b/app/View/top/delete_check.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/delete_comp.html b/app/View/top/delete_comp.html
new file mode 100644
index 0000000..a823b01
--- /dev/null
+++ b/app/View/top/delete_comp.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/index.html b/app/View/top/index.html
new file mode 100644
index 0000000..20523ea
--- /dev/null
+++ b/app/View/top/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="main_top">
+			<section class="main_top01">
+				<p class="main_btn01"><a href=""><img src="img/img_arrow_top01.png">今すぐ始める！</a></p>
+			</section>
+			<section class="main_top02">
+				<p class="main_btn02"><a href="login.html"><img src="img/img_arrow_top02.png" style="margin-right:10px;">ログインする</a></p>
+				<p class="main_btn03"><a href="register.html"><img src="img/img_arrow_top03.png" style="margin-right:8px;">とうろくする</a></p>
+			</section>
+		</article>
+	</main>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/index2.html b/app/View/top/index2.html
new file mode 100644
index 0000000..b0ecfc4
--- /dev/null
+++ b/app/View/top/index2.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="main_top">
+			<section class="main_top01">
+				<p class="main_btn01"><a href="#"><img src="img/img_arrow_top01.png" style="margin-right:20px;">今すぐ始める！</a></p>
+			</section>
+			<section class="main_top02">
+				<a href="login.html"><p class="main_btn02"><img src="img/img_arrow_top02.png" style="margin-right:10px;">ログインする</p></a>
+				<a href="register.html"><p class="main_btn03"><img src="img/img_arrow_top03.png" style="margin-right:8px;">とうろくする</p></a>
+			</section>
+		</article>
+	</main>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/login.html b/app/View/top/login.html
new file mode 100644
index 0000000..816cb48
--- /dev/null
+++ b/app/View/top/login.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+	</header>
+	
+	<!-- メインコンテンツ -->
+	<main role="main">
+		<article class="large_form">
+			<h2>
+				<img src="img/img_h1_login.png" alt="PictCode ログイン">
+			</h2>
+			<p class="">ほぞんデータを かんりするためには、ニックネームと パスワードを 入力して ログインする ひつようが あります。 入力に まちがいがないように 注意してください。</p>
+				<section>
+					<dl>
+						<dt><label for="">ニックネーム</label></dt>
+						<dd><input type="text" name="id" value="" placeholder="ニックネーム" id="" /></dd>
+						<dt><label for="">パスワード</label></dt>
+						<dd><input type="password" name="password" value="" placeholder="パスワード" id="" /></dd>
+					</dl>
+				</section>
+				<section class="caution">
+					<p>ニックネームか　パスワードに<br>まちがいが あるよ！</p>
+				</section>
+				<section>
+					<p>ニックネームや パスワードを 忘れたばあいには お父さんや お母さんに 相談して、<br><a href="reminder.html"><span class="link_reminder">コチラ</span></a>を　クリックして　パスワードを　再はっこうしてもらってね！</p>
+				</section>
+				<section class="button_area01">
+					<a href="index.html"><p class="button btn_back02"></p></a>
+					<a href="login_top.html"><p class="button btn_login"></p></a>
+				</section>
+		</article>
+	</main>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/login_top.html b/app/View/top/login_top.html
new file mode 100644
index 0000000..4809642
--- /dev/null
+++ b/app/View/top/login_top.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="login_top">
+			<h2>
+				<img src="img/img_h1_top.png" alt="トップページ">
+			</h2>
+				<p>PictCodeの トップページです。<br>
+				<p>ここから　PictCodeで　プログラムを 作ったり かんりしたり、そうさほうほうを見たり することが できるよ！ 下のボタンから やりたいメニューボタンを おしてね！</p>
+			<section>
+				<a href="#"><p class="btn_new"></p></a>
+			</section>
+			<section>
+				<a href="admin_top.html"><p class="btn_continued"></p></a>
+			</section>
+			<section class="howto">
+				<p class="howto_btn"><a href="howto.html"><img src="img/img_arrow_top04.png">PictCodeの使い方</a></p>
+			</section>
+		</article>
+	</main>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/register.html b/app/View/top/register.html
new file mode 100644
index 0000000..7b989ed
--- /dev/null
+++ b/app/View/top/register.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="register">
+			<h2>
+				<img src="img/img_h1_register01.png" alt="PictCode登録 - 情報入力">
+			</h2>
+			<ol>
+			<li id="navigator01_on"></li>
+			<li id="navigator02_off"></li>
+			<li id="navigator03_off"></li>
+			<li id="navigator04_off"></li>
+			</ol>
+			<p class="">PictCodeに新規登録を行います。登録の際にはご両親の付き添い、または管理のもと、お間違いのないよう入力を行ってください。</p>
+			<div id="contents">
+				<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="email" value="" id="" placeholder="パスワード" /></dd>
+						<dt><label for="">パスワード（確認用）</label></dt>
+						<dd><input type="text" name="email" value="" id="" placeholder="パスワード(確認用)" /></dd>
+						<dt><label for="">メールアドレス</label></dt>
+						<dd><input type="text" name="email" value="" id="" placeholder="メールアドレス" /></dd>
+						<dt><label for="">キャプチャコード</label></dt>
+						<dd><input type="text" name="email" value="" id="" placeholder="絵の文字" /></dd>
+					</dl>
+				</section>
+			</div>
+				<section class="button_area01">
+					<a href="index.html"><p class="button btn_back01"></p></a>
+					<a href="register_check.html"><p class="button btn_check01"></p></a>
+				</section>
+		</article>
+	</main>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/register_check.html b/app/View/top/register_check.html
new file mode 100644
index 0000000..5c985d5
--- /dev/null
+++ b/app/View/top/register_check.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="register">
+			<h2>
+				<img src="img/img_h1_register02.png" alt="PictCode登録 - 情報入力">
+			</h2>
+			<ol>
+			<li id="navigator01_off"></li>
+			<li id="navigator02_on"></li>
+			<li id="navigator03_off"></li>
+			<li id="navigator04_off"></li>
+			</ol>
+			<p class="">PictCodeに新規登録を行います。登録の際にはご両親の付き添い、または管理のもと、お間違いのないよう入力を行ってください。</p>
+			<div id="contents">
+				<section>
+					<dl>
+						<dt><label for="">ニックネーム</label></dt>
+						<dd><p>************************</p></dd>
+						<dt><label for="">パスワード</label></dt>
+						<dd><p>************************</p></dd>
+						<dt><label for="">メールアドレス</label></dt>
+						<dd><p>************************</p></dd>
+						<dt><label for="">キャプチャコード</label></dt>
+						<dd><p>************************</p></dd>
+					</dl>
+				</section>
+			</div>
+				<section class="button_area01">
+					<a href="register.html"><p class="button btn_alter01"></p></a>
+					<a href="register_sent.html"><p class="button btn_register"></p></a>
+				</section>
+		</article>
+	</main>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/register_comp.html b/app/View/top/register_comp.html
new file mode 100644
index 0000000..b30cc58
--- /dev/null
+++ b/app/View/top/register_comp.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="btn header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="btn header_button right" type="button" src="image/ui/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="register">
+			<h2>
+				<img src="img/img_h1_register04.png" alt="PictCode登録 - 情報入力">
+			</h2>
+			<ol>
+			<li id="navigator01_off"></li>
+			<li id="navigator02_off"></li>
+			<li id="navigator03_off"></li>
+			<li id="navigator04_on"></li>
+			</ol>
+			<div id="contents">
+				<section>
+				<h3>登録が完了しました！</h3>
+				<p>この度は、PictCodeにご登録いただき誠にありがとうございます。<br>PictCodeは、これからIT技術を担っていくお子様達に、プログラミングを楽しんでもらうと同時に、プログラムを組む上で必要な「計画性」と「組織性」、そして「想像力」を育むツールでもあります。プログラミングにおいて、この無限大の可能性を持つツールを用いる事で、お子様の想像力を最大限に発揮させ、さらには世界を代表するような逸材に育てていきましょう！</p>
+				</section>
+			</div>
+				<section class="button_area01">
+					<a href="index.html"><p class="button btn_top02"></p></a>
+				</section>
+		</article>
+	</main>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/register_sent.html b/app/View/top/register_sent.html
new file mode 100644
index 0000000..395f4e4
--- /dev/null
+++ b/app/View/top/register_sent.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="register">
+			<h2>
+				<img src="img/img_h1_register03.png" alt="PictCode登録 - 情報入力">
+			</h2>
+			<ol>
+			<li id="navigator01_off"></li>
+			<li id="navigator02_off"></li>
+			<li id="navigator03_on"></li>
+			<li id="navigator04_off"></li>
+			</ol>
+			<div id="contents">
+				<section>
+				<h3>認証メールを送信しました！</h3>
+				<p>ご入力いただいたメールアドレス宛に、登録承認メールを送信しました。メール内に記載されてあるURLにアクセスしますと本承認が完了します。<br>万が一、メールが来ない場合は、迷惑メール処理が行われている、もしくはメールアドレスに誤りがある可能性があります。その場合には大変お手数ですが、メールアドレス等をご確認の上、再度ご登録お願い致します。</p>
+				</section>
+			</div>
+				<section class="button_area01">
+					<a href="index.html"><p class="button btn_top01"></p></a>
+				</section>
+		</article>
+	</main>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/reminder.html b/app/View/top/reminder.html
new file mode 100644
index 0000000..abe4cb8
--- /dev/null
+++ b/app/View/top/reminder.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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><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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/reminder_check.html b/app/View/top/reminder_check.html
new file mode 100644
index 0000000..20baf6b
--- /dev/null
+++ b/app/View/top/reminder_check.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/reminder_reissue.html b/app/View/top/reminder_reissue.html
new file mode 100644
index 0000000..65aaf69
--- /dev/null
+++ b/app/View/top/reminder_reissue.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/save.html b/app/View/top/save.html
new file mode 100644
index 0000000..27d0aa3
--- /dev/null
+++ b/app/View/top/save.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/save_check.html b/app/View/top/save_check.html
new file mode 100644
index 0000000..c8588b8
--- /dev/null
+++ b/app/View/top/save_check.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/save_comp.html b/app/View/top/save_comp.html
new file mode 100644
index 0000000..297f68f
--- /dev/null
+++ b/app/View/top/save_comp.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<main role="main">
+		<article class="admin">
+			<h2>
+				<img src="img/img_h1_contact03.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>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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>
+					<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/save_login.html b/app/View/top/save_login.html
new file mode 100644
index 0000000..3c33736
--- /dev/null
+++ b/app/View/top/save_login.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+	</header>
+	
+	<!-- メインコンテンツ -->
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/View/top/terms.html b/app/View/top/terms.html
new file mode 100644
index 0000000..c0ab512
--- /dev/null
+++ b/app/View/top/terms.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>-PictCode-</title>
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, minimum-scale=1.0">
+	<meta charset = "UTF-8">
+	<meta http-equiv="pragma" content="public">
+	<meta http-equiv="Cache-Control" content="public">
+	<meta http-equiv="Expires" content="-1">
+	<meta http-equiv="Expires" content="86400">
+	<!-- css -->
+	<link href = "css/main.css" rel="stylesheet" type="text/css">
+	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" >
+	<link href="css/jquery-ui.min.css" rel="stylesheet" >
+	<!-- 	<link href = "css/fixedheaderandfooter.css" rel="stylesheet" type="text/css">-->
+</head>
+
+<body>
+	<!-- ヘッダー -->
+
+	<header>
+		<a href=""><img class="header_button left" type="button" src="img/btn_header_004.png" alt=""></a>
+		<img class="center" src="img/header_title.png" alt="Pict Code">
+		<a href=""><img class="header_button right" type="button" src="img/btn_header_014.png" alt=""></a>
+	</header>
+	
+	<!-- メインコンテンツ -->
+
+	<script type="text/javascript">
+	$(function(){
+		reviseMargin();
+		$(window).on("resize",reviseMargin);
+		function reviseMargin(){
+			$("#contents").css({
+				"margin-top":$("header")[150].offsetHeight + "px",
+				"margin-bottom": $("footer")[450].offsetHeight + "px"
+			});
+		}
+	});
+	</script>
+
+	<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>
+
+	<!-- フッター -->
+
+	<footer>
+		<div id="wrapper">
+			<ul>
+				<li><a href="aboutthis.html" alt="">PictCodeについて</a></li>
+				<li><a href="terms.html" alt="">利用規約</a></li>
+				<li><a href="privacy.html" alt="">プライバシーポリシー</a></li>
+				<li><a href="aboutus.html" alt="">運営会社情報</a></li>
+				<li><a href="contact.html" alt="">お問い合わせ</a></li>
+			</ul>
+			<a href="index.html"><img class="logo" src="img/footer_logo01.png" alt=""></a>
+			<hr>
+			<img class="logo" src="img/footer_logo02.png" alt="">
+		</div>
+	</footer>
+
+	<!-- js -->
+	<script src="js/require_config.js"></script>
+	<script data-main="js/app.js" src="js/require.js"></script>
+</body>
+</html>
diff --git a/app/webroot/css/fonts/FontAwesome.otf b/app/webroot/css/fonts/FontAwesome.otf
index 81c9ad9..fa2e7a4 100755
Binary files a/app/webroot/css/fonts/FontAwesome.otf and b/app/webroot/css/fonts/FontAwesome.otf differ
diff --git a/app/webroot/css/pictcode/_main.css b/app/webroot/css/pictcode/_main.css
new file mode 100644
index 0000000..5015ab9
--- /dev/null
+++ b/app/webroot/css/pictcode/_main.css
@@ -0,0 +1,435 @@
+html, body {
+	padding: 0px;
+	margin: 0;
+	overflow: hidden;
+	height: 100%;
+}
+
+#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
+}
+
+#header_left {
+	width: 25%;
+}
+
+#header_center {
+	width: 25%;
+}
+
+#header_right {
+	width: 49%;
+}
+
+.header_button {
+	width: 64px;
+	height: 64px;
+	padding: 0px;
+	background: transparent;
+	margin-top:10px;
+	margin-right: 2px;
+	margin-left: 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_selected {
+	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;
+}
+
+#footer{
+	height: 70px;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+	border:0px;
+	text-align:center;
+	z-index: 10;
+	display: none;
+}
+
+.ui_footer_button{
+	vertical-align:middle;
+	position: relative;
+	width: 160px;
+	height: 60px;
+	background: transparent;
+	font-size: 2em;
+	margin-top: 10px;
+	text-align: center;
+	padding: 0px;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+	border: 0px;
+}
+
+.coding_footer_button{
+	width: 120px;
+	height: 50px;
+	font-size: 2em;
+	margin: 10px 10px;
+	text-align: center;
+	padding: 0px;
+	background: transparent;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+	border: 0px;
+}
+
+.coding_footer_button_image{
+	padding-bottom: 10p;
+}
+
+.play_footer_button {
+	width: 101px;
+	height: 41px;
+	border-width:0;
+	background-color: transparent;
+	margin-top: 20px;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+}
+
+.play_footer_button_image{
+	width: 101px;
+	height: 41px;
+	padding: 0px;
+	margin: 0px;
+}
+
+.centered-text {
+	text-align:center
+} 
+
+#back_button {
+	width: 45px;
+	height: 45px;
+	background-color: transparent;
+	border: 0px;
+	margin-top: 2px;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+}
+
+#sprite_list {
+	margin: 0px;
+	padding: 0px;
+	float: left;
+	width: 20%;
+	height: 100%;
+	text-align: center;
+}
+
+#ui_editor {
+	float: right;
+	width: 80%;
+	height: 100%;
+	text-align: center;
+	/*background: #888888;*/
+	padding: 10px;
+}
+
+#list_scroll {
+	position: absolute;
+	margin-left: 15px;
+	padding: 0px;
+	overflow:auto;
+	width:20%; height:100%;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+	text-align: center;
+}
+
+.sortable {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	width: 20%;
+	text-align:center
+}
+
+.sortable li {
+	margin: 5px;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+	height: 40px;
+	width: 120px;
+
+}
+
+#play-tab {
+	width: 100%;
+	height: 100%;
+	text-align: center; 
+}
+
+#play_screen {
+	padding: 10px;
+	width: 100%;
+	height: 100%;
+	text-align: center; 
+}
+
+.list_image {
+	width: 40px;
+	height: 40px;
+}
+
+.block_button{
+	background-color:transparent;
+	border-width:0;
+}
+
+.block_category_button{
+	width: auto;
+	padding:0;
+	margin:0;
+	background:none;
+	border:0;
+	font-size:0;
+	line-height:0;
+	overflow:visible;
+	cursor:pointer;
+}
+
+.sprite_category_button{
+	background-color:transparent;
+	border-width:0;
+}
+
+.sprite_button{
+	background-color:transparent;
+	border-width:0;
+}
+
+.modal-content{
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+	border-width:0px;
+	background: transparent;
+}
+
+.modal-footer{
+	border-width:0px; 
+}
+
+#modal_coding_block{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 50px 30px 40px 30px;
+	display:none;
+	z-index:5;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+}
+
+#modal_coding_vector{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 70px 30px 0px 40px;
+	display:none;
+	z-index:5;
+	-moz-background-size:100%;
+	background-size:100%;
+	text-align:center
+}
+
+#modal_coding_scalar{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 10px 30px 40px 30px;
+	display:none;
+	z-index:5;
+	-moz-background-size:100%;
+	background-size:100%;
+	text-align:center
+}
+
+#modal_coding_function{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 60px 30px 40px 30px;
+	display:none;
+	z-index:5;
+	-moz-background-size:100%;
+	background-size:100%;
+}
+
+#modal_coding_sound{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 40px 30px 40px 30px;
+	display:none;
+	z-index:5;
+	-moz-background-size:100%;
+	background-size:100%;
+}
+
+#modal_ui_sprite{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 50px 30px 40px 30px;
+	display:none;
+	z-index:5;
+	-moz-background-size:100% 100%;
+	background-size:100% 100%;
+}
+
+#modal_ui_tag{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 60px 30px 40px 30px;
+	display:none;
+	z-index:5;
+	-moz-background-size: 100%;
+	background-size:100% ;
+}
+
+#modal_ui_function{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 60px 30px 40px 30px;
+	display:none;
+	z-index:5;
+	-moz-background-size: 100%;
+	background-size:100% ;
+}
+
+#modal_ui_collision{
+	position:absolute;
+	right: 0;
+	left: 0;
+	margin: 0 auto;
+	padding: 60px 30px 40px 30px;
+	display:none;
+	z-index:5;
+	-moz-background-size: 100%;
+	background-size:100% ;
+	text-align:center
+}
+
+#modal-overlay{
+	z-index:20;
+	display:none;
+	position:fixed;
+	top:0;
+	left:0;
+	width:100%;
+	height:120%;
+	/*background-color:rgba(0,0,0,0.75);*/
+}
+
+#modal_back_button{
+	position:absolute;
+	bottom: 10px;
+	padding: 0px;
+	background: transparent;
+	border:0px;
+}
+
+#modal_coding_vector_ok, #modal_coding_vector_cancel, #modal_coding_scalar_ok, #modal_coding_scalar_cancel, #modal_coding_scalar_x1, #modal_coding_scalar_x10, #modal_coding_scalar_x100, #modal_ui_collision_ok, #modal_ui_collision_cancel, #modal_coding_scalar_input_button, #modal_coding_scalar_variable_button{
+	padding: 5px;
+	background: transparent;
+	border:0px;
+}
+
+/*#modal_coding_vector_cancel{
+	padding: 5px;
+	background: transparent;
+	border:0px;
+}*/
\ No newline at end of file
diff --git a/app/webroot/css/pictcode/main.css b/app/webroot/css/pictcode/main.css
index 5015ab9..23ad541 100755
--- a/app/webroot/css/pictcode/main.css
+++ b/app/webroot/css/pictcode/main.css
@@ -1,8 +1,34 @@
-html, body {
+@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;
-	overflow: hidden;
-	height: 100%;
+	font-family: Yasashisa !important;
+	color: #4C2A01 !important;
+	background-image: url(../img/bg_main_001.png);
+
 }
 
 #preload{
@@ -49,19 +75,26 @@ html, body {
 
 .header_area {
 	display:inline-block;
-	text-align:center
+	text-align:center;
+	position: absolute;
 }
 
 #header_left {
-	width: 25%;
-}
+	width: 140px;
+	left: 10px;
+}	
 
 #header_center {
-	width: 25%;
+	width: 210px;
+	left: 0;
+	right: 0;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 #header_right {
-	width: 49%;
+	width: 420px;
+	right: 10px;
 }
 
 .header_button {
@@ -71,7 +104,6 @@ html, body {
 	background: transparent;
 	margin-top:10px;
 	margin-right: 2px;
-	margin-left: 2px;
 	border:0px;
 	outline: 0 !important;
 	overflow : hidden;
@@ -88,7 +120,7 @@ html, body {
 	-moz-border-radius: 12px;
 }
 
-.header_button_selected {
+.header_button:hover {
 	width: 64px;
 	height: 64px;
 	padding: 0px;
@@ -110,6 +142,7 @@ html, body {
 	-moz-border-radius: 12px;
 }
 
+/*
 .header_button_image {
 	width: 64px;
 	height: 64px;
@@ -117,319 +150,846 @@ html, body {
 	margin: 0px;
 }
 
-#footer{
-	height: 70px;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
+#modal_coding_vector_cancel{
+	padding: 5px;
+	background: transparent;
 	border:0px;
-	text-align:center;
-	z-index: 10;
-	display: none;
-}
+}*/
 
-.ui_footer_button{
-	vertical-align:middle;
-	position: relative;
-	width: 160px;
-	height: 60px;
-	background: transparent;
-	font-size: 2em;
-	margin-top: 10px;
+
+/* 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;
-	padding: 0px;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
-	border: 0px;
 }
 
-.coding_footer_button{
-	width: 120px;
-	height: 50px;
-	font-size: 2em;
-	margin: 10px 10px;
-	text-align: center;
-	padding: 0px;
-	background: transparent;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
-	border: 0px;
+header img.left {
+	display: inline-block;
 }
 
-.coding_footer_button_image{
-	padding-bottom: 10p;
+header img.left {
+	float: left;
 }
 
-.play_footer_button {
-	width: 101px;
-	height: 41px;
-	border-width:0;
-	background-color: transparent;
-	margin-top: 20px;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
+header img.right {
+	float: right;
 }
 
-.play_footer_button_image{
-	width: 101px;
-	height: 41px;
-	padding: 0px;
-	margin: 0px;
+header img.center {
+	margin: 25px auto;
 }
 
-.centered-text {
-	text-align:center
-} 
 
-#back_button {
-	width: 45px;
-	height: 45px;
-	background-color: transparent;
-	border: 0px;
-	margin-top: 2px;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
+/* 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: 
 }
 
-#sprite_list {
-	margin: 0px;
-	padding: 0px;
+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;
-	width: 20%;
-	height: 100%;
-	text-align: center;
+	background:url(../img/footer_arrow01.png) left no-repeat;
+	padding: 10px 0 10px 20px;
+	margin-right: 30px;
+	text-decoration: none;
+	color: #4C2A01 !important;
 }
 
-#ui_editor {
+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;
-	width: 80%;
-	height: 100%;
+	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: #888888;*/
-	padding: 10px;
+	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;
 }
 
-#list_scroll {
-	position: absolute;
-	margin-left: 15px;
-	padding: 0px;
-	overflow:auto;
-	width:20%; height:100%;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
+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;
 }
 
-.sortable {
-	list-style-type: none;
-	margin: 0;
+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;
-	width: 20%;
-	text-align:center
+	margin: 6px 0;
+	display: block;
+	width: 226px;
 }
 
-.sortable li {
-	margin: 5px;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
+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;
-	width: 120px;
+	margin: 12px 0 0;
+}
 
+article.register dl dt {
+	position: absolute;
+	padding: 12px 0 0;
+	margin: 12px 0;
+	display: block;
+	width: 226px;
 }
 
-#play-tab {
-	width: 100%;
-	height: 100%;
-	text-align: center; 
+
+article.register dl dd {
+	margin:12px 0 0;
+  padding: 12px 0 3px 155px;
+  font-size: 24px;
 }
 
-#play_screen {
-	padding: 10px;
-	width: 100%;
-	height: 100%;
-	text-align: center; 
+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; 
 }
 
-.list_image {
-	width: 40px;
+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;
 }
 
-.block_button{
-	background-color:transparent;
-	border-width:0;
+article.register dl dd input:focus{
+	-webkit-transition: all .3s;
+	transition: all .3s;
+	box-shadow: 0 0 7px #1abc9c;
+	border: 1px solid #1abc9c;
 }
 
-.block_category_button{
-	width: auto;
-	padding:0;
-	margin:0;
-	background:none;
-	border:0;
-	font-size:0;
-	line-height:0;
-	overflow:visible;
-	cursor:pointer;
+
+/* Contact Form */
+
+article.contact{
+	font-size: 14px;
 }
 
-.sprite_category_button{
-	background-color:transparent;
-	border-width:0;
+article.contact dl {
+	display: inline-table;
+	height: 40px;
+	margin: 12px 0 0;
 }
 
-.sprite_button{
-	background-color:transparent;
-	border-width:0;
+article.contact dl dt {
+	position: absolute;
+	padding: 8px 0 0;
+	margin: 12px 0;
+ 	display: block;
+	width: 226px;
 }
 
-.modal-content{
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
-	border-width:0px;
-	background: transparent;
+
+article.contact dl dd {
+	margin:12px 0 0;
+	padding: 6px 0 2px 155px;
 }
 
-.modal-footer{
-	border-width:0px; 
+article.contact dl dt label{
+	width: 226px;
+	margin-right: 0;
+	float: left;
+	text-align: left;
+	font-size: 14px;
+	font-weight: bold; 
 }
 
-#modal_coding_block{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 50px 30px 40px 30px;
-	display:none;
-	z-index:5;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
+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;
 }
 
-#modal_coding_vector{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 70px 30px 0px 40px;
-	display:none;
-	z-index:5;
-	-moz-background-size:100%;
-	background-size:100%;
-	text-align:center
+article.contact dl dd textarea {
+	height: 180px;
 }
 
-#modal_coding_scalar{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 10px 30px 40px 30px;
-	display:none;
-	z-index:5;
-	-moz-background-size:100%;
-	background-size:100%;
-	text-align:center
+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;
 }
 
-#modal_coding_function{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 60px 30px 40px 30px;
-	display:none;
-	z-index:5;
-	-moz-background-size:100%;
-	background-size:100%;
+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;
 }
 
-#modal_coding_sound{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 40px 30px 40px 30px;
-	display:none;
-	z-index:5;
-	-moz-background-size:100%;
-	background-size:100%;
+
+/* Nav Button */
+
+section.button_area01 {
+	display: block;
+	overflow: hidden;
+	position: bottom;
+	width: 536px;
+	height: 85px;
+	margin:48px auto 0;
 }
 
-#modal_ui_sprite{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 50px 30px 40px 30px;
-	display:none;
-	z-index:5;
-	-moz-background-size:100% 100%;
-	background-size:100% 100%;
+section.button_area01 .button {
+	display: block;
+	overflow: hidden;
+	width: 214px;
+	height: 85px;
+	background: no-repeat;
+}
+
+section.button_area01 .button:hover {background-position: bottom;}
+
+section.button_area01 .btn_back01 {background: url(../img/img_button_back01.png) top; float: left;}
+section.button_area01 .btn_back02 {background: url(../img/img_button_back02.png) top; float: left;}
+section.button_area01 .btn_back03 {background: url(../img/img_button_back03.png) top; float: left;}
+section.button_area01 .btn_alter01 {background: url(../img/img_button_alter01.png) top; float: left;}
+section.button_area01 .btn_alter02 {background: url(../img/img_button_alter02.png) top; float: left;}
+section.button_area01 .btn_check01 {background: url(../img/img_button_check01.png) top; float: right;}
+section.button_area01 .btn_check02 {background: url(../img/img_button_check02.png) top; float: right;}
+section.button_area01 .btn_register {background: url(../img/img_button_register01.png) top; float: right;}
+section.button_area01 .btn_submit {background: url(../img/img_button_submit01.png) top; float: right;}
+section.button_area01 .btn_save {background: url(../img/img_button_save01.png) top; float: right;}
+section.button_area01 .btn_save02 {background: url(../img/img_button_save02.png) top; float: right;}
+section.button_area01 .btn_delete {background: url(../img/img_button_delete01.png) top; float: right;}
+section.button_area01 .btn_reissue {background: url(../img/img_button_reissue01.png) top; float: right;}
+section.button_area01 .btn_login {background: url(../img/img_button_login01.png) top; float: right; width: 274px;}
+section.button_area01 .btn_top01 {background: url(../img/img_button_top01.png) top; margin:auto;}
+section.button_area01 .btn_top02 {background: url(../img/img_button_top02.png) top; margin:auto;}
+section.button_area01 .btn_top03 {background: url(../img/img_button_top03.png) top; margin:auto; width: 274px;}
+
+
+/* Reminder */
+
+section.caution {
+	display: block;
+	text-align: center;
+	border: red 4px solid;
+	background-color: #FFF;
+	width: 736px;
+	height: auto;
+	margin: 24px auto 48px;
+	padding: 24px;
 }
 
-#modal_ui_tag{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 60px 30px 40px 30px;
-	display:none;
-	z-index:5;
-	-moz-background-size: 100%;
-	background-size:100% ;
+section.caution p {
+	color: red;
+	font-weight: bold;
+	font-size: 18px;
 }
 
-#modal_ui_function{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 60px 30px 40px 30px;
-	display:none;
-	z-index:5;
-	-moz-background-size: 100%;
-	background-size:100% ;
+section.image img {
+	display: block;
+	margin: 24px auto;
 }
 
-#modal_ui_collision{
-	position:absolute;
-	right: 0;
-	left: 0;
-	margin: 0 auto;
-	padding: 60px 30px 40px 30px;
-	display:none;
-	z-index:5;
-	-moz-background-size: 100%;
-	background-size:100% ;
-	text-align:center
-}
-
-#modal-overlay{
-	z-index:20;
-	display:none;
-	position:fixed;
-	top:0;
-	left:0;
-	width:100%;
-	height:120%;
-	/*background-color:rgba(0,0,0,0.75);*/
-}
-
-#modal_back_button{
-	position:absolute;
-	bottom: 10px;
-	padding: 0px;
-	background: transparent;
-	border:0px;
+section span.link_reminder {
+	font-weight: bold;
+	font-size: 18px;
+	color: red;
 }
 
-#modal_coding_vector_ok, #modal_coding_vector_cancel, #modal_coding_scalar_ok, #modal_coding_scalar_cancel, #modal_coding_scalar_x1, #modal_coding_scalar_x10, #modal_coding_scalar_x100, #modal_ui_collision_ok, #modal_ui_collision_cancel, #modal_coding_scalar_input_button, #modal_coding_scalar_variable_button{
-	padding: 5px;
-	background: transparent;
-	border:0px;
+article.legacy h3 {
+	font-size: 24px;
+	text-align: left;
 }
 
-/*#modal_coding_vector_cancel{
-	padding: 5px;
-	background: transparent;
-	border:0px;
-}*/
\ No newline at end of file
+article.legacy section p {
+	margin-left: 12px;
+}
+
+article.legacy section ol,
+article.legacy section ul {
+	margin-left: 24px;
+	list-style-position: inside;
+}
+
+/* Login Top */
+
+article.login_top {
+	font-size: 18px;
+	margin: 0 auto 12px;
+}
+
+article.login_top section {
+	display: block;
+	margin: 12px auto;
+}
+
+article.login_top p.btn_new ,
+article.login_top p.btn_continued  {
+	display: block;
+	overflow: hidden;
+	width: 738px;
+	height: 155px;
+	background: no-repeat;	
+}
+
+article.login_top section p.btn_new { background: url(../img/img_button_login_top01.png) top; margin:auto; }
+article.login_top section p.btn_continued { background: url(../img/img_button_login_top02.png) top; margin:auto; }
+
+article.login_top section p.btn_new:hover,
+article.login_top p.btn_continued:hover {
+	background-position: bottom;
+}
+
+article.login_top section.howto {
+	display: block;
+	width: 620px;
+	height: 200px;
+	margin: 12px auto;
+	background: url(../img/img_bg_login_top01.png) no-repeat;
+}
+
+section.howto p.howto_btn{
+	display:inline-block;
+	width: 280px;
+	height: 40px;
+	margin:110px 0 0 272px;
+	text-align: center;
+	background-color: #FFF;
+	border-radius: 5px;
+	box-shadow:0 3px rgba(22,53,20,0.5);
+	}
+
+section.howto p.howto_btn a{
+	display:block;
+	height:40px;
+	padding-top:8px;
+	font-size: 18px;
+	color: #00B26A !important;
+	font-weight: bold;
+}
+
+section.howto p.howto_btn a img{
+	margin: -5px 10px 0 0;
+}
+
+section.howto p.howto_btn:hover{
+	margin:113px 0 0 272px;
+	box-shadow:none;
+}
+
+/* Program Delete */
+
+section.delete img {
+	display: block;
+	margin: 24px auto
+}
+section.delete p {
+	display: block;
+	background-color: white;
+	border-radius: 12px;
+	width: 524px;
+	height: auto;
+	margin: 0 auto 12px;
+	padding: 12px;
+}
+
+/* Program Login */
+
+section.login_top01 {
+	display: block;
+	overflow: hidden;
+	margin: 12px auto;
+	width: 738px;
+	height: 300px;
+	background: url(../img/img_contents_top03.png) no-repeat;
+}
+
+section.login_top01 p.register_btn01{
+	display:inline-block;
+	width: 420px;
+	height: 80px;
+	margin:120px 0 0 60px;
+	text-align: center;
+	background-color: #FFF;
+	border-radius: 5px;
+	box-shadow:0 5px rgba(58,20,20,0.65);
+	}
+
+section.login_top01 a p.register_btn01{
+	display:block;
+	padding-top:18px;
+	height:80px;
+	font-size: 32px !important;
+	font-weight: bold;
+	color: #EA7575 !important;
+}
+
+section.login_top01 p.register_btn01 img {
+	margin-right: 20px;
+	margin-top: -5px;
+}
+
+section.login_top01 p.register_btn01:hover{
+	margin:125px 0 0 60px;
+	box-shadow:none;
+}
+
+
+/* Admin Top */
+
+article.admin p {
+	font-size: 18px;
+}
+
+
+article.admin section.save_data {
+	display: block;
+	overflow: hidden;
+	background-color: rgba(255,255,255,0.5);
+	border-radius: 10px;
+	width: 744px;
+	height: auto;
+	margin: 12px auto;
+	padding: 12px;
+}
+
+article.admin section.saved {
+	background-color: #F39800;
+	color: #FFF !important;
+}
+
+article.admin section.save_data a,
+article.admin section.save_data a:hover,
+article.admin section.save_data a:visited,
+article.admin section.save_data a:link {
+	color: #40220F;
+	text-decoration: none;
+}
+
+article.admin section.save_data h3 {
+	text-align: left;
+	margin: 6px auto 12px;
+}
+
+article.admin section.save_data img {
+	float: left;
+	margin: 0 12px auto 0;
+}
+
+article.admin section.save_data p {
+	width: auto;
+	font-size: 14px;
+	margin: 12px 0  12px 24px;
+}
+
+article.admin section.save_data ul {
+	display: inline-block;
+	float: right;
+	height: 45px;
+	margin: 0 0 0 auto;
+}
+
+/*
+article.admin section.save_data ul li{
+	display: inline-block;
+	float: right;
+	background-color: #FFF;
+	border-radius: 6px;
+	margin: 0 0 0 72px;
+	text-align: center;
+	font-weight: bold;
+	list-style-type: none;
+}
+
+article.admin section.save_data ul li a {
+	display: block;
+	height: 36px;
+	font-size: 18px !important;
+	padding: 6px 24px;
+	border-radius: 6px;
+	box-shadow:0 5px rgba(58,20,20,0.65);
+}
+
+article.admin section.save_data ul li a:hover {
+	height: 31px;
+	margin-top: 5px;
+	box-shadow: none;
+}
+*/
+
+
+
+article.admin section.save_data ul li{
+	display:inline-block;
+	height: 40px;
+	margin:0 0 0 75px;
+	text-align: center;
+	background-color: #FFF;
+	border-radius: 5px;
+	box-shadow:0 3px rgba(58,20,20,0.65);
+	}
+
+article.admin section.save_data ul li a{
+	display:block;
+	padding:6px 21px;
+	height:40px;
+	font-size: 18px;
+	font-weight: bold;
+}
+
+article.admin section.save_data ul li:hover{
+	margin:3px 0 0 75px;
+	box-shadow:none;
+}
\ No newline at end of file
diff --git a/app/webroot/img/bg_footer_001.png b/app/webroot/img/bg_footer_001.png
new file mode 100644
index 0000000..b722e1b
Binary files /dev/null and b/app/webroot/img/bg_footer_001.png differ
diff --git a/app/webroot/img/bg_header_001.png b/app/webroot/img/bg_header_001.png
new file mode 100644
index 0000000..2ef5b14
Binary files /dev/null and b/app/webroot/img/bg_header_001.png differ
diff --git a/app/webroot/img/bg_main_001.png b/app/webroot/img/bg_main_001.png
new file mode 100644
index 0000000..151b907
Binary files /dev/null and b/app/webroot/img/bg_main_001.png differ
diff --git a/app/webroot/img/bg_wood.jpg b/app/webroot/img/bg_wood.jpg
new file mode 100644
index 0000000..813775f
Binary files /dev/null and b/app/webroot/img/bg_wood.jpg differ
diff --git a/app/webroot/img/btn_header_004.png b/app/webroot/img/btn_header_004.png
new file mode 100644
index 0000000..0bd45c1
Binary files /dev/null and b/app/webroot/img/btn_header_004.png differ
diff --git a/app/webroot/img/btn_header_014.png b/app/webroot/img/btn_header_014.png
new file mode 100644
index 0000000..0e157ce
Binary files /dev/null and b/app/webroot/img/btn_header_014.png differ
diff --git a/app/webroot/img/footer_arrow01.png b/app/webroot/img/footer_arrow01.png
new file mode 100644
index 0000000..125af7c
Binary files /dev/null and b/app/webroot/img/footer_arrow01.png differ
diff --git a/app/webroot/img/footer_icon_sound_off.png b/app/webroot/img/footer_icon_sound_off.png
new file mode 100644
index 0000000..ca52a53
Binary files /dev/null and b/app/webroot/img/footer_icon_sound_off.png differ
diff --git a/app/webroot/img/footer_icon_sound_on.png b/app/webroot/img/footer_icon_sound_on.png
new file mode 100644
index 0000000..20f3bdd
Binary files /dev/null and b/app/webroot/img/footer_icon_sound_on.png differ
diff --git a/app/webroot/img/footer_logo01.png b/app/webroot/img/footer_logo01.png
new file mode 100644
index 0000000..cad8df3
Binary files /dev/null and b/app/webroot/img/footer_logo01.png differ
diff --git a/app/webroot/img/footer_logo02.png b/app/webroot/img/footer_logo02.png
new file mode 100644
index 0000000..24eb339
Binary files /dev/null and b/app/webroot/img/footer_logo02.png differ
diff --git a/app/webroot/img/header_title.png b/app/webroot/img/header_title.png
new file mode 100644
index 0000000..5320ed5
Binary files /dev/null and b/app/webroot/img/header_title.png differ
diff --git a/app/webroot/img/img_arrow_top04.png b/app/webroot/img/img_arrow_top04.png
new file mode 100644
index 0000000..576e082
Binary files /dev/null and b/app/webroot/img/img_arrow_top04.png differ
diff --git a/app/webroot/img/img_bg_login_top01.png b/app/webroot/img/img_bg_login_top01.png
new file mode 100644
index 0000000..c68ccc5
Binary files /dev/null and b/app/webroot/img/img_bg_login_top01.png differ
diff --git a/app/webroot/img/img_button_alter02.png b/app/webroot/img/img_button_alter02.png
index 1022177..eb63113 100644
Binary files a/app/webroot/img/img_button_alter02.png and b/app/webroot/img/img_button_alter02.png differ
diff --git a/app/webroot/img/img_button_back03.png b/app/webroot/img/img_button_back03.png
new file mode 100644
index 0000000..b94f34f
Binary files /dev/null and b/app/webroot/img/img_button_back03.png differ
diff --git a/app/webroot/img/img_button_delete01.png b/app/webroot/img/img_button_delete01.png
new file mode 100644
index 0000000..11cf471
Binary files /dev/null and b/app/webroot/img/img_button_delete01.png differ
diff --git a/app/webroot/img/img_button_login_top01.png b/app/webroot/img/img_button_login_top01.png
new file mode 100644
index 0000000..cceed47
Binary files /dev/null and b/app/webroot/img/img_button_login_top01.png differ
diff --git a/app/webroot/img/img_button_login_top02.png b/app/webroot/img/img_button_login_top02.png
new file mode 100644
index 0000000..adc815c
Binary files /dev/null and b/app/webroot/img/img_button_login_top02.png differ
diff --git a/app/webroot/img/img_button_reissue01.png b/app/webroot/img/img_button_reissue01.png
new file mode 100644
index 0000000..d6120d1
Binary files /dev/null and b/app/webroot/img/img_button_reissue01.png differ
diff --git a/app/webroot/img/img_button_save02.png b/app/webroot/img/img_button_save02.png
new file mode 100644
index 0000000..6fdaaf0
Binary files /dev/null and b/app/webroot/img/img_button_save02.png differ
diff --git a/app/webroot/img/img_button_top03.png b/app/webroot/img/img_button_top03.png
new file mode 100644
index 0000000..62f322c
Binary files /dev/null and b/app/webroot/img/img_button_top03.png differ
diff --git a/app/webroot/img/img_contents_top03.png b/app/webroot/img/img_contents_top03.png
new file mode 100644
index 0000000..807116f
Binary files /dev/null and b/app/webroot/img/img_contents_top03.png differ
diff --git a/app/webroot/img/img_h1_delete01.png b/app/webroot/img/img_h1_delete01.png
new file mode 100644
index 0000000..8267dbb
Binary files /dev/null and b/app/webroot/img/img_h1_delete01.png differ
diff --git a/app/webroot/img/img_h1_delete02.png b/app/webroot/img/img_h1_delete02.png
new file mode 100644
index 0000000..4281699
Binary files /dev/null and b/app/webroot/img/img_h1_delete02.png differ
diff --git a/app/webroot/img/img_h1_delete03.png b/app/webroot/img/img_h1_delete03.png
new file mode 100644
index 0000000..5597d85
Binary files /dev/null and b/app/webroot/img/img_h1_delete03.png differ
diff --git a/app/webroot/img/img_h1_save06.png b/app/webroot/img/img_h1_save06.png
new file mode 100644
index 0000000..e6b235b
Binary files /dev/null and b/app/webroot/img/img_h1_save06.png differ
diff --git a/app/webroot/img/img_h1_top.png b/app/webroot/img/img_h1_top.png
new file mode 100644
index 0000000..66152a7
Binary files /dev/null and b/app/webroot/img/img_h1_top.png differ
diff --git a/app/webroot/img/img_img_delete.png b/app/webroot/img/img_img_delete.png
new file mode 100644
index 0000000..770f0b7
Binary files /dev/null and b/app/webroot/img/img_img_delete.png differ
diff --git a/app/webroot/img/img_img_sendmail.png b/app/webroot/img/img_img_sendmail.png
new file mode 100644
index 0000000..2a620a7
Binary files /dev/null and b/app/webroot/img/img_img_sendmail.png differ
diff --git a/app/webroot/img/img_save_sample.png b/app/webroot/img/img_save_sample.png
new file mode 100644
index 0000000..64eb4ac
Binary files /dev/null and b/app/webroot/img/img_save_sample.png differ
diff --git a/app/webroot/img/img_save_sample02.png b/app/webroot/img/img_save_sample02.png
new file mode 100644
index 0000000..ad1fa17
Binary files /dev/null and b/app/webroot/img/img_save_sample02.png differ
diff --git a/app/webroot/sound/bgm/BOSSA1.wav b/app/webroot/sound/bgm/BOSSA1.wav
index 7c73cd0..0ecf770 100755
Binary files a/app/webroot/sound/bgm/BOSSA1.wav and b/app/webroot/sound/bgm/BOSSA1.wav differ
diff --git a/app/webroot/sound/bgm/FANTASY1.wav b/app/webroot/sound/bgm/FANTASY1.wav
index 18f4ae3..9db3d25 100755
Binary files a/app/webroot/sound/bgm/FANTASY1.wav and b/app/webroot/sound/bgm/FANTASY1.wav differ
diff --git a/app/webroot/sound/bgm/FANTASY2.wav b/app/webroot/sound/bgm/FANTASY2.wav
index b9cef4f..0af2ec3 100755
Binary files a/app/webroot/sound/bgm/FANTASY2.wav and b/app/webroot/sound/bgm/FANTASY2.wav differ
diff --git a/app/webroot/sound/bgm/FANTASY3.wav b/app/webroot/sound/bgm/FANTASY3.wav
index 45b8b35..8432464 100755
Binary files a/app/webroot/sound/bgm/FANTASY3.wav and b/app/webroot/sound/bgm/FANTASY3.wav differ
diff --git a/app/webroot/sound/bgm/FANTASY4.wav b/app/webroot/sound/bgm/FANTASY4.wav
index e98ff19..0d45079 100755
Binary files a/app/webroot/sound/bgm/FANTASY4.wav and b/app/webroot/sound/bgm/FANTASY4.wav differ
diff --git a/app/webroot/sound/bgm/ORCHESTRA1.wav b/app/webroot/sound/bgm/ORCHESTRA1.wav
index bc79b42..d2d7c10 100755
Binary files a/app/webroot/sound/bgm/ORCHESTRA1.wav and b/app/webroot/sound/bgm/ORCHESTRA1.wav differ
diff --git a/app/webroot/sound/bgm/POP1.wav b/app/webroot/sound/bgm/POP1.wav
index e11194e..a4189fe 100755
Binary files a/app/webroot/sound/bgm/POP1.wav and b/app/webroot/sound/bgm/POP1.wav differ
diff --git a/app/webroot/sound/bgm/POP2.wav b/app/webroot/sound/bgm/POP2.wav
index 1652190..e9c1697 100755
Binary files a/app/webroot/sound/bgm/POP2.wav and b/app/webroot/sound/bgm/POP2.wav differ
diff --git a/app/webroot/sound/bgm/POP3.wav b/app/webroot/sound/bgm/POP3.wav
index c8715fc..1c0a4b2 100755
Binary files a/app/webroot/sound/bgm/POP3.wav and b/app/webroot/sound/bgm/POP3.wav differ
diff --git a/app/webroot/sound/bgm/POP4.wav b/app/webroot/sound/bgm/POP4.wav
index 1221db1..6fe2338 100755
Binary files a/app/webroot/sound/bgm/POP4.wav and b/app/webroot/sound/bgm/POP4.wav differ
diff --git a/app/webroot/sound/bgm/ROCK1.wav b/app/webroot/sound/bgm/ROCK1.wav
index ab2a802..a2a66d4 100755
Binary files a/app/webroot/sound/bgm/ROCK1.wav and b/app/webroot/sound/bgm/ROCK1.wav differ
diff --git a/app/webroot/sound/bgm/ROCK2.wav b/app/webroot/sound/bgm/ROCK2.wav
index f540b9f..f8612f4 100755
Binary files a/app/webroot/sound/bgm/ROCK2.wav and b/app/webroot/sound/bgm/ROCK2.wav differ
diff --git a/app/webroot/sound/bgm/ROCK3.wav b/app/webroot/sound/bgm/ROCK3.wav
index 33a52ff..68a012e 100755
Binary files a/app/webroot/sound/bgm/ROCK3.wav and b/app/webroot/sound/bgm/ROCK3.wav differ
diff --git a/app/webroot/sound/se/ACTION2.mp3 b/app/webroot/sound/se/ACTION2.mp3
index 2edb946..dc01fc9 100755
Binary files a/app/webroot/sound/se/ACTION2.mp3 and b/app/webroot/sound/se/ACTION2.mp3 differ
diff --git a/app/webroot/sound/se/ACTION7.mp3 b/app/webroot/sound/se/ACTION7.mp3
index 69a93c1..16d0356 100755
Binary files a/app/webroot/sound/se/ACTION7.mp3 and b/app/webroot/sound/se/ACTION7.mp3 differ
diff --git a/app/webroot/sound/se/AIRPLANE1.mp3 b/app/webroot/sound/se/AIRPLANE1.mp3
index 28cffbe..58e8a75 100755
Binary files a/app/webroot/sound/se/AIRPLANE1.mp3 and b/app/webroot/sound/se/AIRPLANE1.mp3 differ
diff --git a/app/webroot/sound/se/AIRPLANE2.mp3 b/app/webroot/sound/se/AIRPLANE2.mp3
index 2906ad3..b82786d 100755
Binary files a/app/webroot/sound/se/AIRPLANE2.mp3 and b/app/webroot/sound/se/AIRPLANE2.mp3 differ
diff --git a/app/webroot/sound/se/ALERT1.mp3 b/app/webroot/sound/se/ALERT1.mp3
index 6a2fb36..4e60c7d 100755
Binary files a/app/webroot/sound/se/ALERT1.mp3 and b/app/webroot/sound/se/ALERT1.mp3 differ
diff --git a/app/webroot/sound/se/ALERT5.mp3 b/app/webroot/sound/se/ALERT5.mp3
index ff3dce5..83d17a6 100755
Binary files a/app/webroot/sound/se/ALERT5.mp3 and b/app/webroot/sound/se/ALERT5.mp3 differ
diff --git a/app/webroot/sound/se/ATTACK1.mp3 b/app/webroot/sound/se/ATTACK1.mp3
index 7a5101b..b643d84 100755
Binary files a/app/webroot/sound/se/ATTACK1.mp3 and b/app/webroot/sound/se/ATTACK1.mp3 differ
diff --git a/app/webroot/sound/se/ATTACK14.mp3 b/app/webroot/sound/se/ATTACK14.mp3
index b6836c7..34553ec 100755
Binary files a/app/webroot/sound/se/ATTACK14.mp3 and b/app/webroot/sound/se/ATTACK14.mp3 differ
diff --git a/app/webroot/sound/se/ATTACK9.mp3 b/app/webroot/sound/se/ATTACK9.mp3
index 9b75487..e591112 100755
Binary files a/app/webroot/sound/se/ATTACK9.mp3 and b/app/webroot/sound/se/ATTACK9.mp3 differ
diff --git a/app/webroot/sound/se/BOAT1.mp3 b/app/webroot/sound/se/BOAT1.mp3
index 8c1bb43..672b7f8 100755
Binary files a/app/webroot/sound/se/BOAT1.mp3 and b/app/webroot/sound/se/BOAT1.mp3 differ
diff --git a/app/webroot/sound/se/BOAT2.mp3 b/app/webroot/sound/se/BOAT2.mp3
index f54dfa3..0ff361f 100755
Binary files a/app/webroot/sound/se/BOAT2.mp3 and b/app/webroot/sound/se/BOAT2.mp3 differ
diff --git a/app/webroot/sound/se/BUS1.mp3 b/app/webroot/sound/se/BUS1.mp3
index fed0e5f..f899bb0 100755
Binary files a/app/webroot/sound/se/BUS1.mp3 and b/app/webroot/sound/se/BUS1.mp3 differ
diff --git a/app/webroot/sound/se/CAR1.mp3 b/app/webroot/sound/se/CAR1.mp3
index 19bd596..b1d81b4 100755
Binary files a/app/webroot/sound/se/CAR1.mp3 and b/app/webroot/sound/se/CAR1.mp3 differ
diff --git a/app/webroot/sound/se/CAR2.mp3 b/app/webroot/sound/se/CAR2.mp3
index 0a80923..5f8955b 100755
Binary files a/app/webroot/sound/se/CAR2.mp3 and b/app/webroot/sound/se/CAR2.mp3 differ
diff --git a/app/webroot/sound/se/CAR3.mp3 b/app/webroot/sound/se/CAR3.mp3
index 8cf6def..852f009 100755
Binary files a/app/webroot/sound/se/CAR3.mp3 and b/app/webroot/sound/se/CAR3.mp3 differ
diff --git a/app/webroot/sound/se/CAR4.mp3 b/app/webroot/sound/se/CAR4.mp3
index 9823db3..7896b63 100755
Binary files a/app/webroot/sound/se/CAR4.mp3 and b/app/webroot/sound/se/CAR4.mp3 differ
diff --git a/app/webroot/sound/se/CAR5.mp3 b/app/webroot/sound/se/CAR5.mp3
index 90308a8..e6fd848 100755
Binary files a/app/webroot/sound/se/CAR5.mp3 and b/app/webroot/sound/se/CAR5.mp3 differ
diff --git a/app/webroot/sound/se/CAR6.mp3 b/app/webroot/sound/se/CAR6.mp3
index 23d7127..c8374e5 100755
Binary files a/app/webroot/sound/se/CAR6.mp3 and b/app/webroot/sound/se/CAR6.mp3 differ
diff --git a/app/webroot/sound/se/CHEER1.mp3 b/app/webroot/sound/se/CHEER1.mp3
index 937412d..396e49f 100755
Binary files a/app/webroot/sound/se/CHEER1.mp3 and b/app/webroot/sound/se/CHEER1.mp3 differ
diff --git a/app/webroot/sound/se/CHEER2.mp3 b/app/webroot/sound/se/CHEER2.mp3
index 5965540..666d6de 100755
Binary files a/app/webroot/sound/se/CHEER2.mp3 and b/app/webroot/sound/se/CHEER2.mp3 differ
diff --git a/app/webroot/sound/se/CHEER3.mp3 b/app/webroot/sound/se/CHEER3.mp3
index 1adb827..65ebac8 100755
Binary files a/app/webroot/sound/se/CHEER3.mp3 and b/app/webroot/sound/se/CHEER3.mp3 differ
diff --git a/app/webroot/sound/se/CHIME1.mp3 b/app/webroot/sound/se/CHIME1.mp3
index 2261f53..b4202a6 100755
Binary files a/app/webroot/sound/se/CHIME1.mp3 and b/app/webroot/sound/se/CHIME1.mp3 differ
diff --git a/app/webroot/sound/se/CHIME2.mp3 b/app/webroot/sound/se/CHIME2.mp3
index 5981a61..34410ac 100755
Binary files a/app/webroot/sound/se/CHIME2.mp3 and b/app/webroot/sound/se/CHIME2.mp3 differ
diff --git a/app/webroot/sound/se/CHIME3.mp3 b/app/webroot/sound/se/CHIME3.mp3
index f1c142c..2f9b186 100755
Binary files a/app/webroot/sound/se/CHIME3.mp3 and b/app/webroot/sound/se/CHIME3.mp3 differ
diff --git a/app/webroot/sound/se/CHIME4.mp3 b/app/webroot/sound/se/CHIME4.mp3
index 7462a75..2768191 100755
Binary files a/app/webroot/sound/se/CHIME4.mp3 and b/app/webroot/sound/se/CHIME4.mp3 differ
diff --git a/app/webroot/sound/se/CHIME5.mp3 b/app/webroot/sound/se/CHIME5.mp3
index e6ee1da..e075b52 100755
Binary files a/app/webroot/sound/se/CHIME5.mp3 and b/app/webroot/sound/se/CHIME5.mp3 differ
diff --git a/app/webroot/sound/se/DRUM1.mp3 b/app/webroot/sound/se/DRUM1.mp3
index c5b21ba..3ce4fc7 100755
Binary files a/app/webroot/sound/se/DRUM1.mp3 and b/app/webroot/sound/se/DRUM1.mp3 differ
diff --git a/app/webroot/sound/se/DRUM2.mp3 b/app/webroot/sound/se/DRUM2.mp3
index 2195d35..cbec80c 100755
Binary files a/app/webroot/sound/se/DRUM2.mp3 and b/app/webroot/sound/se/DRUM2.mp3 differ
diff --git a/app/webroot/sound/se/DRUM4.mp3 b/app/webroot/sound/se/DRUM4.mp3
index b6ae556..23e2483 100755
Binary files a/app/webroot/sound/se/DRUM4.mp3 and b/app/webroot/sound/se/DRUM4.mp3 differ
diff --git a/app/webroot/sound/se/FALLING1.mp3 b/app/webroot/sound/se/FALLING1.mp3
index f27cbe0..92b84c5 100755
Binary files a/app/webroot/sound/se/FALLING1.mp3 and b/app/webroot/sound/se/FALLING1.mp3 differ
diff --git a/app/webroot/sound/se/FALLING2.mp3 b/app/webroot/sound/se/FALLING2.mp3
index e0d2897..98925fc 100755
Binary files a/app/webroot/sound/se/FALLING2.mp3 and b/app/webroot/sound/se/FALLING2.mp3 differ
diff --git a/app/webroot/sound/se/PIANO2.mp3 b/app/webroot/sound/se/PIANO2.mp3
index 25b2819..57aad3b 100755
Binary files a/app/webroot/sound/se/PIANO2.mp3 and b/app/webroot/sound/se/PIANO2.mp3 differ
diff --git a/app/webroot/sound/se/PIANO3.mp3 b/app/webroot/sound/se/PIANO3.mp3
index 5b386be..655333c 100755
Binary files a/app/webroot/sound/se/PIANO3.mp3 and b/app/webroot/sound/se/PIANO3.mp3 differ
diff --git a/app/webroot/sound/se/PIANO4.mp3 b/app/webroot/sound/se/PIANO4.mp3
index d1919b6..42f9590 100755
Binary files a/app/webroot/sound/se/PIANO4.mp3 and b/app/webroot/sound/se/PIANO4.mp3 differ
diff --git a/app/webroot/sound/se/PIANO5.mp3 b/app/webroot/sound/se/PIANO5.mp3
index ac0343d..f8e1c25 100755
Binary files a/app/webroot/sound/se/PIANO5.mp3 and b/app/webroot/sound/se/PIANO5.mp3 differ
diff --git a/app/webroot/sound/se/PIANO6.mp3 b/app/webroot/sound/se/PIANO6.mp3
index 0d9105b..55d5d4a 100755
Binary files a/app/webroot/sound/se/PIANO6.mp3 and b/app/webroot/sound/se/PIANO6.mp3 differ
diff --git a/app/webroot/sound/se/PIANO7.mp3 b/app/webroot/sound/se/PIANO7.mp3
index 5d89827..38c4654 100755
Binary files a/app/webroot/sound/se/PIANO7.mp3 and b/app/webroot/sound/se/PIANO7.mp3 differ
diff --git a/app/webroot/sound/se/QUESTION1.mp3 b/app/webroot/sound/se/QUESTION1.mp3
index 9f1a710..e3ca88b 100755
Binary files a/app/webroot/sound/se/QUESTION1.mp3 and b/app/webroot/sound/se/QUESTION1.mp3 differ
diff --git a/app/webroot/sound/se/QUESTION3.mp3 b/app/webroot/sound/se/QUESTION3.mp3
index 9a559e6..3426fe0 100755
Binary files a/app/webroot/sound/se/QUESTION3.mp3 and b/app/webroot/sound/se/QUESTION3.mp3 differ
diff --git a/app/webroot/sound/se/QUESTION4.mp3 b/app/webroot/sound/se/QUESTION4.mp3
index dc69046..0e6d2f3 100755
Binary files a/app/webroot/sound/se/QUESTION4.mp3 and b/app/webroot/sound/se/QUESTION4.mp3 differ
diff --git a/app/webroot/sound/se/SIREN1.mp3 b/app/webroot/sound/se/SIREN1.mp3
index 181eb3b..dc28628 100755
Binary files a/app/webroot/sound/se/SIREN1.mp3 and b/app/webroot/sound/se/SIREN1.mp3 differ
diff --git a/app/webroot/sound/se/START1.mp3 b/app/webroot/sound/se/START1.mp3
index c44a5bc..2f7f1d6 100755
Binary files a/app/webroot/sound/se/START1.mp3 and b/app/webroot/sound/se/START1.mp3 differ
diff --git a/app/webroot/sound/se/START2.mp3 b/app/webroot/sound/se/START2.mp3
index cc87e08..8a898df 100755
Binary files a/app/webroot/sound/se/START2.mp3 and b/app/webroot/sound/se/START2.mp3 differ
diff --git a/app/webroot/sound/se/SWING2.mp3 b/app/webroot/sound/se/SWING2.mp3
index ce2e030..63d6cad 100755
Binary files a/app/webroot/sound/se/SWING2.mp3 and b/app/webroot/sound/se/SWING2.mp3 differ
diff --git a/app/webroot/sound/se/SWING3.mp3 b/app/webroot/sound/se/SWING3.mp3
index 1c8f9aa..3d06b72 100755
Binary files a/app/webroot/sound/se/SWING3.mp3 and b/app/webroot/sound/se/SWING3.mp3 differ
diff --git a/app/webroot/sound/se/WATER1.mp3 b/app/webroot/sound/se/WATER1.mp3
index f074cc2..a46187b 100755
Binary files a/app/webroot/sound/se/WATER1.mp3 and b/app/webroot/sound/se/WATER1.mp3 differ
