/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ベーススタイル ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------ float -------------------------------*/ /* float */ .fLeft { float:left !important; } .fRight { float:right !important; } /* clearfix */ .cf:before, .cf:after { display:table; content:""; } .cf:after { clear:both; } .cf { zoom:1; } .cb { clear:both; } /*------------------------------ text -------------------------------*/ .txtCenter { text-align:center; } .txtRight { text-align:right; } .txtLeft { text-align:Left; } /*------------------------------ margin -------------------------------*/ .mt0 { margin-top:0px !important; } .mt5 { margin-top:5px !important; } .mt10 { margin-top:10px !important; } .mt15 { margin-top:15px !important; } .mt20 { margin-top:20px !important; } .mt25 { margin-top:25px !important; } .mt30 { margin-top:30px !important; } .mt35 { margin-top:35px !important; } .mt40 { margin-top:40px !important; } .mt45 { margin-top:45px !important; } .mt50 { margin-top:50px !important; } .mr0 { margin-right:0px !important; } .mr5 { margin-right:5px !important; } .mr10 { margin-right:10px !important; } .mr15 { margin-right:15px !important; } .mr20 { margin-right:20px !important; } .mr25 { margin-right:25px !important; } .mr30 { margin-right:30px !important; } .mr35 { margin-right:35px !important; } .mr40 { margin-right:40px !important; } .mr45 { margin-right:45px !important; } .mr50 { margin-right:50px !important; } .mb0 { margin-bottom:0px !important; } .mb5 { margin-bottom:5px !important; } .mb10 { margin-bottom:10px !important; } .mb15 { margin-bottom:15px !important; } .mb20 { margin-bottom:20px !important; } .mb25 { margin-bottom:25px !important; } .mb30 { margin-bottom:30px !important; } .mb35 { margin-bottom:35px !important; } .mb40 { margin-bottom:40px !important; } .mb45 { margin-bottom:45px !important; } .mb50 { margin-bottom:50px !important; } .ml0 { margin-left:0px !important; } .ml5 { margin-left:5px !important; } .ml10 { margin-left:10px !important; } .ml15 { margin-left:15px !important; } .ml20 { margin-left:20px !important; } .ml25 { margin-left:25px !important; } .ml30 { margin-left:30px !important; } .ml35 { margin-left:35px !important; } .ml40 { margin-left:40px !important; } .ml45 { margin-left:45px !important; } .ml50 { margin-left:50px !important; } /*------------------------------ display -------------------------------*/ .displayNone { display:none !important; } .displayBlock { display:block !important; } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- レイアウト ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* 共通 */ #nengaMakerWrap { background-color:#000000; text-align:left; min-width:980px; height:663px; position:relative; } #nengaMakerWrap h1, h2, h3, h4, p, ul { margin:0; padding:0; } #nengaMakerWrap h2 { background:url(../images/common_step_bg_pc.png) left bottom no-repeat; padding:20px 0 30px; text-align:center; } /* ホバーアニメーション */ #nengaMakerWrap a { display:block; transition:all 0.3s cubic-bezier(0.45, 1.92, 0.31, -0.38); } #nengaMakerWrap a:hover { transform:scale(1.1); } #nengaMakerWrap img, #nengaHowtoWrap img { vertical-align:bottom; border:none; } #nengaMakerWrap a { border:none; outline:none; } #nengaMakerWrap .nengaMakerArea { width:980px; margin:0 auto; } #nengaMakerWrap .nengaMakerArea .nengaMakerInner p.previewImg { float:left; } #nengaMakerWrap.base01 .nengaMakerArea .nengaMakerInner p.previewImg { width:229px; height:339px; } #nengaMakerWrap.base02 .nengaMakerArea .nengaMakerInner p.previewImg { width:339px; height:229px; } #nengaMakerWrap.base03 .nengaMakerArea .nengaMakerInner p.previewImg { width:229px; height:339px; } #nengaMakerWrap .nengaMakerArea .nengaMakerInner p.previewImg img { width:100%; } /* ローカルナビ */ #nengaMakerWrap #nengaMakerLocalNaviSection { background:url(../images/common_lnavi_bg.gif) center top repeat-x; display:none; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea { width:950px; margin:0 auto; position:relative; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul { text-align:left; margin:0 0 0 70px; height:66px; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul li { display:inline-block; background:url(../images/common_lnavi_bg_arrow.png) left center no-repeat; margin-left:3px; padding-left:14px; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul li:first-child { background:none; margin-left:0; padding-left:0; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul li a { display:block; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea p { position:absolute; left:0; top:3px; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea p img { height:60px; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul li.compLi a { cursor:default; } #nengaMakerWrap #nengaMakerLocalNaviSection #nengaMakerLocalNaviArea ul li.compLi a:hover { transform:scale(1); } /* ボタンナビ */ #nengaMakerWrap #nengaMakerBtnNaviSection { width:980px; position:absolute; left:50%; bottom:20px; margin-left:-490px; display:none; z-index:9; } #nengaMakerWrap #nengaMakerBtnNaviSection ul li#stepBack { float:left; } #nengaMakerWrap #nengaMakerBtnNaviSection ul li#stepNext { float:right; } /* トップページ */ #nengaMakerWrap #nengaMakerTopSection { background:url(../images/top_mv_bg_pc.gif) center top no-repeat; min-width:980px; } #nengaMakerWrap #nengaMakerTopSection .nengaMakerArea { padding:28px 0 24px; position:relative; } #nengaMakerWrap #nengaMakerTopSection .nengaMakerArea h1 { text-align:center; position:relative; background:none; opacity:0; } #nengaMakerWrap #nengaMakerTopSection .nengaMakerArea p#topMvTxt01 { position:absolute; right:165px; top:88px; opacity:0; } #nengaMakerWrap #nengaMakerTopSection .nengaMakerArea p#topTxt01 { text-align:center; margin-top:17px; opacity:0; } #nengaMakerWrap #nengaMakerTopSection .nengaMakerArea ul { text-align:center; margin-top:10px; } #nengaMakerWrap #nengaMakerTopSection .nengaMakerArea ul li { display:inline-block; margin-left:27px; vertical-align:middle; opacity:0; } #nengaMakerWrap #nengaMakerTopSection .nengaMakerArea ul li:first-child { margin-left:0; } #nengaMakerWrap #nengaMakerTopSection .nengaMakerArea p.nengaCopyright { margin-top:7px; color:#ffffff; font-size:81%; text-align:center; line-height:1.1em; } /* STEP01 */ #nengaMakerWrap #nengaMakerStep01Section { display:none; } #nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner { margin:30px 0 0 80px; } #nengaMakerWrap.base02 #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner { margin-left:0; } #nengaMakerWrap.base02 #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner p { margin-top:65px; } #nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner ul { float:right; width:570px; margin:36px 25px 0 0; } #nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner ul li { display:inline-block; margin:12px 9px; opacity:0; } #nengaMakerWrap #nengaMakerStep01Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn { display:none; } /* STEP02 */ #nengaMakerWrap #nengaMakerStep02Section { display:none; } #nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner { margin:30px 0 0 80px; } #nengaMakerWrap.base02 #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner { margin-left:0; } #nengaMakerWrap.base02 #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner p { margin-top:65px; } #nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner ul { float:right; width:570px; margin:36px 25px 0 0; } #nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner ul li { display:inline-block; margin:12px 9px; } #nengaMakerWrap #nengaMakerStep02Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn { display:none; } /* STEP03 */ #nengaMakerWrap #nengaMakerStep03Section { display:none; } #nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner { margin:0 0 0 80px; } #nengaMakerWrap.base02 #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner { margin-left:0; } #nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner p { margin-top:30px; } #nengaMakerWrap.base02 #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner p { margin-top:95px; } #nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner ul { float:right; width:600px; margin:13px 0 0; } #nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner ul li { display:inline-block; margin:4px 7px; } #nengaMakerWrap #nengaMakerStep03Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn { display:none; } /* STEP04 */ #nengaMakerWrap #nengaMakerStep04Section { display:none; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner { margin:0 0 0 80px; } #nengaMakerWrap.base02 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner { margin-left:0; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner p { margin-top:30px; } #nengaMakerWrap.base02 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner p { margin-top:95px; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box { display:none; position:relative; float:right; width:540px; margin-right:50px; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl { margin:5px 0 0; border-top:1px solid #484848; padding-top:5px; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl.firstList { border-top:none; margin-top:20px; padding-top:0; } #nengaMakerWrap.base02 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl.firstList { margin-top:60px; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl img { vertical-align:middle; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl dt { display:inline-block; margin:4px 5px 4px 22px; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl dt img { width:45px; height:23px; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl dd { display:inline-block; margin:4px 2px; } #nengaMakerWrap.base02 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner #step04Base0102Box { display:block; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner #step04Base03Box { display:block; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl { border-top:none; border-bottom:1px solid #484848; width:440px; margin:10px 0 0 50px; padding-top:0; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner dl.firstList { margin-top:20px; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl dt { float:left; display:block; margin:75px 0 0 10px; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl dt img { width:69px; height:23px; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl dd { float:right; width:340px; margin:4px 10px 10px 5px; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box dl dd ul li { display:inline-block; margin:4px 2px; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box .step04Unit { display:none; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box ul#step04Base03BtnNaviList li { position:absolute; top:155px; display:block; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box ul#step04Base03BtnNaviList li#naviBack { left:0; display:none; } #nengaMakerWrap.base03 #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner .step04Box ul#step04Base03BtnNaviList li#naviNext { right:0; } #nengaMakerWrap #nengaMakerStep04Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn { display:none; } /* STEP05 */ #nengaMakerWrap #nengaMakerStep05Section { display:none; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner { margin:30px 0 0 80px; } #nengaMakerWrap.base02 #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner { margin-left:0; } #nengaMakerWrap.base02 #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner p { margin-top:65px; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox { float:right; width:545px; margin:0 15px 0 0; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl { margin:0; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dt { margin-top:20px; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dt:first-child { margin-top:0; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd { margin:15px 0 0; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dt:first-child + dd { margin-top:15px; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input { margin:0; font-size:124%; width:520px; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd ul { width:570px; margin:5px 0 0; padding:0; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd ul li { display:inline-block; margin:0 15px 0 0; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input#chkNoChara { position:absolute; top:0; opacity:0; width:180px; height:100%; cursor:pointer; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input#chkNoChara + label { display:inline-block; padding:24px 0 0 24px; background:url(../images/common_check_off.png) left center no-repeat; background-size:24px; cursor:pointer; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input#chkNoChara:checked + label { background-image:url(../images/common_check_on.png); } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner .nengaMakerRightBox dl dd input#chkNoChara + label + img { vertical-align:top; margin:1px 0 0 7px; cursor:pointer; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn { display:none; } #nengaMakerWrap #nengaMakerStep05Section .nengaMakerArea .nengaMakerInner p.smpMenuBtn span { display:block; } /* 完成ページ */ #nengaMakerWrap #nengaMakerCompSection { display:none; background:url(../images/comp_bg_pc.gif) center top no-repeat; min-width:980px; height:596px; overflow:hidden; } #nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner { padding:20px 0 0; position:relative; } #nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner p#compImg { width:320px; height:474px; position:absolute; left:105px; top:60px; z-index:11; } #nengaMakerWrap.base02 #nengaMakerCompSection .nengaMakerArea .nengaMakerInner p#compImg { width:474px; height:320px; left:0; top:140px; } #nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox { float:left; width:445px; margin:0 0 0 25px; } #nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox p#compTxt01 { position:absolute; right:70px; top:18px; z-index:10; } #nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox p#compTxt02 { position:absolute; right:-45px; top:127px; z-index:8; } #nengaMakerWrap #nengaMakerCompSection .nengaMakerArea .nengaMakerInner .nengaMakerRightBox p#compBtn { position:absolute; right:83px; top:527px; z-index:10; } /* 使い方 */ #nengaHowtoWrap { background:#ffffff; padding:10px 0 0 0; min-width:980px; } #nengaHowtoWrap #nengaHowtoSection { width:970px; margin:20px auto 30px; text-align:left; } #nengaHowtoWrap #nengaHowtoSection h2 { font-size:131%; font-weight:bold; color:#f40000; line-height:1.5em; text-align:center; } #nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea { margin-top:20px; padding:20px; border:2px solid #e0e0e0; } #nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea h3 { margin:0 0 0 10px; font-size:131%; font-weight:bold; color:#333333; } #nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea h3 span { padding:0 0 0 25px; background:url(../images/common_icon_question.png) 0 50% no-repeat; } #nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea p { margin:10px 0 0 10px; line-height:1.5em; color:#333333; font-size:108%; } #nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea p#introTxt { font-size:115%; margin-top:15px; } #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%; color:#333333; } #nengaHowtoWrap #nengaHowtoSection #nengaHowtoArea ol li:first-child { margin-top:0; } #nengaHowtoWrap #nengaHowtoSection p.nengaCopyright { margin-top:15px; font-size:81%; text-align:center; line-height:1.1em; } /* SHARE */ #nengaHowtoWrap #nengaShareSection { width:975px; margin:0 auto; text-align:center; margin-top:10px; } #nengaHowtoWrap #nengaShareSection #nengaShareArea ul { float:right; height:30px; list-style:none; margin:0; padding:0; border:1px solid #999999; } #nengaHowtoWrap #nengaShareSection #nengaShareArea ul li { display:block; float:left; padding:3px; } #nengaHowtoWrap #nengaShareSection #nengaShareArea ul li:first-child { padding:3px 3px 0; } /* Etc */ #nengaEtcWrap { margin-bottom:30px; } #nengaEtcWrap p { text-align:center; } /* 注意事項 */ #nengaAttentionWrap { /* background:url(../images/common_bg_gr.jpg) center bottom repeat-x; */ padding:10px 0 20px; } #nengaAttentionWrap #nengaAttentionArea { width:950px; margin:0 auto; text-align:left; } #nengaAttentionWrap #nengaAttentionArea h3 { font-size:16px; font-weight:bold; color:#cc0000; } #nengaAttentionWrap #nengaAttentionArea p { margin-top:10px; font-size:14px; line-height:150%; text-align:left; } /* ダイアログ */ #dialogWrap { display:none; }