/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-font-smoothing: antialiased;height: 100%;}
body{margin:0;color: #514444;font-size: 14px;line-height: 1.42857143;font-family: "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", sans-serif;min-width: 320px;background-color: #dbdbdb;}
article,aside,footer,header,nav,section{display:block}
h1{font-size:2em;margin:.67em 0}
figcaption,figure,main{display:block}
figure{margin:1em 40px}
hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:inherit}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
dfn{font-style:italic}
mark{background-color:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
audio,video{display:inline-block}
audio:not([controls]){display:none;height:0}
img{border-style:none;vertical-align: middle;}
svg:not(:root){overflow:hidden}
button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{display:inline-block;vertical-align:baseline}
textarea{overflow:auto}
[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details,menu{display:block}
summary{display:list-item}
canvas{display:inline-block}
template{display:none}
[hidden]{display:none}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
a {color: #514444;text-decoration: none;}

.container {max-width: 340px;margin: 0 auto;padding: 0 10px;}
.wrap {height: 100%;position: relative;z-index: 1;}

.header {background-color: #fbfbfb;padding: 15px 0;overflow: hidden;margin-bottom: 40px;}
.header .container {position: relative;}
.header-logo {float: left;width: 55px;position: relative;z-index: 1;}
.header-logo img {width: auto;height: 50px;}
.header-title {margin-left: 85px;}
.header-title .s1 {display: block;font-size: 12px;letter-spacing: 10px;}
.header-title .s1 b {font-weight: normal;}
.header-title .s1 span {letter-spacing: 2px;}
.header-title .s2 {font-size: 24px;letter-spacing: 5px;float: left;position: relative;z-index: 1;}
.header-title .s2 span {margin-left: 33px;}
.header-title .s3 {float: right;line-height: 34px;letter-spacing: 5px;margin-right: -5px;position: relative;z-index: 1;}
.header-title .s4 {position: absolute;bottom: -35px;left: 50%;color: #e9e9e9;font-size: 45px;width: 340px;text-align: center;z-index: 0;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);font-weight: bold;}
.header-title .s4 span {display: inline-block;}
.header-title .s4 span:last-child {margin-left: 10px;}

.footer {display: none;}

.reg-form {margin-bottom: 30px;}

.title-1 {text-align: center;color: #6d6d6d;margin-bottom: 25px;}
.title-1 h4 {margin: 0;line-height: 1.2;font-size: 30px;font-weight: normal;letter-spacing: 10px;text-indent: 10px;}
.title-1 small {display: block;font-size: 12px;letter-spacing: 2px;text-indent: 2px;margin-top: 10px;text-transform: uppercase;}

.steps {margin-bottom: 20px;}
.steps ul {overflow: hidden;list-style: none;margin: 0;padding: 0;text-align: center;height: 8px;}
.steps ul a {display: none;}
.steps li {display: inline-block;width: 40px;height: 8px;border: 1px solid #787878;background-color: #fff;vertical-align: top;}
.steps li.current,.steps li.done {background-color: #fdb7ae;}
/*modify 0407*/
span.step6{ display:block; text-align:center; margin-top:-10px; margin-bottom:18px; color: #399; font-weight:bold;}

.form-section {display: none;}

.form-title {display: none;}
.form-section h4 {margin: 0 0 20px;position: relative;text-align: center;}
.form-section h4 span {display: block;font-size: 18px;font-weight: normal;color: #645959;letter-spacing: 25px;text-indent: 25px;position: relative;z-index: 1;padding-top: 15px;}
.form-section h4 ~ span { display:inline-block; margin-bottom:10px}
.form-section h4 em {font-size: 48px;color: #f9fbfc;line-height: 1;letter-spacing: 8px;text-indent: 8px;position: absolute;left: 0;width: 100%;bottom: 0;}

.form-list {margin: 0;list-style: none;padding: 0;}
.form-list li {margin-bottom: 20px;}
.form-label {display: block;letter-spacing: 3px;margin-bottom: 5px;}
.form-con {margin-left: 15px;position: relative;}
.form-con .ds {margin: 0 0 5px;font-size: 12px;color: #514444;padding-left: 12px;font-weight: 500;}
.form-con .tips {position: absolute;left: 0;top: 0;line-height: 26px;background-color: #dbdbdb;color: #d23939;z-index: 10;}
.form-con .tips label {display: block;}


.form-input {border: 1px solid transparent;border-bottom-color: #c6cc91;padding: 0 0 5px;line-height: 25px;background-color: transparent;display: block;width: 100%;outline: none;color: #514444;
/*font-size: 14px;color: #39C;*/}


.form-input.error {border-bottom-color: #d23939;}
.form-file {display: block;position: relative;height: 32px;border: 2px solid #aaaaaa;line-height: 28px;overflow: hidden;padding: 0 10px;}
.form-file small {font-size: 14px;float: right;color: #514444;}
.form-file span {color: #7a7a7a;}
.form-file input {position: absolute;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 100;opacity: 0;filter: alpha(opacity=0);}
.form-file.error {border-color: #d23939;}
.form-file.error span {color: #d23939;}
/*modify 0407*/
.form-list-wrap h5{font-size:11px; color:#aaa; letter-spacing:2px;}

.iradio {border: 1px solid #9a9a9a;width: 18px;height: 18px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;display: inline-block;vertical-align: top;margin-right: 10px;}
.iradio.checked:after {width: 12px;height: 12px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;background-color: #fdb7ae;content: '';position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.iradio-label {float: left;line-height: 18px;margin-right: 40px;margin-top: 5px;}

.form-ymd select,.form-ymd label {float: left;}
.form-ymd label {line-height: 26px;margin: 0 12px;}
.form-ymd select {text-align: center;}
.form-ymd .y {width: 70px;}
.form-ymd .m {width: 50px;}
.pic-veri {position: absolute;right: 0;top: 0;}

.actions ul {margin: 0;list-style: none;padding: 0;}

.form-list-border-left {border-left: 2px solid #babd9d;padding-left: 10px;margin-left: 5px;}

.step-4 > div {float: left;width: 50%;padding: 0 5px;margin-top: 10px;}
.step-4 .a {float: left;line-height: 26px;}
.step-4 .b {display: block;margin-left: 66px;}
.step-4 .form-input {text-align: center;font-weight: bold;/*0427font-size: 20px;color: #80a9ba*/;}
.step-4 .iradio-label {margin: 0;float: none;display: block;}

.form-textarea {display: block;width: 100%;border: 1px solid #d8d8d8;padding: 10px;background-color: #fff;outline: none;height: 280px;line-height: 1.8;font-size: 12px;}

.step-6 dl {margin: 0;}
.step-6 dt {float: left;color: #404040;position: relative;width: 90px;font-size: 12px;font-weight: bold;}
.step-6 dt:after {position: absolute;right: 0;top: 50%;height: 1px;width: 43px;content: '';background-color: #979797;}
.step-6 dd {margin-left: 100px;}

.complete-title {width: 55px;height: 55px;border: 1px solid #979797;background-color: #f1f1f1;line-height: 1.6;padding-top: 5px;text-align: center;margin: 50px auto 20px;}
.complete-title-2 {text-align: center;margin-bottom: 45px;}
/*modify 0407*/
.complete-title-2 {margin-bottom: 25px; }

.complete-title-2 h4 {letter-spacing: 20px;text-indent: 20px;margin: 0;font-weight: normal;font-size: 18px;color: #645959;}
.complete-title-2 p {margin: 5px 0 0;padding-top: 10px;color: #514444;border-top: 2px solid #d1d1d1;display: inline-block;letter-spacing: 5px;text-indent: 5px;}
.complete-title-3 {text-align: center;margin-bottom: 20px;font-size: 12px;font-weight: bold;}
.complete-title-3 p {margin: 0;line-height: 2;color: #514444;}
.complete-title-3 p a {border-bottom: 2px solid #dbdbdb;}
.complete-title-3 p span {display: block;}
.complete-img {text-align: center;}

.button-1 {display: block;width: 300px;margin: 0 auto;}
.button-1:before {left: -10px;}
.button-1 > div {text-align: right;background: url(../images/ico2.png) no-repeat 95% center #131313;padding-right: 55px}
.button-1:hover > div {background-image: url(../images/ico2_a.png);}
.button-1.button--nina > div::before {padding-right: 55px}

.button-2 {display: block;width: 135px;float: left;text-align: center;}
.button-2:before {right: -10px;}
/*
.button-2 > div {background: url(../images/ico1.png) no-repeat 10% center #131313;padding-right: 0;}
.button-2:hover > div {background-image: url(../images/ico1_a.png);}
*/
.button-2.button--nina > div {background-color: #fff;color: #111;}
.button-2.button--nina:hover > div {background-color: #111;}
.button-2.button--nina:hover > div > span {color: #fff;}


.button-3 {display: block;width: 210px;margin: 0 auto;    /*0427*/text-align: center;}
.button-3:before {right: -10px;}
.button-3.button--nina > div {background-color: #fff;color: #111;}
.button-3.button--nina:hover > div {background-color: #111;}
.button-3.button--nina:hover > div > span {color: #fff;}

.button-4 {display: block;width: 135px;float: right;}
.button-4:before {left: -10px;}
/*
.button-4 > div {text-align:center;background: url(../images/ico2.png) no-repeat 90% center #131313;padding-right: 0px;padding-left: 0; color:#fff;}
.button-4:hover > div {background-image: url(../images/ico2_a.png);}
.button-4.button--nina > div::before {padding-right: 50px;padding-left: 0;}
*/
.button-2.button--nina > div {background-color: #fff;color: #111;}
.button-2.button--nina:hover > div {background-color: #111;}
.button-2.button--nina:hover > div > span {color: #fff;}

.button-5 {display: block;width: 100%;margin: 0 auto;}
.button-5:before {right: -10px;}

.btn-que-text {display: none;}

.form-con.ml {margin-left: 47px;}

#canvas {position: fixed;left: 0;top: 0;z-index: 1;}

.exp-desc {letter-spacing: 3px;line-height: 1.8;}
.explanation {letter-spacing: 3px;line-height: 1.8;margin-bottom: 20px;}
.explanation h4 {text-align: center;letter-spacing: 15px;text-indent: 15px;font-size: 18px;font-weight: normal;margin: 25px 0 15px;}
.explanation ol {padding-left: 30px;}

.exp-mail span {display: block;}
.exp-mail a {border-bottom: 3px solid #9bfafa;display: inline-block;}

.main {position: relative;}

.visual,.visual2,.visual3,.visual4{position: absolute;}
.visual {top: -15px;left: 50%;margin-left: -367px; }
.visual2 {top: 400px;left: 50%; margin-left: 235px; }
.visual3 {top: -65px;left: 50%; margin-left: -500px; }
.visual4 {top: 600px;left: 50%; margin-left: 300px; }

.visual i,.visual2 i,.visual3 i,.visual4 i{display: block;z-index: 2;position: relative;}
.visual i {background: url(../images/an25.png) no-repeat 0 0;width: 93px;height: 70px;}
.visual2 i{background: url(../images/an26.png) no-repeat 0 0;width: 102px;height: 100px;}
.visual2 i:nth-last-child(1){background: url(../images/an27.png) no-repeat 0 0;width: 73px;height: 56px; margin-left:165px; margin-top:60px;}
.visual3 i{background: url(../images/an28.png) no-repeat 0 0;width: 268px;height: 222px;}
.visual4 i{background: url(../images/an29.png) no-repeat 0 0;width: 140px;height: 241px;}
.visual i,.visual2 i,.visual3 i,.visual4 i{ display:none;}
.visual .line,.visual .text {display: none;}

.visual-btn {position: fixed;right: 10px;z-index: 2;background: url(../images/ico3.png) no-repeat center bottom;-webkit-background-size: 50px 50px;-moz-background-size: 50px;-o-background-size: 50px;background-size: 50px;padding-bottom: 5px;color: #333;font-weight: bold;}
.visual-btn span {display: block;width: 50px;text-align: center;font-size: 12px;letter-spacing: 5px;text-indent: 5px;}
.visual-btn.top {top: 30%;}
.visual-btn.bottom {bottom: 20%;}


.index-box {position: relative;height: 576px;overflow: hidden;}
.index-box .ani {position: relative;height: 340px;z-index: 1; margin-top:-50px;}
.index-box .ani span {position: absolute;background: no-repeat 0 0;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;left: 50%;}

.index-box .ani span.an1 {background-image: url(../images/index_bg2.jpg);width: 537px;height: 490px;top: 165px;margin-left: -269px;z-index: 1;}
.index-box .ani span.an2 {background-image: url(../images/an2-2.png);width: 537px;height: 490px;top: 165px;margin-left: -269px;z-index: 5;}
.index-box .ani span.an3 {background-image: url(../images/an3-2.png);width: 404px;height: 453px;top: 180px;top: 100px;margin-left: -250px;z-index: 6;}
.index-box .ani span.an4 {background-image: url(../images/an4.png);width: 437px;height: 166px;top: 50px;margin-left: -219px;z-index: 10;}
.index-box .ani span.an5 {background-image: url(../images/an5.png);width: 416px;height: 33px;top: 225px;margin-left: -208px;z-index: 10;}
.index-box .ani span.an6 {background-image: url(../images/an6.png);width: 417px;height: 29px;top: 115px;margin-left: -300px;z-index: 10;}
.index-box .ani span.an7 {background-image: url(../images/an7-2.png);width: 251px;height: 150px;top: 350px;margin-left: -150px;z-index: 4;}
.index-box .ani span.an8 {background-image: url(../images/an8.png);width: 147px;height: 102px;top: 235px;margin-left: 135px;z-index: 4;}
.index-box .ani span.an9 {background-image: url(../images/an9.png);width: 168px;height: 214px;top: 441px;margin-left: -50px;z-index: 4;}
.index-box .ani span.an10 {background-image: url(../images/an10.png);width: 101px;height: 108px;top: 547px;margin-left: 200px;z-index: 5;}
.index-box .ani span.an13 {background-image: url(../images/an13.png);width: 93px;height: 70px;top: 125px;margin-left: 235px;z-index: 10;animation: float 6s ease-in-out infinite;}
.index-box .ani span.an14 {background-image: url(../images/an14.png);width: 102px;height: 100px;top: 580px;margin-left: -245px;z-index: 6;animation: float 4s ease-in-out infinite;}
.index-box .ani span.an15 {background-image: url(../images/an15.png);width: 73px;height: 56px;top: 480px;margin-left: -300px;z-index: 6;animation: float 3s ease-in-out infinite;}
.index-box .ani span.an16 {background-image: url(../images/an16.png);width: 136px;height: 142px;top: 435px;margin-left: 100px;z-index: 6;}
.index-box .ani span.an17 {background-image: url(../images/an17.png);width: 48px;height: 44px;top: 595px;margin-left: 40px;z-index: 6;}
.index-box .ani span.an18 {background-image: url(../images/an18.png);width: 42px;height: 47px;top: 645px;margin-left: -20px;z-index: 6;}
.index-box .ani span.an20 {background-image: url(../images/an20.png);width: 140px;height: 57px;top: 325px;margin-left: -205px;z-index: 6;}
.index-box .ani span.an23 {background-image: url(../images/an23.png);width: 171px;height: 161px;top: 315px;margin-left: -335px;z-index: 6;}




.index-box .aniadd span.an1 {background-image: url(../images/index_bg3.jpg);width: 291px;height: 302px;top: 165px;margin-left: -145px;z-index: 1;}
.index-box .aniadd span.an2 {background-image: url(../images/an2-3.png);width: 291px;height: 302px;top: 178px;margin-left: -145px;z-index: 5;}
.index-box .aniadd span.an3 {background-image: url(../images/an3-3.png);width: 322px;height: 387px;top: 220px;top: 155px;margin-left: -150px;z-index: 6;}
.index-box .aniadd span.an4 {background-image: url(../images/an4-3.png);width: 376px;height: 142px;top: 90px;margin-left: -188px;z-index: 7;}
.index-box .aniadd span.an5 {background-image: url(../images/an5-3.png);width: 295px;height: 28px;top: 50px;margin-left: -148px;z-index: 5;}
.index-box .aniadd span.an6 {background-image: url(../images/an7-3.png);width: 190px;height: 85px;top: 300px;margin-left: -120px;z-index: 5;}
.index-box .aniadd span.an7 {background-image: url(../images/an8-3.png);width: 307px;height: 247px;top: 220px;margin-left: -145px;z-index: 4;}
.index-box .aniadd span.an8 {background-image: url(../images/an13-3.png);width: 381px;height: 308px;top: 185px;margin-left: -200px;z-index: 7;}





@keyframes float {
	0% {transform: translatey(0px);	}
	50% {transform: translatey(-20px);}
	100% {transform: translatey(0px);}
}

@keyframes blink {
  47% {opacity: 1}
  48% {opacity: 0}
  49% {opacity: 1}
  50% {opacity: 0}
  51% {opacity: 1}
  52% {opacity: 0}
  53% {opacity: 1}
  62% {opacity: 0}
  62.5% {opacity: 1}
}







.index-box .ani-f {position: absolute;z-index: 0;top: 236px;left: 50%;-webkit-transform: translate(-50%) rotate(180deg);-moz-transform: translate(-50%) rotate(180deg);-ms-transform: translate(-50%) rotate(180deg);-o-transform: translate(-50%) rotate(180deg);transform: translate(-50%) rotate(180deg);width: 100%;
    opacity: 0.4;
    filter: alpha(opacity=40);}


/*
.index-btn .button-5 {margin-left: -5px;}
.index-btn .button-3 {width: 100%;margin-right: -5px;}
*/

/*0428 .index-btn .button-3:before {right: auto;left: -10px; }*/

    .index-btn .button-3,.index-btn .button-5{position:absolute;z-index: 15;margin-bottom: 0;width: 65%; right:0;left:0;}
	.index-btn .button-3 {top: 105px;top: 73px;}
    .index-btn .button-5 {top: 73px;top: 105px;}
	
    .index-btn:hover ~ .ani .an12 {animation: blink 2s ease-in-out infinite; }
    .index-box .ani { display: none;}
    .index-box .ani.aniadd { display: block;}


.layer {width: 100%;height: 100%;}


@media screen and (min-width: 600px) {
    .container {max-width: 520px;}
    .header-title .s2 span {margin-left: 130px;}
    .header-title .s4 {font-size: 60px;width: 100%;}
    .header-title .s4 {-webkit-transform: translate(-45%);-moz-transform: translate(-45%);-ms-transform: translate(-45%);-o-transform: translate(-45%);transform: translate(-45%);bottom: -44px;}
    .header-title .s4 span:last-child {margin-left: 65px;}
    .title-1 h4 {font-size: 36px;}
    .title-1 small {letter-spacing: 6px;text-indent: 6px;}
    .steps li {width: 70px;}
    .form-section h4 em {font-size: 60px;}
    .form-section h4 span {padding: 20px 0 15px;}
	.form-section h4 ~ span { display:inline-block; margin-bottom:10px}
    .form-list:last-of-type {padding-bottom: 20px;}
    .form-list .form-label {float: left;margin: 0;line-height: 26px;}
    .form-con {margin-left: 130px;}

    .button-1 {width: 400px;}
    .button-2,.button-4 {width: 170px;}
    .button-2 {margin-left: 20px;}
    .button-4 {margin-right: 20px;}
	/*0427
    .button-2 > div,.button-2.button--nina > div::before {padding-left: 70px;}
    .button-4 > div,.button-4.button--nina > div::before {padding-right: 70px;}
    */

    .lay3 {float: left;margin: 0 0 0 20px;line-height: 26px;}
    .lay3-l {margin-left: 180px;}
    .lay3-l .form-con {margin-left: 0;}
    .lay3-l .form-con.ml {padding-left: 32px;}

    .form-con.step-4 {margin: 0;}

    .complete-title-3 p span {display: inline;}

    .visual-btn {right: 50%;margin-right: -300px;}

    .explanation {padding: 0 15px;}
    .exp-mail span {display: inline-block;}

    .index-box {height: 815px;}
    .index-box .ani {height: 476px; margin-top:0;}
    .index-box .ani.aniadd { display:none;}
	.index-box .ani { display:block;}
		
/*0427	
    .index-box .ani div {-webkit-transform: scale(1.4);-moz-transform: scale(1.4);-ms-transform: scale(1.4);-o-transform: scale(1.4);transform: scale(1.4);}
	*/
    .index-box .ani-f {top: 330px;}

    .index-btn {max-width: 420px !important;margin-top: -50px; /*0428*/margin-top: 0px; }

    .index-btn .button-3,.index-btn .button-5{width: 240px;}
	.index-btn .button-3 {right: 15px; left:inherit;top: 390px;}
    .index-btn .button-5 {left: 15px;right: inherit;top: 435px;}
}

/*@media screen and (min-width: 820px) {
    .btn-que:hover {width: 400px;position: relative;}
    .btn-que:hover .btn-que-text {display: block;position: absolute;top: 0;left: 15px;color: #8f8e8e;z-index: 2;letter-spacing: 2px;font-size: 12px;font-style: normal;line-height: 30px;}
    .btn-que:hover > div {background-position: 96% center;}
}
*/


@media screen and (min-width: 820px) {
/*0428
    .btn-que:hover {width: 400px;position: relative;margin-top: -45px;}
    .btn-que:hover .btn-que-text {display: block;position: absolute;top: 0;left: 20px;color: #8f8e8e;z-index: 2;letter-spacing: 3px;font-size: 12px;font-style: normal;line-height: 45px;}
    .btn-que:hover > div {background-position: 96% center;}

*/
	.index-btn .button-3 {right: 80px;}
    .index-btn .button-5 {left: 80px;}

}


@media screen and (min-width: 820px) and (min-height: 560px) {
    .container {max-width: 620px;}
    .header {position: fixed;left: 0;top: 0;height: 100%;width: 100px;margin: 0;padding: 35px 0;z-index: 100;}
    .header .container {height: 100%;}
    .header-logo {float: none;margin: 0 auto;}
    .header-title {margin-left: 0;}
    .header-title .s1 {letter-spacing: 0;}
    .header-title .s1 b {position: absolute;left: 0;width: 100%;text-align: center;top: 55px;letter-spacing: 5px;}
    .header-title .s1 span {position: absolute;left: 55px;top: 145px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
    .header-title .s2 {float: none;width: 24px;margin: 80px auto 0;display: block;}
    .header-title .s2 span {margin-left: 0;display: block;margin-top: 120px;}
    .header-title .s3 {float: none;display: block;width: 14px;margin: 20px auto 0;line-height: 2;}
    .header-title .s4 {position: absolute;font-size: 12px;color: #333;display: block;width: 12px;bottom: 0;}
    .header-title .s4 span:last-child {display: block;margin: 30px 0 0 0;}
    .main {margin-left: 100px;padding-top: 80px; /*0428*/padding-top: 0px;}

    .form-section h4 em {letter-spacing: 15px;text-indent: 15px;}

    .reg-form .content {padding: 0 65px;}

    .visual {top: 70px;margin-left: -420px;}
    .visual-btn {margin-right: -400px;}

    .explanation {padding: 0 40px;}
}
@media screen and (min-width: 820px) and (max-height: 800px) {
    .header-title .s4 {display: none;}
    .header-title .s3 {position: absolute;bottom: 0;left: 50%;-webkit-transform: translate(-45%);-moz-transform: translate(-45%);-ms-transform: translate(-45%);-o-transform: translate(-45%);transform: translate(-45%);}
}
@media screen and (min-width: 1020px) {


/*0428*/	
.index-box .ani span.an1 {background-image: url(../images/index_bg.jpg);width: 729px;height: 490px;top: 165px;margin-left: -365px;z-index: 1;}
.index-box .ani span.an2 {background-image: url(../images/an2.png);width: 729px;height: 490px;top: 165px;margin-left: -365px;z-index: 5;}
.index-box .ani span.an3 {background-image: url(../images/an3.png);width: 606px;height: 633px;top: 123px;top: 0px;margin-left: -410px;z-index: 6;}
.index-box .ani span.an4 {background-image: url(../images/an4.png);width: 437px;height: 166px;top: 50px;margin-left: -35px;z-index: 10;}
.index-box .ani span.an5 {background-image: url(../images/an5.png);width: 416px;height: 33px;top: 225px;margin-left: -25px;z-index: 10;}
.index-box .ani span.an6 {background-image: url(../images/an6.png);width: 417px;height: 29px;top: 115px;margin-left: -115px;z-index: 10;}
.index-box .ani span.an7 {background-image: url(../images/an7.png);width: 426px;height: 193px;top: 245px;margin-left: -245px;z-index: 4;}
.index-box .ani span.an8 {background-image: url(../images/an8.png);width: 147px;height: 102px;top: 270px;margin-left: 160px;z-index: 4;}
.index-box .ani span.an9 {background-image: url(../images/an9.png);width: 168px;height: 214px;top: 441px;margin-left: -50px;z-index: 4;}
.index-box .ani span.an10 {background-image: url(../images/an10.png);width: 101px;height: 108px;top: 547px;margin-left: 290px;z-index: 5;}
.index-box .ani span.an11 {background-image: url(../images/an11.png);width: 123px;height: 94px;top: 475px;margin-left: -290px;z-index: 5;}
.index-box .ani span.an12 {background-image: url(../images/an12.png);width: 118px;height: 106px;top: 550px;margin-left: -160px;z-index: 4;}
.index-box .ani span.an13 {background-image: url(../images/an13.png);width: 93px;height: 70px;top: 155px;margin-left: 360px;z-index: 10;animation: float 6s ease-in-out infinite;}
.index-box .ani span.an14 {background-image: url(../images/an14.png);width: 102px;height: 100px;top: 335px;margin-left: -450px;z-index: 6;animation: float 4s ease-in-out infinite;}
.index-box .ani span.an15 {background-image: url(../images/an15.png);width: 73px;height: 56px;top: 450px;margin-left: -510px;z-index: 6;animation: float 3s ease-in-out infinite;}
.index-box .ani span.an16 {background-image: url(../images/an16.png);width: 136px;height: 142px;top: 435px;margin-left: 100px;z-index: 6;}
.index-box .ani span.an17 {background-image: url(../images/an17.png);width: 48px;height: 44px;top: 595px;margin-left: 40px;z-index: 6;}
.index-box .ani span.an18 {background-image: url(../images/an18.png);width: 42px;height: 47px;top: 645px;margin-left: -20px;z-index: 6;}
.index-box .ani span.an19 {background-image: url(../images/an19.png);width: 127px;height: 94px;top: 420px;margin-left: 260px;z-index: 6;}
.index-box .ani span.an20 {background-image: url(../images/an20.png);width: 140px;height: 57px;top: 365px;margin-left: -155px;z-index: 6;}
.index-box .ani span.an21 {background-image: url(../images/an21.png);width: 191px;height: 100px;top: 300px;margin-left: 350px;z-index: 5;}
.index-box .ani span.an22 {background-image: url(../images/an22.png);width: 177px;height: 206px;top:150px;margin-left: -110px;z-index: 6;}
.index-box .ani span.an23 {background-image: url(../images/an23.png);width: 171px;height: 161px;top: 450px;margin-left: -425px;z-index: 6;}
.index-box .ani span.an24 {background-image: url(../images/an24.png);width: 176px;height: 165px;top:100px;margin-left: -500px;z-index: 6;}
	




	
	
    body {overflow-x: hidden;height: 100%;}
	.container {max-width: 770px;}
    .main {padding-bottom: 60px;min-height: 100%;padding-top: 90px;}
	.index-main { padding-top:0}
    .bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../images/bg.png) no-repeat center 47%;z-index: 0;}
    .main .container {position: relative;z-index: 1;max-width: 770px;}
    .steps {margin-top: -4px;}
    .steps li {width: 100px;}



    .reg-form {border: 1px solid #979797;height: 480px;margin-bottom: 70px;}
    .reg-form .content {padding-left: 35px;}
    .form-section h4 {float: left;margin: 30px 0 0;width: 86px;background: no-repeat center center;padding: 4px;}
    .form-section h4.s1 {background-image: url(../images/s1.png);}
    .form-section h4.s2 {background-image: url(../images/s2.png);}
    .form-section h4.s3 {background-image: url(../images/s3.png);}
    .form-section h4.s4 {background-image: url(../images/s4.png);}
    .form-section h4.s5 {background-image: url(../images/s5.png);}
    .form-section h4.s6 {background-image: url(../images/s6.png);}
    .form-section h4 em {display: none;}
    .form-section h4 span {padding: 0;text-indent: 0;line-height: 3;letter-spacing: 35px;width: 110px;}
    .form-list-wrap {margin-left: 160px;padding-top: 30px;height: 435px;}
    .form-list li {margin-bottom: 10px;}
    .form-con .tips {background-color: #f2e0ed;}
    .form-list-btn {margin-left: 30px; margin-top:-25px;}
	.clearfix.form-list-btn{margin-top:0px;}
    .form-list:last-of-type {padding-bottom: 0;}
    .form-list-s2 {margin-bottom: 20px;}
    .lay3 {margin-left: 0;}
    .form-con.step-4 {padding-left: 10px;}
    #reg-form-p-5 .form-list li {margin-bottom: 20px;line-height: 24px;}
    .complete-title-2 h4 {float: none;margin: 0;width: auto;padding: 0;}
    .complete-title {margin-top: 70px;}

    .visual-btn {display: none;}
    .visual {margin-left: -385px;}
    .visual .line, .visual .text {display: block;}
    .visual .line {width: 1px;height: 580px;background-color: #c8c4c7;margin: -10px 0 0 120px;}
    .visual .text {position: absolute;bottom: -40px;right: 30px;background: url(../images/ico3.png) no-repeat center bottom;width: 135px;padding-left: 40px;padding-bottom: 60px;z-index: 5;}
    .visual .text h4 {margin: 0;letter-spacing: 5px;}
    .visual .text p {margin: 10px 0 0;font-size: 12px;color: #acacac;text-transform: uppercase;}

    .exp-desc {padding: 0 60px;}
    .explanation {height: 320px;margin-bottom: 50px;margin-top: 50px;padding: 0 120px;overflow: hidden;}
    .button-5 {width: 240px;margin: 0 auto;}
    .mCSB_outside+.mCSB_scrollTools {right: 0;}
    .index-box {height: 720px;width: 1000px;margin: 0 auto;}
    .index-btn {margin: 0;}
    .main .index-btn {position: static;}
    .index-btn .button-3 {right: 100px;top: 390px;}
    .index-btn .button-5 {left: 100px;top: 435px;}

    .image:hover {-webkit-filter: url("#glitch");filter: url("#glitch");}


	.form-list-wrap h5{ margin-top:-20px;}
	#parallax {display: block;}
	
    /*0427*/
	.visual i,.visual2 i,.visual3 i,.visual4 i{ display: inherit;}




	
	
}
@media screen and (min-width: 1420px) {
    .container {max-width: 1200px;}

    .wrap {position: relative;width: 1200px;margin: 0 auto;}
    .header {left: 50%;width: 10000px;margin-left: -10600px;}
    .header .container {margin-left: 9900px;}
    .header-title .s4 {display: none;}
    .header-title .s3 {position: absolute;bottom: 0;left: 50%;-webkit-transform: translate(-45%);-moz-transform: translate(-45%);-ms-transform: translate(-45%);-o-transform: translate(-45%);transform: translate(-45%);}
    .main {margin: 0;}

    .footer {position: fixed;right: 50%;top: 0;height: 100%;width: 10000px;margin-right: -10600px;z-index: 100;background-color: #fbfbfb;display: block;}
    .footer .container {height: 100%;margin-right: 9900px;position: relative;}
    .footer-table {display: table;width: 24px;height: 100%;}
    .footer-cell {display: table-cell;text-align: center;vertical-align: middle;}
    .footer-cell span {display: block;line-height: 2;margin-left: 10px;}
    .footer-cell .s1 {margin-top: 130px;}
    .footer .s2 {position: absolute;left: -162px;top: 50%;width: auto;white-space:nowrap;-webkit-transform: translate(0,-50%) rotate(90deg);-moz-transform: translate(0,-50%) rotate(90deg);-ms-transform: translate(0,-50%) rotate(90deg);-o-transform: translate(0,-50%) rotate(90deg);transform: translate(0,-50%) rotate(90deg);letter-spacing: 10px;font-size: 12px;color: #7f7e7e;}

    .visual {margin-left: -544px;}
    .visual .text {right: auto;left: 0;}
    .visual .line {margin-left: 30px;}
}