h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th,p,a,li,td,b,div{font:400 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial";color:#333;}
html{font:400 100% "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial"; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: none; line-height:1.2; color:#333; font-size:10px;}
body{overflow-x:hidden; background-color:#fff;}

.wrap p{line-height:1.8; font-size:14px;}
.wrap a{text-decoration:none;}
.only_pc{ display:block;}
.only_mo{ display:none;}

/*common button*/
a.dlbtn{ width:169px; height:42px; display:inline-block; line-height:42px; text-align:center; background-color:#06c668; color:#ffffff; font-size:16px; border-radius:5px; margin-top:17px; transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s; -moz-transition:all ease-in-out 0.3s; -o-transition:all ease-in-out 0.3s; -ms-transition:all ease-in-out 0.3s;}
a.morebtn{ width:167px; height:40px; display:inline-block; border:1px solid #0c7bed; line-height:40px; text-align:center; color:#0c7bed; font-size:16px; border-radius:5px; margin-top:17px; transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s; -moz-transition:all ease-in-out 0.3s; -o-transition:all ease-in-out 0.3s; -ms-transition:all ease-in-out 0.3s;}
a.dlbtn:hover{ background-color:#0aac5c; transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s; -moz-transition:all ease-in-out 0.3s; -o-transition:all ease-in-out 0.3s; -ms-transition:all ease-in-out 0.3s;}
a.morebtn:hover{ background-color:#0c7bed; color:#fff; transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s; -moz-transition:all ease-in-out 0.3s; -o-transition:all ease-in-out 0.3s; -ms-transition:all ease-in-out 0.3s; }
.proidx_banbtn{ margin-top:5px;}
.proidx_banbtn .morebtn{ margin-left:8px;}


/*banner*/
.proidx_banner{width:100%; height:280px;}
.proidx_ban{ width:100%; height:280px; background:#ecf6f7 url(../jpg/proidx_ban1.jpg) top center no-repeat; overflow:hidden; background-size:cover; position:absolute; z-index:-1;}
.proidx_ban.show{ animation:showed ease-in-out 0.4s forwards; -webkit-animation:showed ease-in-out 0.4s forwards; -moz-animation:showed ease-in-out 0.4s forwards; -o-animation:showed ease-in-out 0.4s forwards; -ms-animation:showed ease-in-out 0.4s forwards;}

@keyframes showed{
0%{ opacity:0;}
40%{ opacity:0.5; transform:scale(0.93); left:0; right:0; top:0; bottom:0; margin:auto; z-index:1;}	
50%{ opacity:0.5; transform:scale(0.93); z-index:1;}	
100%{ opacity:1; transform:scale(1); z-index:1;}	
}

.proidx_banct{ transform:translateX(60px); opacity:0.5;}
.proidx_ban.show .proidx_banct{ transform:translateX(0); opacity:1; transition:all ease-in-out 0.5s 0.3s; -webkit-transition:all ease-in-out 0.5s 0.3s; -moz-transition:all ease-in-out 0.5s 0.3s; -o-transition:all ease-in-out 0.5s 0.3s; -ms-transition:all ease-in-out 0.5s 0.3s;}
.proidx_banct>img{ margin:0 100px 0 115px;}
.proidx_ban2 .proidx_banct>img{ margin:0 30px 0 30px;}
.proidx_bantext{ max-width:520px;}
.proidx_bantit{ font-size:28px; margin-top:15px;}
/*.proidx_bantit span{ position:absolute; z-index:3;}*/
.proidx_bantext b{display: inline-block; margin-left: 5px; font-size: 12px; line-height: 1; padding: 3px 6px; vertical-align: middle; color: #fff; background-color: #fd5869; position: relative;}
.proidx_bantext em{ font-weight: bold; color: inherit; font-size: 14px; z-index: 2; position: relative;}
.proidx_bantext p{ max-width:500px; line-height:1.4; margin-top:25px; font-size:16px;}
.proidx_bantit sup{ font-size:20px;}
.proidx_bantit span{ position: relative;}
.proidx_bantit span:after{ width:100%; height:3px; background:#91de75; content:""; /*display:inline-block;*/ position:absolute; bottom:-4px; left:0; z-index:2;}
.proidx_ashampoo .proidx_bantit span:after{background:#1bd1ff;}
/*.proidx_bantit span:after{ width:385px; bottom:1px; background:#1bd1ff;}*/

.proidx_bantit img{ margin-left:265px;}

.proidx_ban2 .proidx_bantit img{ margin-left:405px;}
.proidx_ban2 .proidx_bantext p{max-width:436px;}
.proidx_cicr{ position:absolute; bottom:auto; top:245px; text-align:center; left:0; right:0; margin:auto; z-index:5;}
.proidx_cicr>a{ min-width:80px; height:5px; line-height:5px; background:#dddddd; display:inline-block; vertical-align:middle; margin:4px; text-align:center;}
.proidx_cicr>a:before{ width:0; height:5px; content:""; display:block; position:relative; background:linear-gradient(to right,#9cd4ff,#0c7bed); left:0; top:0; z-index:1;}
.proidx_cicr>a.checked:before{ animation:cicr ease-in-out 10s forwards; -webkit-animation:cicr ease-in-out 10s forwards; -moz-animation:cicr ease-in-out 10s forwards; -o-animation:cicr ease-in-out 10s forwards; -ms-animation:cicr ease-in-out 10s forwards;}
@keyframes cicr{
0%{ width:0;}	
100%{ width:100%;}	
}

.proidx_prot{ margin-bottom: 50px;}
.proidx_prot_nav a{ width:170px; display:inline-block; margin:20px 10px; font-size:16px; color:#666666; position:relative; line-height:1.5; vertical-align:top;}
.proidx_prot_nav a:before{ position:relative; display:block; width:55px; height:55px; background-size:cover; background-position:0 -55px; content:""; margin:0 auto 10px;}
.prot_nav1:before{background:url(../stocon_head1.html) top center no-repeat;}
.prot_nav2:before{background:url(../stocon_head2.html) top center no-repeat;}
.prot_nav3:before{background:url(../stocon_head8.html) top center no-repeat;}
.prot_nav4:before{background:url(../stocon_head7.html) top center no-repeat;}
.prot_nav5:before{background:url(../stocon_head9.html) top center no-repeat;}
.proidx_prot_nav a.checked{ color:#0c7bed;}
.proidx_prot_nav a.checked:before{background-position:0 0;}
.prot_cnt{ display:none;}
.prot_cnt.show{ display:block;}
.prot_cnt_box{ height:174px; border:1px solid #f6f6f6;}
.prot_cnt_img{ width:240px; height:100%;}
.prot_cnt_img>img{ width:110px; display:block; margin:15px auto; text-align:center;}
.prot_cnt_img1{ background-color:#e3e9ee;}
.prot_cnt_img2{ background-color:#efeae7;}
.prot_cnt_img3{ background-color:#e5eeeb;}
.prot_cnt_text{ width:510px; margin:25px 0 0 22px;}
.prot_cnt_text em{ font-size:inherit; color:inherit; margin:0 5px; position:relative;}
.prot_cnt_text em:before{ font-family:"pricon"; position:relative; vertical-align:middle; display:inline-block; margin:-3px 8px 0 0; }
.prot_cnt_text h4{ font-size:22px; font-weight:bold;}
.prot_cnt_text h4 sup{ font-size:14px;}
.prot_cnt_text h4.pner em{ color:#ffffff; padding:3px 10px; background:#a3a3a3; border-radius:5px; vertical-align:middle; font-weight:normal; letter-spacing:0.5px; margin:-2px 0 0 7px; font-size:14px;}
.prot_cnt_text p{ font-size:14px; margin-top:12px; line-height:1.6;}
.prot_cnt_text span{ font-size:14px; color:#999999; margin-top:10px; line-height:1.6; display:inline-block;}
.winicon:before{content:"\eac2"; margin:-5px 8px 0 0}
.macicon:before{content:"\eabf";}
.webicon:before{content:"\e907";}
.prot_cnt_btn{ width:170px; margin:20px 22px 0 0;}

/*mail*/
.ios_pop_bg{background:rgba(0,0,0,0.2); width:100%; height:100%; position:fixed; top:0; left:0; display:none; z-index:998;}
.ios_pop{width:82%; max-height:430px; position:fixed; top:0; left:0; right:0; bottom:0; margin:auto; background:#fff; background-size:100%; display:none; z-index:999; overflow-y:scroll;}
.ios_pop>p .ios_close{ position:absolute; top:0; right:21px; max-width:36px; width:8%; opacity:0.5; margin-top:20px; display:block;}
.ios_pop>p{width:85%; margin:30px auto 0; text-align:center;}
.ios_pop>div{width:90%;}
.send_contain{margin:0 auto;}
.send_contain h2{ font-size:26px;}
.send_contain p{font-size:16px; line-height:1.6;}
.send_cont input{width:77%; border-radius:5px; padding:10px 5px 10px 10px; font-size:16px; border:1px solid #c1c1c1; color:#000; display:block; margin:0.4rem auto 0;}
.send_cont input::-webkit-input-placeholder {color:#cacaca;}
.send_cont input:-moz-placeholder {color:#cacaca;}　
.send_cont input::-moz-placeholder 　{color:#cacaca;}
.send_cont input:-ms-input-placeholder {color:#cacaca;}
.send_cont>a{padding:10px 0; width:84%; font-size:20px; margin:20px auto 0; border-radius:5px; background:linear-gradient(top, #608bff 0%, #33b9f8 100%); background:-moz-linear-gradient(top, #608bff 0%, #33b9f8 100%); background:-webkit-linear-gradient(top, #608bff 0%, #33b9f8 100%); color:#fff; text-align:center; display:block;}
.send_conts>a{ width:84%; }
.send_cont>a:hover{ text-decoration:none;}
.send_cont>p{ max-width:700px; text-align:center; width:85%; margin:15px auto 0; color:#5d8efe; font-size:0.16rem;}
.send_cont1 p{ font-size:0.2rem; color:#666; }
.send_cont>p img{ vertical-align:middle; margin-right:5px;}
.ios_send a{ display:none;}

.send_main a{color:#0077ce; font-size:16px;}
.send_main p{font-size:16px; line-height:1.5; margin-top:40px;}
.send_sending{margin:40px auto 0 auto; position:relative;}
.send_error{margin:40px auto 0 auto;}
.send_error p{margin-top:24px;}
.send_error .ios_close1{margin-top:0;}
.send_succ{margin:40px auto 0 auto;}
.send_succ p{margin-top:20px;}
.send_sending .send_mails{width:50px; height:50px; margin:0 auto; padding:0; }
.send_sending .send_mails img{ margin-top:15px;}
.email_send{ background:url(../png/send-email.png) no-repeat center; position:absolute; animation:spin 1s infinite linear; width:100%; height:100%; margin-left:-25px;}
.email_sendsd{ margin-left:-16px; }
.send_contain{ display:none;}
.ios-atbg{width:30%;}
@keyframes spin {
  0%   { transform: rotate(0);}
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  0%   { transform: rotate(0);}
  100% { transform: rotate(360deg); }
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (min-device-pixel-ratio:1.5) {
.proidx_ban{background:#ecf6f7 url(../jpg/proidx_ban1%402x.jpg) top center no-repeat; background-size:cover;}
.prot_nav1:before{background:url(../stocon_head1%402x.html) top center no-repeat;}
.prot_nav2:before{background:url(../stocon_head2%402x.html) top center no-repeat;}
.prot_nav3:before{background:url(../stocon_head8%402x.html) top center no-repeat;}
.prot_nav4:before{background:url(../stocon_head7%402x.html) top center no-repeat;}
.prot_nav5:before{background:url(../stocon_head9%402x.html) top center no-repeat;}
}


@media screen and (max-width: 980px) {
.only_pc{ display:none;}
.only_mo{ display:block;}
.pw980{ width:94%;}
.proidx_banner,.proidx_ban{height:auto; position:relative;}
.proidx_ban{ display:none; padding:10px 0 30px;}
.proidx_ban.show{ display:block; animation:none; z-index:5;}
.proidx_ban{background-color:#ecf6f7; background:linear-gradient(to bottom,#ecf7f7,#d8eef0);}
.proidx_banct{ transform:translateX(0); margin-top:0;}
.proidx_banct>img,.proidx_ban2 .proidx_banct>img{ max-width:164px; width:35%; height:100%; float:none; margin:20px auto;}
.proidx_bantext{ max-width:100%; text-align:center; width:100%; margin:20px auto; float:none;}
.proidx_bantext p,.proidx_ban2 .proidx_bantext p{ width:100%; max-width:100%; margin-top:15px;}
.proidx_bantit img,.proidx_ban2 .proidx_bantit img,.proidx_bantit b{ display:none;}
.proidx_bantit:after{ display:none;}
.proidx_bantit span{ position:relative;}
.proidx_banbtn a,.proidx_banbtn .morebtn{ margin:17px 5px 0;}
.prot_cnt_box{ height:auto; padding:20px 0 30px; background-color:#fcfcfc;}
.prot_cnt_img{ float:none; width:100%; background:none;}
.prot_cnt_text{ float:none; width:94%; margin:20px auto; text-align:center;}
.prot_cnt_btn{ float:none; width:100%; text-align:center;}
.prot_cnt_btn a{ margin:17px 5px 0;}
footer.mt100{ margin-top:50px;}
.proidx_cicr{ top:auto; bottom:20px;}
.proidx_cicr>a{ min-width:auto; width:10px; height:10px; background:#dddddd; border-radius:10px; margin:4px; text-align:center;}
.proidx_cicr>a.checked{background:#9cd4ff; }
.proidx_cicr>a.checked:before{ animation:none;}

}
@media screen and (max-width: 830px) {
.proidx_prot_nav a{ width:220px;}
}

@media screen and (max-width: 600px) {
.proidx_bantit{ font-size:22px;}
.proidx_prot_nav a{ width:170px; margin:20px 5px;}
}
@media screen and (max-width: 415px) {
.proidx_prot_nav a{ width:105px;}
}

@media screen and (max-width: 325px) {
.prot_cnt_text h4{ font-size:18px;}
.prot_cnt_text h4.pner sup{ padding:2px 5px; font-size:12px;}
.proidx_prot_nav a{ font-size:16px; width:120px;}
}
@media screen and (max-width: 320px) {
.proidx_bantit{ font-size:20px;}
}