@media screen and (max-width:640px){

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  ベーススタイル
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#nengaMakerWrap img, 
#nengaHowtoWrap img          { width:100%; }

/*------------------------------
  text
-------------------------------*/
.spTxtCenter                 { text-align:center !important; }
.spTxtLeft                   { text-align:left !important; }

/*------------------------------
  float
-------------------------------*/
.fLeft                       { float:none; }
.fRight                      { float:none; }  
.spFLeft                     { float:left !important; }
.spFRight                    { float:right !important; }

/* clearfix */
.spCf:before, .spCf:after    { display:table; content:""; }
.spCf:after                  { clear:both; }
.spCf                        { zoom:1; }
.spCb                        { clear:both; }

/*------------------------------
  margin
-------------------------------*/
.spMt0                       { margin-top:0 !important; }
.spMt5                       { margin-top:5px !important; }
.spMt10                      { margin-top:10px !important; }
.spMt15                      { margin-top:15px !important; }
.spMt20                      { margin-top:20px !important; }
.spMt25                      { margin-top:25px !important; }
.spMt30                      { margin-top:30px !important; }
.spMl0                       { margin-left:0 !important; }
.spMl5                       { margin-left:5px !important; }
.spMl10                      { margin-left:10px !important; }
.spMl15                      { margin-left:15px !important; }
.spMl20                      { margin-left:20px !important; }
.spMl25                      { margin-left:25px !important; }
.spMl30                      { margin-left:30px !important; }
.spMr0                       { margin-right:0 !important; }
.spMr5                       { margin-right:5px !important; }
.spMr10                      { margin-right:10px !important; }
.spMr15                      { margin-right:15px !important; }
.spMr20                      { margin-right:20px !important; }
.spMr25                      { margin-right:25px !important; }
.spMr30                      { margin-right:30px !important; }
.spMb0                       { margin-bottom:0 !important; }
.spMb5                       { margin-bottom:5px !important; }
.spMb10                      { margin-bottom:10px !important; }
.spMb15                      { margin-bottom:15px !important; }
.spMb20                      { margin-bottom:20px !important; }
.spMb25                      { margin-bottom:25px !important; }
.spMb30                      { margin-bottom:30px !important; }

/*------------------------------
  display
-------------------------------*/
.spDisplayNone { display:none !important; }
.spDisplayBlock { display:block !important; }

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  レイアウト
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* 共通 */
#contents_block { overflow:hidden; }
#nengaMakerWrap                                                      { min-width:initial; min-width:auto; height:auto; }
#nengaMakerWrap h2                                                   { background:url(../images/common_step_bg_sp.png) left bottom no-repeat; background-size:cover; width:95%; margin:0 auto; padding:5% 0 7%; }

/* ホバーアニメーション */
#nengaMakerWrap a                                                    { display:block; transition:none; }
#nengaMakerWrap a:hover                                              { transform:none; }

#nengaMakerWrap .nengaMakerArea                                      { width:auto; padding-bottom:25%; }
#nengaMakerWrap .nengaMakerArea .nengaMakerInner p.previewImg        { float:none; }
#nengaMakerWrap.base01 .nengaMakerArea .nengaMakerInner p.previewImg { width:50%; height:auto; margin:0 auto; }
#nengaMakerWrap.base02 .nengaMakerArea .nengaMakerInner p.previewImg { width:50%; height:auto; margin:0 auto; }
#nengaMakerWrap.base03 .nengaMakerArea .nengaMakerInner p.previewImg { width:50%; height:auto; margin:0 auto; }

/* ローカルナビ */
#nengaMakerWrap #nengaMakerLocalNaviSection                                           { background-size:contain; }
#nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea                  { width:auto; }
#nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul               { margin-left:13%; padding:0.5% 0; height:auto; }
#nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul li            { margin-left:0.9%; padding-left:3%; width:12%; }
#nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul li:last-child { width:10.8%; margin-left:0.9%; padding-left:2.5%; }
#nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea p                { position:absolute; left:2%; top:4%; width:8.5%; }
#nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea p img            { height:auto; }

/* ボタンナビ */
#nengaMakerWrap #nengaMakerBtnNaviSection                { width:100%; left:0; bottom:15px; margin-left:0; }
#nengaMakerWrap #nengaMakerBtnNaviSection ul li          { width:15%; }
#nengaMakerWrap #nengaMakerBtnNaviSection ul li#stepBack { margin-left:3%; }
#nengaMakerWrap #nengaMakerBtnNaviSection ul li#stepNext { margin-right:3%; }

/* トップページ */
#nengaMakerWrap #nengaMakerTopSection                                   { background:url(../images/top_mv_bg_sp.gif) center top no-repeat; background-size:cover; min-width:initial; min-width:auto; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea                   { padding:7% 0 5%; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea h1                { margin-left:0; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea p#topMvTxt01      { right:2.5% !important; top:38.5%; width:33.5%; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea p#topTxt01        { margin:5% auto 0; width:90%; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea ul                { margin-top:5%; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea ul li             { margin-left:0; width:37%; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea ul li:first-child { width:27%; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea ul li:last-child  { width:27%; }
#nengaMakerWrap #nengaMakerTopSection .nengaMakerArea p.nengaCopyright { margin-top:3%; }

/* STEP01 */
#nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner           { margin:5% 0 0; position:relative; }
#nengaMakerWrap.base02 #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner p  { margin:0 0 0 5%; width:70%; }
#nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner ul        { float:none; width:100%; margin:0; padding:2.5% 0; text-align:center;position:absolute; left:100%; top:20.4%; z-index:10; border:1px solid #b3b3b3; background:url(../images/common_smp_menu_bg01.png) center top repeat; }
#nengaMakerWrap.base02 #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner ul { top:32.4%; }
#nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner ul li     { margin:1%; width:21%; }
#nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn        { display:block; position:absolute; right:5%; top:0; margin:0; width:15%; }
#nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span   { width:100%; }
#nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span a { display:block; }

/* STEP02 */
#nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner           { margin:5% 0 0; position:relative; }
#nengaMakerWrap.base02 #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner p  { margin:0 0 0 5%; width:70%; }
#nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner ul        { float:none; width:100%; margin:0; padding:2.5% 0; text-align:center;position:absolute; left:100%; top:20.4%; z-index:10; border:1px solid #b3b3b3; background:url(../images/common_smp_menu_bg01.png) center top repeat; }
#nengaMakerWrap.base02 #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner ul { top:32.4%; }
#nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner ul li     { margin:1%; width:21%; }
#nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn        { display:block; position:absolute; right:5%; top:0; margin:0; width:15%; }
#nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span   { width:100%; }
#nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span a { display:block; }

/* STEP03 */
#nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner           { margin:5% 0 0; position:relative; }
#nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner p         { margin-top:0; }
#nengaMakerWrap.base02 #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner p  { margin:0 0 0 5%; width:70%; }
#nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner ul        { float:none; width:100%; margin:0; padding:2.5% 0; text-align:center;position:absolute; left:100%; top:20.4%; z-index:10; border:1px solid #b3b3b3; background:url(../images/common_smp_menu_bg01.png) center top repeat; }
#nengaMakerWrap.base02 #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner ul { top:32.4%; }
#nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner ul li     { margin:1%; width:45%; }
#nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn        { display:block; position:absolute; right:5%; top:0; margin:0; width:15%; }
#nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span   { width:100%; }
#nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span a { display:block; }

/* STEP04 */
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner                                                          { margin:5% 0 0; position:relative; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner p                                                        { margin-top:0; }
#nengaMakerWrap.base02 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner p                                                 { margin:0 0 0 5%; width:70%; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box                                               { float:none; width:100%; margin:0; padding:2.5% 0; text-align:center;position:absolute; left:100%; top:20.4%; z-index:10; border:1px solid #b3b3b3; background:url(../images/common_smp_menu_bg01.png) center top repeat; }
#nengaMakerWrap.base02 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box                                        { top:32.4%; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl                                                       { margin:2% auto 0; padding-top:1%; width:95%; text-align:center; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl.firstList                                             { margin-top:0; }
#nengaMakerWrap.base02 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl.firstList                                      { margin-top:2%; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl dt                                                    { margin:0 0 0 1%; width:8%; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl dt img                                                { width:100%; height:auto; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl dd                                                    { margin:0; width:15%; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl                                     { width:77%; margin:2% auto 0; text-align:center; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl.firstList                                      { margin-top:0; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl dt                                  { float:none; margin:2% 0 0 4%; width:16%; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl dt img                              { width:100%; height:auto; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl dd                                  { float:none; width:auto; margin:3% 0; display:block; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl dd ul li                            { margin:0; width:23%; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box ul#step04Base03BtnNaviList li          { top:40%; width:7%; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box ul#step04Base03BtnNaviList li#naviBack { left:3%; }
#nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box ul#step04Base03BtnNaviList li#naviNext { right:3%; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn        { display:block; position:absolute; right:5%; top:0; margin:0; width:15%; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span   { width:100%; }
#nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span a { display:block; }

/* STEP05 */
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner                                            { margin:5% 0 0; position:relative; }
#nengaMakerWrap.base02 #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner p                                   { margin:0 0 0 5%; width:70%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox                        { float:none; width:100%; margin:0; padding:2.5% 0; text-align:center;position:absolute; left:100%; top:20.4%; z-index:10; border:1px solid #b3b3b3; background:url(../images/common_smp_menu_bg01.png) center top repeat; }
#nengaMakerWrap.base02 #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox                 { top:32.4%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox.btn02                  { top:42.7%; }
#nengaMakerWrap.base02 #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox.btn02           { top:66.7%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl                     { text-align:center; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dt                  { margin-top:1%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dt:first-child      { margin-top:1%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd                  { margin:2% 0 0; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dt:first-child + dd { margin-top:3%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input            { width:90%; height:35px; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd ul               { width:auto; margin:2% 0 0; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd ul li            { margin:3% 0 0; width:20%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input#chkNoChara                { width:40%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input#chkNoChara + label        { padding:5% 0 0 5%; background-size:100% auto; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd + dd                            { text-align:left; margin:3% 0 0 4%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input#chkNoChara + label + img  { width:30%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn        { display:block; position:absolute; right:5%; top:0; margin:0; width:15%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span   { width:100%; display:block; margin-bottom:10%; }
#nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span a { display:block; }

/* 完成ページ */
#nengaMakerWrap #nengaMakerCompSection                                                                       { background:url(../images/comp_bg_sp.gif) center top no-repeat; background-size:cover; min-width:initial; min-width:auto; height:auto; }
#nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner                                      { padding:8% 0 0; }
#nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner p#compImg                            { width:50%; height:auto; margin:20% auto 0; position:static; }
#nengaMakerWrap.base02 #nengaMakerCompSection .nengaMakerArea .nengaMakerInner p#compImg                     { width:74%; height:auto; margin:20% auto 0; position:static; }
#nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox                  { float:none; width:auto; margin:0; }
#nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox p#compTxt01      { right:0 !important; top:0; }
#nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox p#compTxt02      { position:static; margin:3% 0; }
#nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox p#compBtn        { right:25%; top:auto; bottom:-9%; width:50%; }
#nengaMakerWrap.base02 #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox p#compBtn { bottom:-8%; }

/* 使い方 */
#nengaHowtoWrap                                                      { min-width:initial; min-width:auto; width:95%; margin:3% auto 5%; }
#nengaHowtoWrap h2                                                   { width:auto; }
#nengaHowtoWrap #nengaHowtoSection                                   { width:auto; margin:3% auto 5%; }
#nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea                   { padding:5% 2.5%; }
#nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea h4                { margin:0 0 0 10px; font-size:108%; font-weight:bold; }
#nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea h4 span           { font-size:124%; padding:0 0 0 20px; background:url(../images/common_icon_question.png) 0 50% no-repeat; }
#nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea p                 { margin:10px 0 0 10px; line-height:1.5em; }
#nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea p#introTxt        { font-size:124%; }
#nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea ol                { margin:10px 0; padding:15px; border:1px solid #e3e3e3; background:#f0f0f0; }
#nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea ol li             { margin:10px 0 0 20px; font-size:108%; }
#nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea ol li:first-child { margin-top:0; }
#nengaHowtoWrap #nengaHowtoSection p.nengaCopyright { margin-top:3%; }

/* SHARE */
#nengaHowtoWrap #nengaShareSection                                   { width:auto; margin-top:0; }
#nengaHowtoWrap #nengaShareSection #nengaShareArea ul                { margin-right:0; padding:1%; width:30%; height:auto; }
#nengaHowtoWrap #nengaShareSection #nengaShareArea ul li             { padding:1% 1% 1% 2%; width:25%; }
#nengaHowtoWrap #nengaShareSection #nengaShareArea ul li:first-child { margin-top:4%; padding:1%; width:41%; }

/* Etc */
#nengaEtcWrap       { margin-bottom:5%; }
#nengaEtcWrap p img { width:80%; }

/* 注意事項 */
#nengaAttentionWrap                        { padding:1% 0 3%; }
#nengaAttentionWrap #nengaAttentionArea    { width:95%; }
#nengaAttentionWrap #nengaAttentionArea p  { margin-top:2%; }

}