@charset "utf-8";

/*
  File Name   : oneclick.css
  Description : ワンクリック詐欺
*/


/*
----------------------------------------------------------- */
/* index
----------------------------------------------------------- */
.sec-intro {
  margin: 0 0 30px;
  padding: 30px 15px 0;
}

.sec-intro__catch {
  margin: 0 0 20px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.sec-intro__img {
  position: relative;
  top: -50px;
  margin: 0 0 20px;
  text-align: center;
  opacity: 0;
}

.sec-intro__img img {
  width: 280px;
}

.sec-intro__ttl {
  position: relative;
  top: -50px;
  margin: 0 0 15px;
  text-align: center;
  opacity: 0;
}

.sec-intro__ttl img {
  width: 232px;
}

.sec-intro__txt {
  margin: 0 0 20px;
  color: #fff;
  opacity: 0;
}

.sec-intro__btn {
  text-align: center;
  opacity: 0;
}

.sec-intro__btn img {
  width: 230px;
}


/*
----------------------------------------------------------- */
/* recommend
----------------------------------------------------------- */
.sec-rcmd-wrap {
  position: relative;
  background: #000;
}

.sec-rcmd__img {
  position: relative;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

.sec-rcmd__img.is-overlay {
  opacity: .4;
}

.btn-campaign {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 232px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}


/*
----------------------------------------------------------- */
/* campaign
----------------------------------------------------------- */
.sec-cmp {
  padding: 30px 15px 20px;
  text-align: center;
  background: url(/jp/forHome/media/mobilesecurity/tmvr/sim/images/oneclick/bg-cmp-01.jpg) no-repeat 50% 50%;
  background-size: cover;
}

.sec-cmp__ttl {
  margin: 0 0 15px;
}

.sec-cmp__ttl img {
  width: 180px;
}

.sec-cmp__txt {
  margin: 0 0 20px;
}

.sec-cmp__txt img {
  width: 232px;
}

.sec-cmp__btn img {
  width: 230px;
}


/*
----------------------------------------------------------- */
/* thanks
----------------------------------------------------------- */
.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.footer--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.sec-thanks {
  position: relative;
  padding: 30px 15px;
  color: #fff;
  text-align: center;
  background: url(/jp/forHome/media/mobilesecurity/tmvr/sim/images/oneclick/bg-cmp-01.jpg) no-repeat 50% 50%;
  background-size: cover;
  z-index: 10;
}

.sec-thanks__ttl {
  margin: 0 0 20px;
}

.sec-thanks__ttl img {
  width: 235px;
}

.sec-thanks__txt img {
  width: 230px;
}

.thanks-txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 1.5;
  padding: 30px 0 0;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.thanks-txt p {
  margin: 0 0 25px;
  opacity: 0;
}


/*
----------------------------------------------------------- */
/* call
----------------------------------------------------------- */
.sec-call {
  background: #fff;
}

.sec-call__ttl {
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  text-align: center;
  background: #dcdddd;
}

.sec-call__list {
  padding: 80px 0 40px;
}

.sec-call__nav {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
}

.call-action {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  background: #3e3a39;
  -webkit-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
}

.call-action.is-shrinking {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  height: 300px;
  margin: 70px 50px 0;
}

.call-action__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.call-action__img img {
  width: 100%;
}

.call-btn {
  display: none;
  margin: 10px 0 0;
}

.call-btn p {
  opacity: 0;
  margin: 0 0 10px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.call-btn img {
  width: 230px;
}


/*
----------------------------------------------------------- */
/* why
----------------------------------------------------------- */
.sec-why {
  margin: 0 0 30px;
  padding: 30px 15px 0;
}

.sec-why__img {
  margin: 0 0 10px;
  text-align: center;
}

.sec-why__img img {
  width: 280px;
}

.sec-why__txt {
  margin: 0 0 20px;
  color: #fff;
}

.sec-why-lesson {
  margin: 0 0 20px;
  text-align: center;
}

.sec-why-lesson__label {
  padding: 3px 15px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 10px;
  background: #231815;
}

.sec-why-lesson__txt {
  line-height: 1.5;
  padding: 5px 15px;
  color: #231815;
  font-size: 16px;
  font-weight: bold;
  background: #fff;
}

.sec-why__btn {
  text-align: center;
}

.sec-why__btn img {
  width: 230px;
}


/*
----------------------------------------------------------- */
/* howto
----------------------------------------------------------- */
.sec-howto {
  margin: 0 0 30px;
  padding: 30px 15px 0;
}

.sec-howto__ttl {
  margin: 0 0 20px;
  text-align: center;
}

.sec-howto__ttl img {
  width: 280px;
}

.sec-howto-list {
  margin: 0 0 20px;
  padding: 15px;
  background: #fff;
}

.sec-howto-list__label {
  display: table;
  margin: 0 0 10px;
}

.sec-howto-list__label span {
  display: table-cell;
}

.sec-howto-list__label span:first-child {
  width: 40px;
  vertical-align: top;
}

.sec-howto-list__label span:last-child {
  line-height: 1.3;
  vertical-align: middle;
  padding: 0 0 0 10px;
  font-size: 16px;
  font-weight: bold;
}

.sec-howto-list__txt {
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #231815;
  font-size: 14px;
}

.sec-howto-list__txt:last-child {
  margin: 0;
  padding: 0;
  border: none;
}

.sec-howto-app__ttl {
  margin: 0 0 20px;
  text-align: center;
}

.sec-howto-app__ttl img {
  width: 270px;
}

.sec-howto-app__inner {
  margin: 0 0 15px;
  padding: 15px;
  background: #fff;
}

.sec-howto-app__vb {
  margin: 0 0 15px;
}

.sec-howto-app__vb dt {
  margin: 0 0 15px;
}

.sec-howto-app__vb dd img {
  float: left;
  width: 48px;
  margin: 0 10px 0 0;
  border-radius: 4px;
}

.sec-howto-app__install dt {
  position: relative;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: bold;
}

.sec-howto-app__install dt:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 1px solid #999;
}

.sec-howto-app__install dt span {
  display: inline-block;
  position: relative;
  padding: 0 15px 0 0;
  background: #fff;
}

.sec-howto-app__install ul {
  display: flex;
  justify-content: space-between;
}

.sec-howto-app__install li {
  width: 48%;
  text-align: center;
}

.sec-howto-app__install li a {
  display: block;
  margin: 5px 0 0;
}

.box-fb {
  margin: 0 0 20px;
  text-align: center;
}

.sec-howto__btn {
  width: 248px;
  margin: 0 auto 20px;
  text-align: center;
}

.sec-howto__btn a {
  display: inline-block;
  margin: 0 5px;
}

.sec-howto__btn img {
  height: 51px;
}

.sec-howto__app {
  text-align: center;
}

.sec-howto__app a {
  display: inline-block;
  margin: 0 5px;
}

.sec-howto__app img {
  height: 40px;
}

.sec-howto__staff {
  line-height: 1.5;
  margin: 0 0 20px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.sec-howto__staff span {
  font-size: 16px;
}