@charset "utf-8";
#contents {
  background: #FFF6CC;
  color: #333;
  text-align: center;
  padding: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
}
#contents * {
  box-sizing: border-box;
}
#contents .inner {
  width: 100%;
}
.inner a {
  color: #0099cc;
  font-weight: 700;
  text-decoration: underline;
}
.inner a:hover {
  opacity: 0.7;
}
.display-sp {
  display: none;
}
.end_txt {
    font-weight: bold;
    color: #FF0004;
    font-size: 180%;
    text-align: center;
    margin-bottom: 26px;
}
.app .end_txt {
  margin: 1.8% 0 0;
}
/* ============== MV =================== */
.mv {
  position: relative;
  background: #19526D;
}
.mv_logo {
  background: #fff;
  padding: 6px;
  position: absolute;
  width: 100%;
  z-index: 2;
  top: 18px;
}
.mv_main img, .term img {
  margin: 0 auto;
}
.term {
  background: #fff;
  padding: 15px 0;
  text-align: center;
}
/* ============== main =================== */
.main {
  margin-top: 26px;
}
.campaign {
  padding: 0 13px;
  max-width: 876px;
  margin: 0 auto 3.5%;
}
.campaign_ttl img {
  margin: 0 auto;
  margin-bottom: 22px;
}
/* ============== tab =================== */
.area {
  display: none;
}
.tab {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 28px;
}
.tab li {
  width: 49%;
  text-indent: 0;
  border-radius: 15px 15px 0 0;
  font-weight: bold;
  padding-left: 0;
  background: #919191;
}
.campaign .tab li a {
  color: #fff;
  outline: none;
  padding: 6px 0 2px;
  font-size: 1.8rem;
  line-height: 1.3;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.tab li:first-child {
  margin-right: 3%;
}
.tab li.active {
  background: #FF877D;
  background-position: center;
}
.tab-box {
  border-top: solid #FF877D 8px;
  background-color: #fff;
  text-align: center;
  padding: 20px;
}
/*STEP*/
.step {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.step_item {
  width: calc((100% - 20px) / 2);
  border: 2px solid #FF877D;
  border-radius: 10px;
  margin-bottom: 3%;
}
.step_item_ttl {
  text-align: left;
}
.step_item_inner {
  padding-top: 16px;
  padding-bottom: 14px;
}
.step_item_txtblock {
  width: 91%;
  margin: 0 auto;
  text-align: left;
}
.step_item .ft-em {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}
.step_item .list-style {
  font-size: 15px;
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
}
.step_item_pic img {
  margin: auto;
}
.step_item_note {
  color: #ff0000;
}
/*ponta*/
.area-ponta .step_item-01 .step_item_ttl {
  margin-bottom: 35px;
}
.area-ponta .step_item-01 .app_qr {
  margin-top: 25px;
  margin-bottom: 18px;
}
.area-ponta .step_item-01 .step_item_txtblock {
  margin-top: 10px;
}
.area-ponta .step_item-02 .step_item_ttl {
  margin-bottom: 10px;
}
.area-ponta .step_item-03 .step_item_ttl {
  margin-bottom: 38px;
}
.area-ponta .step_item-03 .step_item_pic {
  margin-bottom: 10px;
}
.area-ponta .step_item-05 .step_item_ttl {
  margin-bottom: 22%;
}
.area-ponta .step_item-05 .step_item_pic {
  margin-bottom: 12%;
}
.area-ponta .step_item-06 .step_item_ttl {
  margin-bottom: 7%;
}
/*tomods*/
.area-tomods .step_item-01 .step_item_ttl {
  margin-bottom: 35px;
}
.step_item_lead img {
  margin: auto;
}
.area-tomods .step_item-01 .step_item_lead {
  margin-bottom: 6%;
}
.area-tomods .step_item-01 .step_item_pic {
  margin-bottom: 8%;
}
.area-tomods .step_item-01 .ft-em {
  margin-top: 15px;
}
.area-tomods .step_item-02 .step_item_pic {
  margin: 12px auto 0;
}
.area-tomods .step_item-03 .step_item_ttl {
  margin-bottom: 20%;
}
.area-tomods .step_item-04 .step_item_ttl {
  margin-bottom: 6%;
}
/*step_item-end*/
.step_item.step_item-end {
  width: 100%;
  border: 0;
  position: relative;
  margin-top: 8.5%;
  margin-bottom: 2%;
}
.step_item.step_item-end::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 92px;
  height: 49px;
  background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/arrow.png) center no-repeat;
}
.area-ponta .step_item.step_item-end::before {
  top: -14%;
}
.area-tomods .step_item.step_item-end::before {
  top: -17%;
}
.step_item-end .step_item_inner {
  border: 2px solid #FF877D;
  border-radius: 10px;
  padding-top: 24px;
  padding-bottom: 7px;
}
.step_item-end .step_item_list {
  display: flex;
  justify-content: center;
}
.step_item-end .step_end_ttl {
  margin-bottom: 4.5%;
  text-align: center;
}
.step_item-end .step_item_ttl {
  margin-bottom: 3%;
  text-align: center;
}
.step_item-end .step_item_ttl img {
  margin: auto;
}
.step_item-end .step_item_list {
  margin-bottom: 14px;
}
.step_item-end .step_item_list li + li {
  margin-left: 8%;
}
.step_item-end .step_item_note {
  font-size: 15px;
}
.step_item-end .list-style {
  margin-top: 4.8%;
}
/* ============== app =================== */
.app {
  background: #ffb1a8;
  padding: 46px 20px 28px;
}
.app_list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-top: 1.8%;
  width: 43%;
  min-width: 740px;
}
.app_item {
  width: calc(100% / 2);
}
.app_ttl {
  margin-bottom: 0.8%;
}
.app_list li + li {
  margin-left: 49px;
}
.app_item_ttl {
  margin-bottom: 20px;
  min-height: 44px;
}
.app .app_qr img {
  margin: 0 auto 9%;
}
/* ============== att =================== */
.att {
  background: #fff;
  max-width: 850px;
  margin: 30px auto;
  padding: 3.5% 30px 4%;
  text-align: left;
  line-height: 1.7;
}
@media screen and (max-width: 880px) {
  .att {
    width: calc(100% - 30px);
  }
}
.att_item + .att_item {
  margin-top: 30px;
}
.att_item_ttl {
  margin-bottom: 15px;
  font-size: 20px;
  color: #71290c;
  font-weight: bold;
  position: relative;
  padding-left: 1.5em;
  line-height: 1.3;
}
/*「●」タイプのリスト用*/
.att_item_ttl::before {
  content: "";
  display: block;
  position: absolute;
  background: #19526d;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.att_item_inner p {
  margin-top: 10px;
}
.att_item_inner p + p {
  margin-top: 0;
}
.att_item_img {
  margin: 20px auto;
  text-align: center;
}
.att_list-style {
  margin-top: 5px;
  padding-left: 1em;
  text-indent: -1em
}
.att_list-style li > ul, .att_list-style li > ol {
  margin-left: 1em;
  margin-bottom: 5px;
}
.att_small-unit {
  margin: 5px auto 10px;
}
.att_small-unit dt {
  font-weight: bold;
  text-indent: 0;
  margin-left: -1em;
}
.att_item_note {
  font-size: 12px;
  color: #909090;
}
.att_item_em {
  color: #ff0505;
}
.att_square-box {
  border: 1px solid #ff0505;
  box-sizing: border-box;
  padding: 10px 15px;
  margin: 5px auto;
  color: #ff0505;
}
.att_square-box dd ol {
  padding-left: 2.1em;
  text-indent: -2.5em;
}
/* コンテンツ（SP：767px以下）
========================================================*/
@media screen and (max-width: 767px) {
  .display-sp {
    display: block;
  }
  .display-pc {
    display: none;
  }
  .end_txt {
    font-size: 150%;
    margin-bottom: 4%;
}
.app .end_txt {
  margin: 2.8% 0 0;
}
.end_txt + .app_list {
  margin-top: 2%;
}
  /* ============== MV =================== */
  .mv_main {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/mv_sp.png) center no-repeat;
    padding-top: 96.15%;
    background-size: contain;
  }
  .term {
    padding: 15px 20px;
  }
  .term p {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/term_sp.png) center no-repeat;
    padding-top: 12.33%;
    background-size: contain;
  }
  /* ============== main =================== */
  .main {
    margin-top: 4%;
  }
  .campaign {
    padding: 0 12px;
    max-width: 100%;
    margin: 0 auto 5.5%;
  }
  .campaign_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/lead_sp.png) center no-repeat;
    padding-top: 11.67%;
    background-size: contain;
    margin-bottom: 5%;
  }
  .campaign_lead {
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
  }
  /* ============== tab =================== */
  .tab {
    margin-top: 5%;
  }
  .tab li {
    border-radius: 10px 10px 0 0;
  }
  .campaign .tab li a {
    padding: 10px 0 4px;
    font-size: 1rem;
  }
  .tab li:first-child {
    margin-right: 1.2%;
  }
  .tab-box {
    border-top: solid #FF877D 6px;
    padding: 12px 8px;
  }
  /*STEP*/
  .step {
    display: block;
  }
  .step_item {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 7%;
    font-size: 12px;
  }
  .step_item_inner {
    padding-top: 0;
    padding-bottom: 14px;
  }
  .step_item .ft-em {
    font-weight: bold;
    font-size: 12px;
    line-height: 1.4;
  }
  .step_item .list-style {
    font-size: 12px;
  }
  .step_item_pic img {
    margin: auto;
  }
  .step_item_note {
    color: #ff0000;
    font-size: 11px;
  }
  /*ponta*/
  .area-ponta .step_item_ttl {
    padding-top: 27.72%;
  }
  .area-ponta .step_item-01 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-ponta_01_sp.png) top center no-repeat;
    background-size: contain;
    margin-bottom: 5%;
  }
  .area-ponta .step_item-01 .step_item_lead {
    width: 83.5%;
    margin: 0 auto 6%;
  }
  .area-ponta .step_btn {
    width: 91.5%;
    margin: 0 auto 5%;
  }
  .area-ponta .step_item-01 .step_item_txtblock {
    margin-top: 10px;
  }
  .area-ponta .step_item-02 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-ponta_02_sp.png) top center no-repeat;
    background-size: contain;
    margin-bottom: 5%;
  }
  .area-ponta .step_item-02 .step_item_pic {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_pic-ponta_02_sp.png) top center no-repeat;
    padding-top: 87.77%;
    background-size: contain;
  }
  .area-ponta .step_item-03 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-ponta_03_sp.png) top center no-repeat;
    background-size: contain;
    margin-bottom: 9.5%;
  }
  .area-ponta .step_item-03 .step_item_pic {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_pic-ponta_03_sp.png) top center no-repeat;
    padding-top: 88.45%;
    background-size: contain;
    margin-bottom: 15px;
  }
  .area-ponta .step_item-04 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-ponta_04_sp.png) top center no-repeat;
    padding-top: 41.98%;
    background-size: contain;
    margin-bottom: 5%;
  }
  .area-ponta .step_item-04 .step_item_pic {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_pic-ponta_04_sp.png) top center no-repeat;
    padding-top: 65.08%;
    background-size: contain;
    margin-bottom: 2%;
  }
  .area-ponta .step_item-05 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-ponta_05_sp.png) top center no-repeat;
    background-size: contain;
    margin-bottom: 5%;
  }
  .area-ponta .step_item-05 .step_item_pic {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_pic-ponta_05_sp.png) top center no-repeat;
    padding-top: 21.47%;
    background-size: contain;
    margin-bottom: 1%;
  }
  .area-ponta .step_item-06 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-ponta_06_sp.png) top center no-repeat;
    padding-top: 26.36%;
    background-size: contain;
    margin-bottom: 5%;
  }
  .area-ponta .step_item-06 .step_item_pic {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_pic-ponta_06_sp.png) top center no-repeat;
    padding-top: 58.56%;
    background-size: contain;
    margin-bottom: 4%;
  }
  /*tomods*/
  .area-tomods .step_item-01 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-tomods_01_sp.png) top center no-repeat;
    padding-top: 20.24%;
    background-size: contain;
    margin-bottom: 7.5%;
  }
  .area-tomods .step_item-01 .step_item_lead img {
    width: 75%;
  }
  .area-tomods .step_item-01 .app-btn-list img {
    width: 80%;
  }
  .area-tomods .step_item-01 .ft-em {
    margin-top: 10px;
  }
  .area-tomods .step_item-02 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-tomods_02_sp.png) top center no-repeat;
    padding-top: 42.8%;
    background-size: contain;
    margin-bottom: 35px;
  }
  .area-tomods .step_item-02 .step_item_pic {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_pic-tomods_02_sp.png) top center no-repeat;
    padding-top: 142.93%;
    background-size: contain;
    margin: 12px auto 8px;
  }
  .area-tomods .step_item-03 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-tomods_03_sp.png) top center no-repeat;
    padding-top: 27.58%;
    background-size: contain;
    margin-bottom: 5.5%;
  }
  .area-tomods .step_item-03 .step_item_pic {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_pic-tomods_03_sp.png) top center no-repeat;
    padding-top: 21.47%;
    background-size: contain;
  }
  .area-tomods .step_item-04 .step_item_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_ttl-tomods_04_sp.png) top center no-repeat;
    padding-top: 26.36%;
    background-size: contain;
    margin-bottom: 5.5%;
  }
  .area-tomods .step_item-04 .step_item_pic {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_pic-tomods_04_sp.png) top center no-repeat;
    padding-top: 58.56%;
    background-size: contain;
    margin-bottom: 3%;
  }
  /*step_item-end*/
  .step_item.step_item-end {
    width: 100%;
    border: 0;
    position: relative;
    margin-top: 16%;
    margin-bottom: 2%;
  }
  .area-tomods .step_item.step_item-end {
    margin-top: 17%;
  }
  .step_item.step_item-end::before {
    width: 56px;
    height: 36px;
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/arrow_sp.png) center no-repeat;
    background-size: contain;
  }
  .area-ponta .step_item.step_item-end::before {
    top: -8.5%;
  }
  .area-tomods .step_item.step_item-end::before {
    top: -10.5%;
  }
  .step_item-end .step_item_inner {
    border-radius: 6px;
    padding-top: 16px;
    padding-bottom: 7px;
  }
  .step_item-end .step_item_list {
    display: block;
  }
  .step_item-end .step_end_ttl {
    margin: 0 auto 7.5%;
    width: 55%;
  }
  .step_item-end .step_item_ttl {
    width: 89.5%;
    margin: 0 auto 5%;
    padding-top: 0;
  }
  .step_item-end .step_item_ttl img {
    margin: auto;
  }
  .step_item-end .step_item_list {
    width: 85%;
    margin: 0 auto 10px;
  }
  .step_item-end .step_item_list li + li {
    margin-left: 0;
    margin-top: 4%;
  }
  .step_item_terms {
    padding-top: 23.24%;
  }
  .step_item_terms:nth-child(1) {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_end_item01_sp.png) top center no-repeat;
    background-size: contain;
  }
  .step_item_terms:nth-child(2) {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/step_end_item02_sp.png) top center no-repeat;
    background-size: contain;
  }
  .step_item-end .step_item_note {
    font-size: 10px;
    width: 91%;
    margin: 0 auto;
  }
  .step_item-end .list-style {
    margin-top: 5.5%;
  }
  /* ============== app =================== */
  .app {
    padding: 8% 3%;
  }
  .app_list {
    display: block;
    margin-top: 4.8%;
    width: 100%;
    min-width: 100%;
  }
  .app_item {
    width: 100%;
  }
  .app_item_ttl {
    min-height: auto;
  }
  .app_note {
    font-size: 12px;
  }
  .app_item-ponta .step_btn {
    width: 85.5%;
    margin: 0 auto 3%;
  }
  .app_ttl {
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/apptomods_2111non/img/app_ttl_sp.png) top center no-repeat;
    padding-top: 23.46%;
    background-size: contain;
    margin-bottom: 2%;
  }
  .app_list li + li {
    margin-left: 0;
    margin-top: 10%;
  }
  .app_item-ponta .app_item_ttl {
    width: 87%;
    margin: 0 auto 3%;
  }
  .app_item-tomods .app_item_ttl {
    width: 78%;
    margin: 0 auto 6%;
  }
  .app-btn-list li {
    margin-bottom: 3%;
  }
  .app-btn-list img {
    width: 75%;
  }
  /* ============== att =================== */
  .att {
    border-radius: 12px;
    padding: 4% 5% 5%;
    width: calc(100% - 30px);
    margin-top: 6%;
  }
  .att_item + .att_item {
    margin-top: 8%;
  }
  .att_item_ttl {
    margin-bottom: 5px;
    font-size: 1.8rem;
    padding-left: 1.3em;
    line-height: 1.3;
  }
  .att_item_ttl::before {
    width: 18px;
    height: 18px;
  }
  .att_item_inner p, .att_list-style {
    margin-top: 5px;
  }
}