*{margin:0;padding:0;box-sizing:border-box;}
html{margin:0;padding:0;height:100%;}
body {margin:0;padding:0;height:100%;font-size:14px;background:#000;color:#666;font-family:Helvetica,Arial,Roboto, “Droid Sans”,“ヒラギノ角ゴ ProN W3″,“Hiragino Kaku Gothic ProN”,sans-serif;-webkit-text-size-adjust:100%;}
header, footer, aside, nav, section,article,time,figure,label{display: block;}
h1,h2,h3,h4,h5{font-weight:normal;}
ul,ol{list-style:none;}
a,button,input[type="submit"]{outline:none;text-decoration:none;transition:0.5s;cursor:pointer;-webkit-tap-highlight-color: rgba(0,0,0,0.1);}
a img{border:0;}
fieldset{border:0;}
input,select,textarea{appearance:none;border-radius:0;outline:none;}
.clear{margin:0;padding:0;height:0;clear:both;}

.wrap{width:100%;height:100%;position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;animation:fade_in 0.5s ease 0s forwards;}

/*Contents
--------------------------------------------------------------------------------------------------------------*/
.pane{width:100%;height:100%;background-size:cover;background-position:center;position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;}
.pane .inner{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;}
.main_section:before,.pane .main_section:after{content:"";width:100%;height:100px;position:absolute;z-index:-1;background-size:auto 100%;/*background-repeat:repeat-y;*/}
.main_section:before{background-position:center top;top:50px;}
.main_section:after{background-position:center;bottom:80px;}

.main_section{margin:0 auto;padding:150px 0 190px 0;max-width:400px;position:relative;}
.main_section .heading{padding:0 0 10px 0;}
.main_section .heading h2{height:80px;overflow:hidden;background-image:url(../images/parts.png);background-repeat:no-repeat;background-size:400px 820px;}
.main_section .heading h2 span{padding:80px 0 0 0;display:block;}
.main_section section{margin:0;padding:0 10px;}
.main_section .sub_heading{padding:0 0 10px 0;}
.main_section .sub_heading h2{height:60px;overflow:hidden;background-image:url(../images/parts.png);background-repeat:no-repeat;background-size:400px 820px;}
.main_section .sub_heading h2 span{padding:60px 0 0 0;display:block;}
.main_section .top_txt{margin:0 0 10px 0;padding:10px;font-size:16px;line-height:24px;background:#fff;}
.main_section article{margin:0 0 10px 0;padding:0 20px 30px 20px;background:radial-gradient(ellipse at center, rgba(242,236,230,0) 0%,rgba(242,236,230,0) 50%,rgba(242,236,230,1) 100%) #fff;border:2px solid #e5ded3;}
.main_section article header{text-align:left;}
.main_section article header h3{padding:20px 20px 20px 70px;line-height:20px;font-size:18px;}
.main_section article p{font-size:16px;line-height:30px;background:url(../images/bg_txt.png);background-size:5px 30px;}
.main_section nav{transition:0.5s;}
.main_section nav:hover{opacity:0.6;}
.main_section nav:hover a{box-shadow:0 0 2px rgba(0,0,0,0.2);}
.main_section .nav_btn{padding:0 0 10px 0;}
.main_section .nav_btn a{height:60px;background-image:url(../images/parts.png);background-repeat:no-repeat;display:block;overflow:hidden;box-shadow:2px 2px 2px rgba(0,0,0,0.2);background-size:400px 820px;}
.main_section .nav_btn a span{padding:60px 0 0 0;display:block;}

.regbtn{clear:both;position:absolute;bottom:0;left:0;right:0;text-align:center;}
@media screen and (min-width:500px) {
.regbtn{padding:10px;}
}
@media screen and (max-width:499px) {
.regbtn{padding:10px 80px 10px 10px;}
}
.regbtn a{margin:0 auto;width:100%;max-width:380px;height:60px;display:block;background-repeat:no-repeat;background-position:center;overflow:hidden;box-shadow:2px 2px 2px rgba(0,0,0,0.2);}
.regbtn a:before{content:"";margin:auto;width:60px;height:60px;display:block;position:absolute;bottom:10px;right:10px;animation:down_arrow 1s ease 0s infinite;}
.regbtn a span{padding:120px 0 0 0;display:block;background-size:8px 60px,8px 60px;background-repeat:no-repeat,no-repeat;background-position:left top,right top;}

.move_l{animation:move_l 0.5s ease 0s forwards;}
.show_l{animation:show_l 0.5s ease 0s forwards;}
.move_r{animation:move_r 0.5s ease 0s forwards;}
.show_r{animation:show_r 0.5s ease 0s forwards;}
.slide_up{animation:slide_up 0.5s ease 0s forwards;}

@keyframes move_l{
0% {transform:translateY(0);opacity:1;}
100%{transform:translateY(-100%);opacity:1;}
}
@keyframes show_l{
0% {transform:translateY(100%);opacity:1;}
100%{transform:translateY(0);opacity:1;}
}

@keyframes move_r{
0% {transform:translateY(0);opacity:1;}
100%{transform:translateY(100%);opacity:1;}
}
@keyframes show_r{
0% {transform:translateY(-100%);opacity:1;}
100%{transform:translateY(0);opacity:1;}
}

@keyframes slide_up{
0% {transform:translateX(0);opacity:1;}
100%{transform:translateX(-500px);opacity:0;}
}
@keyframes show_up{
0% {transform:translateX(500px);opacity:0;}
100%{transform:translateX(0);opacity:1;}
}

@keyframes fade_in{
0% {opacity:0;translateY(0);}
100%{opacity:1;translateY(0);}
}
@keyframes left_arrow{
0% {transform:scale(1.2) rotate(-90deg);opacity:0;}
50%{transform:translateY(0) rotate(-90deg);opacity:1;}
100%{transform:translateY(-30px) rotate(-90deg);opacity:0;}
}
@keyframes right_arrow{
0% {transform:scale(1.2) rotate(90deg);opacity:0;}
50%{transform:translateY(0) rotate(90deg);opacity:1;}
100%{transform:translateY(30px) rotate(90deg);opacity:0;}
}
@keyframes down_arrow{
0% {transform:translateX(-30px);opacity:0;}
50%{transform:translateX(0);opacity:1;}
100%{transform:translateX(30px);opacity:0;}
}

.logo{width:100%;text-align:center;z-index:10;}
.logo h1{height:50px;overflow:hidden;background:url(../images/bg_logo.jpg) no-repeat center;background-size:cover;box-shadow:0 0 8px rgba(0,0,0,0.5);}
.logo h1 a,.logo h1 span{padding:50px 0 0 0;display:block;background-repeat:no-repeat;background-position:center;background-size:320px auto;height:50px;}
.logo h1 .logo-3ban{background-image:url(../images/logo-3ban.png);}
.logo h1 .logo-4ban{background-image:url(../images/logo-4ban.png);}
.logo h1 .logo-5ban{background-image:url(../images/logo-5ban.png);}
.logo h1 .logo-6ban{background-image:url(../images/logo-6ban.png);}
.logo h1 .logo-7ban{background-image:url(../images/logo-7ban.png);}
.logo h1 .logo-8ban{background-image:url(../images/logo-8ban.png);}

.general{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;position:absolute;left:0;top:0;bottom:0;right:0;z-index:-1;}
.general .logo{position:fixed;top:0;}
.general .inner{margin:0 auto;padding:50px 0 0 0;max-width:400px;}
.general .inner article{padding:0 10px 10px 10px;background:radial-gradient(ellipse at center, rgba(242,236,230,0) 0%,rgba(242,236,230,0) 50%,rgba(242,236,230,1) 100%) #fff;border:2px solid #e5ded3;box-shadow:2px 2px 2px rgba(0,0,0,0.2);}
.general .inner article .heading{padding:0 0 20px 0;text-align:center;}
.general .inner article .heading h2{height:60px;box-shadow:0 8px 0 #333;background-image:url(../images/parts.png);overflow:hidden;background-size:400px 820px;}
.general .inner article .heading h2 span{padding:60px 0 0 0;display:block;}
.general .inner article .heading .terms_head{background-position:center -640px;}
.general .inner article .heading .faq_head{background-position:center -700px;}
.general .inner article .heading .entry_head{background-position:center -760px;}
.general .inner article h3{padding:10px;font-size:16px;line-height:20px;background:#f3e8e8;color:#333;}
.general .inner article p{padding:10px;font-size:14px;line-height:24px;}


/*Top
--------------------------------------------------------------------------------------------------------------*/
.top{background:#000;z-index:3;}
.top .logo{margin:auto;height:100px;position:absolute;left:0;top:0;right:0;bottom:0;}
.top nav{height:100%;position:absolute;left:0;top:0;right:0;bottom:0;}
.top nav p{margin:auto;width:100%;height:100px;overflow:hidden;background:url(../images/top_txt.png) no-repeat bottom;background-size:320px 50px;position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;}
.top nav p span{padding:100px 0 0 0;display:block;}
.top nav li{width:100%;height:50%;position:absolute;overflow:hidden;background-size:cover;}
.top nav li a{margin:0 auto;width:140px;display:block;position:absolute;overflow:hidden;background-image:url(../images/top_btn.png);background-repeat:no-repeat;background-size:280px 120px;}
.top nav li:nth-of-type(1){top:0;background-image:url(../images/bg_top_s.jpg);background-position:top;}
.top nav li:nth-of-type(1) a{top:0;left:10px;right:10px;bottom:60px;}
.top nav li:nth-of-type(2){bottom:0;background-image:url(../images/bg_top_h.jpg);background-position:top;}
.top nav li:nth-of-type(2) a{top:60px;left:10px;right:10px;bottom:0;}
.top nav li a span{padding:0 0 0 100%;display:block;}
.top nav li a:before{content:"";margin:0 auto;width:120px;height:120px;display:block;position:absolute;bottom:0;-webkit-backface-visibility:hidden}
.top nav li .left:before{top:0;left:0;right:0;animation:left_arrow 1s ease 0s infinite;background:url(../images/icon_arrow_rs.png) no-repeat 0 0;background-size:120px;}
.top nav li .right:before{left:0;right:0;borrom:0;animation:right_arrow 1s ease 0s infinite;background:url(../images/icon_arrow_rh.png) no-repeat 0 0;background-size:120px;}

@media screen and (min-width:376px) {
.top nav li .left{background-position:left;}
.top nav li .right{background-position:right;}
}
@media screen and (max-width:375px) {
.top nav li .left{background-position:left bottom;}
.top nav li .right{background-position:right top;}
}


/*page1
--------------------------------------------------------------------------------------------------------------*/
.page1{background:url(../images/bg_soft.jpg) no-repeat center top;background-size:cover;z-index:2;transform:translateX(100%);opacity:0;}
.page1 .logo{position:fixed;top:0;}
.page1 .main_section:before{background-image:url(../images/bg_soft_t.jpg);}
.page1 .main_section:after{background-image:url(../images/bg_soft_b.jpg);}
.page1 .main_section .heading h2{background-position:center -80px;}
.page1 .main_section article header{color:#cd679c;background:url(../images/icon_voice_soft.png) no-repeat left;background-size:60px;}
.page1 .main_section section:nth-of-type(1) .sub_heading h2{background-position:center -280px;}
.page1 .main_section section:nth-of-type(2) .sub_heading h2{background-position:center -340px;}
.page1 .main_section section:nth-of-type(1) .nav_btn a{background-position:center -520px;}
.page1 .main_section section:nth-of-type(2) .nav_btn a{background-position:center -580px;}
.page1 .main_section .top_txt{border:2px solid #e7a5c7;}

.page1 .regbtn{background:#fff;}
.page1 .regbtn a{background-image:url(../images/btn_regbtn_soft.png);background-size:300px 60px;}
.page1 .regbtn a:before{content:"";background:url(../images/icon_arrow_rs.png) no-repeat center;background-size:60px;}
.page1 .regbtn a span{background-image:url(../images/btn_regbtn_border_s.png),url(../images/btn_regbtn_border_s.png);}

.page1 .back:before { content: ""; width: 50px; height: 50px; background: url(../images/icon_arrow_rh.png) no-repeat 0 0; transform: rotate(90deg); position: absolute; right: 5px; top: 5px; background-size: 40px;}
/*page2
--------------------------------------------------------------------------------------------------------------*/
.page2{background:url(../images/bg_hard.jpg) no-repeat center top;background-size:cover;z-index:1;transform:translateX(-100%);opacity:0;}
.page2 .logo{position:fixed;top:0;}
.page2 .main_section:before{background-image:url(../images/bg_hard_t.jpg);}
.page2 .main_section:after{background-image:url(../images/bg_hard_b.jpg);}
.page2 .main_section .heading h2{background-position:center 0;}
.page2 .main_section article header{color:#918757;background:url(../images/icon_voice_hard.png) no-repeat left;background-size:60px;}
.page2 .main_section section:nth-of-type(1) .sub_heading h2{background-position:center -160px;}
.page2 .main_section section:nth-of-type(2) .sub_heading h2{background-position:center -220px;}
.page2 .main_section section:nth-of-type(1) .nav_btn a{background-position:center -400px;}
.page2 .main_section section:nth-of-type(2) .nav_btn a{background-position:center -460px;}
.page2 .main_section .top_txt{border:2px solid #918757;}

.page2  .regbtn{background:#000;}
.page2 .regbtn a{background-image:url(../images/btn_regbtn_hard.png);background-size:300px 60px;}
.page2 .regbtn a:before{content:"";background:url(../images/icon_arrow_rh.png) no-repeat center;background-size:60px;}
.page2 .regbtn a span{background-image:url(../images/btn_regbtn_border_h.png),url(../images/btn_regbtn_border_h.png);}

.page2 .back:before { content: ""; width: 50px; height: 50px; background: url(../images/icon_arrow_rs.png) no-repeat 0 0; transform: rotate(-90deg); position: absolute; right: -5px; top: -5px; background-size: 40px;}
/*Form
--------------------------------------------------------------------------------------------------------------*/
.entry-soft{background:url(../images/bg_soft.jpg) center top;background-size:cover;}
.entry-hard{background:url(../images/bg_hard.jpg) center top;background-size:cover;}
.entry-soft .logo,.entry-hard .logo{position:fixed;top:0;}
.form{margin:0 auto;padding:50px 0 10px 0;width:100%;max-width:600px;overflow:hidden;}
.form .inner{margin:10px 10px 0 10px;padding:0;background:#fff;animation:show_up 0.5s ease 0s forwards;}
.form .heading{padding:0 10px;}
.form .entry_head{height:60px;background:url(../images/parts.png) no-repeat center bottom;background-size:400px 820px;overflow:hidden;box-shadow:0 -8px 0 #333 inset;}
.form .entry_head span{padding:60px 0 0 0;display:block;}
.form fieldset{padding:10px 10px 0 10px;position:relative;}
.form fieldset label{width:120px;height:40px;line-height:40px;font-size:12px;text-align:center;position:absolute;top:15px;left:10px;background:#f3e8e8;color:#333;}
.form fieldset p{padding:5px 0 0 120px;}
.form .error{margin:5px 0 0 0;padding:5px;text-align:center;background:#ffe5e5;color:#f33;}
.form input[type="text"],.form input[type="password"],.form textarea,.form select
{padding:10px;width:100%;font-size:14px;line-height:18px;color:#666;border:1px solid #f3e8e8;-webkit-appearance:none;border-radius:0;}
.form textarea{height:120px;}
.form select{background:url(../images/icon_select.png) no-repeat right #fff;background-size:40px 40px;}
.form p span{padding:10px 5px;line-height:20px;float:left;}
.form p.alert span{float:none;}
.form section{padding:10px;}
.regular-radio{display:none;}
.form fieldset p .regular-radio + label{margin:2px;padding:10px;width:36px;height:36px;line-height:0;border-radius:50%;-webkit-appearance:none;background-color:#fafafa;border:1px solid #ddd;display:inline-block;position:relative;float:left;top:0;left:0;}
.regular-radio:checked + label:after{content:' ';width:20px;height:20px;border-radius:50%;position:absolute;top:7px;left:7px;background:#99a1a7;}
.entery_btn{padding:10px 0;}
.entery_btn button{margin:0 auto;padding:0;width:280px;height:60px;line-height:60px;display:block;border:0;font-size:18px;box-shadow:4px 4px 4px rgba(0,0,0,0.25);background:#4c0026;color:#fff;}
.form .msg,.alert{padding:10px;text-wrap:suppress;}


.form p a{color:#9c3939;}
.form input[type="text"].qtr{width:50%;float:left;}
.entery_btn p{padding:0 10px 10px 10px;}

.juyo { background:rgba(255,0,0,0.1); border:1px dotted #f00 !important; padding:8px !important; box-sizing:border-box;}
.form .msg span,.form .juyo span{float:none; padding:0;}
.form .juyo{margin:10px 10px 0;}

.general article{margin:10px;padding:10px;background:#fff;}
.general article h3{padding:10px;line-height:30px;font-size:16px;background:#4c0026;color:#fff;}
.general article p{padding:10px;}

#popup{padding:10px;background:#333;}
#popup article{padding:0 10px;background:#fff;}
#popup article h3{padding:10px;background:#f3e8e8;color:#333;line-height:20px;}
#popup article p{padding:10px;line-height:18px;} 
#popup .heading{padding:0 10px 20px 10px;text-align:center;background:#fff;}
#popup .heading h1{height:60px;box-shadow:0 8px 0 #333;background-image:url(../images/parts.png);overflow:hidden;background-size:400px 820px;}
#popup .heading .terms_head{background-position:center -640px;}
#popup .heading h1 span{padding:60px 0 0 0;display:block;}

/*Footer
--------------------------------------------------------------------------------------------------------------*/
#footer{padding:20px;clear:both;text-align:center;}
#footer small{line-height:30px;font-size:16px;color:#999;}

/* campaign */
#campaign h2 {padding:10px 0; font-weight:bold;}
#campaign h4 {border:0; font-size:14px; color:#990033; text-indent:0; padding:10px 0 10px 10px;}
#campaign h5 {font-weight:normal; font-size:12px; color:#990033; padding:10px 0 10px 10px;}
#campaign p{padding:0 10px 0 10px;}
.cam_msg {font-size:11px; color:#aaa; padding:0;}
#campaign strong {font-weight:bold; color:#f00;}
.camMenu { margin-bottom:10px;padding-left:10px;}
.camMenu dt { font-weight:bold; font-size:16px; margin:5px 0;}
.camMenu dt:before{content:"▼"; color:#714769;}
.camMenu dd {margin-bottom:10px;}
.camMenu table {border-collapse:collapse; width:270px; color:#000;}
.camMenu table th{text-align:center; background:#ccc; width:90px; border:1px solid #aaa;}
.camMenu table td{text-align:right; width:90px; background:#fff; border:1px solid #aaa; padding-right:10px; box-sizing:border-box;}
.camMenu table tr td:last-child{background:#ff0;}

#campaign_btn,#campaign_btn_entry {position:fixed; top:20px; right:0; z-index:11;}
#campaign_btn a,#campaign_btn_entry a {width:70px; height:70px; display:block; background:url(../images/cam_btn.png) no-repeat 0 0; text-indent:120%; overflow:hidden; white-space:nowrap; background-size:contain;}