diff --git a/app/images/t-shirt_icon/tshirt1.gif b/app/images/t-shirt_icon/tshirt1.gif
index ec192cc6b2e4da31f9c81ae65479be5c0bb11385..8cb454ae10d57663c0ef7a9d30cc59767bc440e8 100644
GIT binary patch
delta 757
zcmV<R0t)@j3bqLaM@dFFIgtg+0s#QA(g^{7iNLd`&;Or5gWhyFB%lzPPeKYYdIaar
zpiras9C`!;G7UtNs3bD6h|>^K!wL=Yl?c+KPBIqhO6059w^Ktf#nlxn6Abl;xNK_>
zF5Dq|LuiO51jJb+hL7kh!V;`su|wF3Wc=-j&15v!5_t?+2wRPGlXS>z<Z$H8oTUzb
z=`fH(UcHsgn!}7bHB{NBkAT*j)z=3-6S6U?Z5t>NyPikJ-hJf50058Ru`PbvYzH^5
z53(J;L~Y@{)W_QEL;xjau1y+q80a{>PtB8)fZn=fabWj98Dqa|kN|t#B;AK!Ttft7
z8e$|lXI^Rc5H%oykx6z00S;lq#6$>x5r>}<0uVO;(g2ltK)_w!fcIboMvTbB0NI5A
z;u0PKR>X-Y5;0d28WhkHX&bFH<B3IBwPI{bsW@96CO%lifktqWgaSk|MwN!{g{H&@
z0xT%RM@sxtR(k`=(&CbV6)}L8-;w1Ykhy7<r8GPmfyb9LqNhXwOae53G;02TsAL=e
z*$6<CMida}5LVI2W(Yz`l&29nD&di$f5wMIhfiQC5v5_4qC})mH1KF9oNgGxVn-MX
z#TkT#0LhwvN;rfEdq(j{Oc+4oXQ!iDBZUS=PSSy>8Z=M<tYOB8m;kLRL4X3I4WdQ^
z&ozMThK)h002L4jz{ni~oYG8xsa4`h$%M^bDbs)g0uZ1HU%PJDKtO7E*ny5!j27jW
zUATM9F0~wWC>H#3u}lL1SlhrN8~}jk6$N`?*Z_ghvMm@9e}RoE1H`#S#$9AM$-@x$
z_L9k7fNZdbVyL`DnHZzo1<WVUL37G7(~<MX3lpG>9>l=%!5V8wO0vsfTR?doG(I15
zOaUH1Ep?<)(|Se+&`jU~Bme3;M=SfB<4PnB5v>PVdX%#UBW%Osbs4kl!$%~!%Ds!-
nd^l3T-USd4-9D-8d<z!m4sQ72h$pW2;*2-$_~Vct5d;7`rp!#l

delta 909
zcmV;819JSf3C#)xM@dFFH<1O)0tpJS(g^{7*+8ME&;Or5g9g3na7aKQGM|JLa`XsJ
zAqE0Sol3Q;RjWjgU_hp!XcCn~CKh=bBI?z%Xr*Q~k`$?vj77u}A!|0RU8+oJ;u71H
z35I$^T+TIE_wL;xf<tJCCIm!VB#w{hEW)y^;mbqhilqGQh|Oer!xAZc8Exi+nl(Cq
z4PE5%=^<t_$evAm_TifYIRFmanTYGSphrusO<eYEx37(;4(!#}2R#$AF%ll2IPv3(
z4QfW*d-;(M0{}dNCpUHm3+T~bx7)gdo8726GlAP!aO?{X7#wimV13#m;Shk5e90+M
z83zMdR^4m~$acX45!l9_XqzRW8dytzOqQ5=vNf3h!2%U95Mc(`g)qT;ei=kSf=3{<
zk`Wwc&|m}!Ft7jv#!WaxFu%1(5_ki$WlvEtHdsM_7gUhre{pSR1OX0V!^A``!ZsX(
zvN2$zk|gRlgaC|<G(cw_5a8E0_FYNb1+<kIf|*PV0AC1WF5wYkMZ{=bmrNRe#o7@X
z6wuP2Mog6Ef_pA$nsagX#uS|9)R(84iI&)75u7BUfTNVHWhJ7Odg)y<0t6|<M@sxd
z7F3kd)}MrZhM*fai4`$`sgka$;A|1F2_XVp^0}xGP8wCJG=z$#D~A;<@W2BXEWoCs
zXHl3$0hba1o-`pWOQ{15M%$);j(2_q0H;P2!2hCi-XeNI0w9VD>#$pylWh@!D&bMP
zvx(TOj1tUSEwM|0`Gmm|@tY{MS2b3wVuC)=z`be^*{XH7O?HI3P@I9Ti3%@#+ru6V
zAjKmwVF1abrA>IRHBx8*=_DOYtU&_>Slse|<+dom$4U^OKnH>>Q*(HK4d}dcwUrs6
zfdW)OAOItG3~)*_?JnIgwv-$}0MJT&Ab<h_5TMCmENhKb0|BWKW(N^dK{Thjc4780
zyVQczy7Dx)#WD>5kaPo!Z~y?VSJeH5V*><23)EmJ4hA-=43KQ!b5!X8;)(n1h2)=m
z-o;{bfZj!|k&Dg+>MyByz6I-{&!MpxHFNN4^(cR^&Bz*S=*zk3U2N(eG+!TcOaUGs
zuYA7BmwZMC(45E!-Yd`1%0B0~5{W~+>(Q+q<*dQT_^?!8#w`2r5sAv_@6tXWjuaq&
j0R)V<Pb#k8f<@Q*_wWDz01Ti22S~sI8t{Ne2m$~*&rg*O

diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
index 915be57..d5a7593 100644
--- a/app/scripts/controllers/main.js
+++ b/app/scripts/controllers/main.js
@@ -11,6 +11,7 @@ define(['app'], function (app) {
 		var currentTShirtKey = 0;
 		var placeTShirtKey = '';
 		var tShirtColorFirstKey = 0;
+		$scope.hideReviewDesign = false;
 		$scope.tShirtChoiceBackFrontKey = 'front';
 		$scope.tShirtColorKey = tShirtColorFirstKey;
 
@@ -124,6 +125,15 @@ define(['app'], function (app) {
 		$scope.modalClose = function(){
 			$('#tshirt-design').modal('hide');
 		};
+		/**
+		 *Show/Hide review design
+		 */
+		$scope.hideShowReviewDesign = function () {
+			if($scope.hideReviewDesign == true)
+				$scope.hideReviewDesign = false;
+			else
+				$scope.hideReviewDesign = true;
+		}
 
 
 	});
diff --git a/app/styles/main.css b/app/styles/main.css
index 9c59045..8a94013 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -36,11 +36,20 @@ button.red{
   color: #ffffff;
   background-color: #ff0000;
   border: 1px solid #ff0000;
-
+}
+button.yellow1{
+  background:url("../images/bgbutton1.png") repeat #ff801d;
+  color: #ffffff;
+  border: 1px solid #ff801d;
+}
+button.yellow2{
+  background:url("../images/bgbutton2.png") repeat #ff801d;
+  color: #ffffff;
+  border: 1px solid #ff801d;
 }
 button.white{
-  border: 1px solid #ff8080;
-  color: #ff8080;
+  border: 1px solid #ff801d;
+  color: #ff801d;
   background-color: #ffffff;
 }
 button.brown{
@@ -55,6 +64,10 @@ button.black{
   color: #ffffff;
   padding: 1px 6px;
 }
+button.none{
+  border: 0;
+  background-color: transparent;
+}
 #tshirt-container{
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
@@ -232,10 +245,23 @@ aside .step .title{
   font-weight: bold;
   margin-bottom: 3px;
 }
+aside .step .title span:first-child {
+  float: left;
+  width: 28%
+}
+aside .step .title span:last-child{
+  float: left;
+  width: 72%;
+  padding: 6px 0;
+}
+
+aside .step .title span:last-child {
+
+}
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
-  margin-bottom: 3px;
+  margin-bottom: 5px;
 }
 aside .step .title-notice .require{
   font-size: 10px;
@@ -243,12 +269,10 @@ aside .step .title-notice .require{
 aside .step .step-box{
   border: 2px solid #dcdcdc;
   font-size: 12px;
-
+  position: relative;
 }
 /*Step 1*/
 aside .step .step-box .tshirt-design{
-  /*border: 1px solid #cccccc;*/
-  /*background-color: #f5f5f5;*/
   margin: 4px 4px;
 }
 aside .step .step-box .tshirt-design:hover{
@@ -269,6 +293,7 @@ aside .step .step-box .tshirt-design .icon{
 aside .step .step-box .tshirt-design .icon img{
   max-width: 100%;
 }
+
 aside .step .step-box .tshirt-design .name{
   padding: 2px 4px;
   text-align: center;
@@ -285,9 +310,11 @@ aside .step .step-box .tshirt-design .action button{
 }
 /*Step 2*/
 aside .step .step-box .tshirt-color{
-  padding: 6px 10px;
+  padding: 6px 6px;
+  height: 100%;
   position: relative;
 }
+
 aside .step .step-box .tshirt-color ul.choice-color{
   float: left;
   list-style: none;
@@ -296,7 +323,7 @@ aside .step .step-box .tshirt-color ul.choice-color{
   margin-bottom: 3px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li{
-  margin: 0 8px 4px 0;
+  margin: 0 6px 6px 0;
   border: 1px solid #cccccc;
   padding: 2px 2px;
   float: left;
@@ -309,8 +336,9 @@ aside .step .step-box .tshirt-color ul.choice-color li:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li div{
-  height: 30px;
-  width: 30px;
+  height: 26px;
+  width: 26px;
+  margin: 0;
 }
 
 aside .step .step-box .tshirt-color ul.choice-color li.white div{
@@ -319,16 +347,25 @@ aside .step .step-box .tshirt-color ul.choice-color li.white div{
 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
   background-color: #e7dfd0;
 }
-aside .step .step-box .tshirt-color .color-name{
+aside .step .step-box .choice-color-bottom{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 80%;
+  margin: 0 10%;
+}
+aside .step .step-box .choice-color-bottom .color-name{
   width: 100%;
-  font-size: 10px;
+  font-size: 12px;
+  text-align: center;
+  padding: 4px 0;
 }
-aside .step .step-box .tshirt-color .view-more{
-
+aside .step .step-box .choice-color-bottom .view-more{
+  text-align: right;
 }
 /*Step 3*/
 aside .step .step-box .tshirt-saveorder{
-  padding: 10px 10px 6px 10px;
+  padding: 10px 10px 10px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action{
   width: 50%;
@@ -341,41 +378,33 @@ aside .step .step-box .tshirt-saveorder .action:last-child{
   padding-left: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action button{
-  padding: 8px 10px;
-
-}
-aside .step .step-box .tshirt-saveorder .action button .text{
-  float: left;
-  width: 80%;
-  text-align: center;
-  padding-left: 10px;
-  vertical-align: bottom;
-}
-aside .step .step-box .tshirt-saveorder .action button .arrow{
-  float: left;
-  width: 20%;
-  height: 40px;
-  position: relative;
-}
-aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
-  position: absolute;
-  top: 50%;
-  right: -6px;
-  transform: translateX(-50%) translateY(-50%);
-  -webkit-transform: translateX(-50%) translateY(-50%);
+  padding: 4px 10px;
+  width: 100%;
 }
 
+
 /*Step 4*/
 
 aside .step .step-box .change-design{
-  padding: 4px 4px;
+  /*padding: 4px 4px;*/
 }
 aside .step .step-box .change-design table{
-
+  width: 100%;
 }
 aside .step .step-box .change-design table tr{
   border-bottom: 1px dotted #cccccc;
 }
+aside .step .step-box .change-design table tr td{
+  padding: 4px 3px;
+}
+aside .step .step-box .change-design table tr td:first-child{
+  background-color: #ededed;
+}
+aside .step .step-box .change-design table tr td:last-child{
+  background: url("../images/bgbutton2.png");
+  color: #ffffff;
+  font-size: 15px;
+}
 aside .step .step-box .change-design table tr:last-child{
   border-bottom: 0;
 }
@@ -399,6 +428,8 @@ aside .step .finish-design button{
   right: 10px;
   color: red;
   font-size: 11px;
+  cursor: pointer;
+  z-index: 99999;
 }
 #tshirt-content .tshirt-image{
   padding: 20px 0 0 0;
@@ -479,14 +510,14 @@ aside .step .finish-design button{
   cursor: pointer;
 }
 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
-  background-color: red;
+  background-color: #ff7200;
   color: #ffffff;
 }
 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
   color: #ffffff;
 }
 #tshirt-design header ul.nav li i.fa{
-  color: #fe070f;
+  color: #fc7500;
   font-size: 20px;
   margin-right: 10px;
 }
@@ -543,7 +574,7 @@ aside .step .finish-design button{
 }
 .aside .box-design-option li .content i.fa{
   font-size: 30px;
-  color: #fe070f;
+  color: #ff7200;
   margin: 8px 0;
 }
 .aside .box-design-option li .content .des{
@@ -845,6 +876,9 @@ footer{
 footer ul.nav-footer{
   padding-left: 0;
   list-style: none;
+  float: left;
+  width: 80%;
+  margin-bottom: 0
 }
 footer ul.nav-footer li{
   float: left;
@@ -856,6 +890,20 @@ footer ul.nav-footer li a{
   color: #ffffff;
   font-size: 11px;
 }
+footer .logo-bottom{
+  float: left;
+  width: 20%;
+  margin-bottom: 0;
+  text-align: right;
+}
+footer .logo-bottom img{
+  height: 25px;
+  max-width: 100%;
+}
+.footer{
+  padding: 15px 0;
+  text-align: center;
+}
 /* Customize container */
 @media (min-width: 768px) {
   .container {
@@ -875,7 +923,7 @@ footer ul.nav-footer li a{
     width: 1000px;
   }
 }
-
+/*Mobile responsive*/
 @media (max-width: 762px) {
   .modal-dialog{
     margin: 0 0!important;
@@ -900,6 +948,35 @@ footer ul.nav-footer li a{
   .tshirt-design-container .design-content{
     padding: 0 0;
   }
+  /*Header*/
+  header .logo{
+    text-align: left;
+  }
+  header .top-control li{
+    margin: 0 4px;
+  }
+  header .top-menu{
+    display: table;
+    margin: auto;
+  }
+  header .social-share{
+    display: none;
+  }
+  header .col-sm-6{
+    padding: 0!important;
+  }
+  header .user-control{
+    position: absolute;
+    right: 0;
+    top: -120%;
+  }
+  /*Footer*/
+  footer ul.nav-footer{
+    width: 100%;
+  }
+  footer .logo-bottom{
+    display: none;
+  }
 }
 
 
diff --git a/app/views/main.html b/app/views/main.html
index 2319115..e4f654a 100644
--- a/app/views/main.html
+++ b/app/views/main.html
@@ -60,8 +60,6 @@
       <div class="col-sm-12">
         <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
         <ul class="pull-right">
-
-
           <li class="circle"><a href="#">商品に戻る</a></li>
           <li class="line"></li>
           <li class="circle"><a href="#">加工方法に戻る</a></li>
@@ -70,26 +68,29 @@
         </ul>
       </div>
     </nav>
+    <div style="height: 29px; width: 100%; background: url('../images/linebg.png') repeat-x">
+
+    </div>
     <article class="clearfix">
         <aside class="col-sm-5">
           <div class="clearfix row" style="position: relative">
             <div class="step col-xs-6">
               <div class="title clearfix">
-                <span style="float: left;width: 28%"><img src="../images/stepicon1.png" alt="1" /></span> <span style="float: left;width: 72%; padding: 16px 0">デザインを作る</span>
+                <span><img src="../images/stepicon1.png" alt="1" /></span> <span>デザインを作る</span>
               </div>
               <div class="step-box">
                 <div class="tshirt-design clearfix">
                   <div class="icon">
                     <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
                   </div>
-                  <div class="name">
-                    背中背中 (28x22)
-                  </div>
-                  <div class="action">
-                    <button class="red" ng-click="modalTShirtDesign()">
-                      デザインを作る
-                    </button>
-                  </div>
+                    <div class="name">
+                      背中背中 (28x22)
+                    </div>
+                    <div class="action">
+                      <button class="yellow2" ng-click="modalTShirtDesign()">
+                        デザインを作る
+                      </button>
+                    </div>
                 </div>
               </div>
             </div>
@@ -102,18 +103,20 @@
             <!-- STEP 2-->
             <div class="step col-xs-6">
               <div class="title clearfix">
-                <span style="float: left;width: 28%"><img src="../images/stepicon2.png" alt="2" /></span><span style="float: left;width: 72%;padding: 6px 0"> アイテムカラーを変更する</span>
+                <span><img src="../images/stepicon2.png" alt="2" /></span><span> アイテムカラーを変更する</span>
               </div>
-              <div class="step-box clearfix">
+              <div class="step-box clearfix" style="min-height: 150px;">
                 <div class="tshirt-color">
                   <ul class="choice-color clearfix">
                     <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
                       <div ng-style="{'background-color' : color.code}"></div>
                     </li>
                   </ul>
+                </div>
+                <div class="choice-color-bottom">
                   <div class="color-name" ng-bind="tShirtColorName"></div>
                   <div class="view-more">
-                    在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
+                    在庫確認
                   </div>
                 </div>
               </div>
@@ -123,7 +126,7 @@
 
           <!--  BREAK DOWN-->
           <div class="text-center break-down">
-            <img src="images/bg_step_arrow.gif" alt="arrow" />
+            <img src="images/arrow2.png" alt="arrow" />
           </div>
 
           <!-- STEP 3-->
@@ -133,22 +136,12 @@
                 <div class="clearfix">
                   <div class="action">
                     <button class="white">
-                      <div class="text">
                         このデザインを保存する
-                      </div>
-                      <div class="arrow">
-                        <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
-                      </div>
                     </button>
                   </div>
                   <div class="action">
-                    <button class="red">
-                      <div class="text">
+                    <button class="yellow1">
                         このデザインで注文する
-                      </div>
-                      <div class="arrow clearfix">
-                        <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
-                      </div>
                     </button>
                   </div>
                 </div>
@@ -164,7 +157,7 @@
             <!-- STEP 4-->
             <div class="step">
               <div class="title-notice">
-                商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
+                <strong>商品・デザインの変更はこちら</strong> <span class="require">作業中のデザインは破棄されます</span>
               </div>
               <div class="step-box">
                 <div class="change-design">
@@ -172,15 +165,15 @@
                     <tr>
                       <td class="text-center">商品</td>
                       <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
-                      <td class="text-right">
-                        <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
+                      <td class="text-center">
+                        <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>
                       </td>
                     </tr>
                     <tr>
                       <td width="10%" class="text-center">加工方法</td>
                       <td width="70%">シルク：胸中央 (27×27)</td>
-                      <td width="20%" class="text-right">
-                        <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
+                      <td width="20%" class="text-center">
+                        <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>
                       </td>
                     </tr>
                   </table>
@@ -199,12 +192,12 @@
           </div>
         </aside>
         <section id="tshirt-content" class="col-sm-7 text-center">
-          <div class="switch-border-design">
+          <div class="switch-border-design" ng-click="hideShowReviewDesign()">
             <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
           </div>
           <div class="tshirt-image">
             <img ng-src="{{ tShirtImg }}" alt="" />
-            <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
+            <div ng-class="placeTshirt.place" id="preview-design" ng-style="hideReviewDesign == true ? {border: 0} : {}" ng-show="(placeTshirt.face === tShirtChoiceBackFrontKey)" ng-click="modalTShirtDesign()">
               <img ng-src="{{outputImage}}" ng-show="outputImage"/>
             </div>
           </div>
@@ -236,7 +229,13 @@
         <li><a href="#">採用情報</a></li>
         <li><a href="#">プライバシーポリシー</a></li>
       </ul>
+      <div class="logo-bottom">
+        <img src="../images/logobottom.png" alt="Logo" />
+      </div>
     </footer>
+    <div class="footer text-center">
+      Copyright &copy; CREVASSE - All Rights Reserved
+    </div>
 
     <!--MODAL CONTENT-->
     <div ng-include="designFrameView"></div>