@charset "UTF-8";
/*lib*/
/**
 * define valiables
 * 各scssファイルでよく使う値を変数定義
 */
/**
 * easing
 */
/**
 * function
 * 値を返す
 */
/**
 * mixins
 * ブロックを返す
 */
/*
デバイス定義
 */
/*
スマホの文字指定専用（横幅640px想定）
font-sizeにvwを設定
 */
/*
clearfix
 */
/*
iOS smooth scroll
 */
/*
opacity
 */
/*
fade
 */
.pci {
  display: inline; }
  @media only screen and (max-width: 768px) {
    .pci {
      display: none; } }

.spi {
  display: none; }
  @media only screen and (max-width: 768px) {
    .spi {
      display: inline; } }

.pcb {
  display: block; }
  @media only screen and (max-width: 768px) {
    .pcb {
      display: none; } }

.spb {
  display: none; }
  @media only screen and (max-width: 768px) {
    .spb {
      display: block; } }

.cr {
  cursor: default; }

.fade {
  transition: opacity 0.1s ease-in-out 0s; }
  .fade:hover {
    opacity: 0.7; }

.bgcolor_none {
  background-color: transparent !important; }

.no_breadcrumbsIcon:after {
  content: "" !important;
  display: inline-block;
  margin: 0 5px; }

.cf:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

/* IE6 */
* html .cf {
  zoom: 1; }

/* IE7 */
*:first-child + html .cf {
  zoom: 1; }

.noBorder {
  border: none !important; }

.btn {
  position: relative;
  display: inline-block;
  height: 50px;
  line-height: 53px;
  font-size: 15px;
  text-align: center;
  text-decoration: none !important;
  border-radius: 7px;
  font-weight: bold;
  overflow: hidden; }
  .btn.btnLheight {
    line-height: 50px; }
    @media only screen and (min-width: 769px) {
      .btn.btnLheight {
        line-height: 53px; } }
  .btn.longType {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box; }
    @media only screen and (min-width: 769px) {
      .btn.longType {
        width: 370px;
        font-size: 17px;
        box-sizing: content-box; } }
  .btn.longType2 {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box; }
    @media only screen and (min-width: 769px) {
      .btn.longType2 {
        width: 370px;
        font-size: 17px; } }
  .btn.middleType {
    width: 90%;
    box-sizing: border-box; }
    @media only screen and (min-width: 769px) {
      .btn.middleType {
        width: 280px;
        box-sizing: content-box; } }
    @media only screen and (min-width: 769px) {
      .btn.middleType.middleType2 {
        width: 300px; } }
    .btn.middleType.middleType2.typeBlank3 {
      background: #fff;
      background-size: 15px,auto;
      line-height: 50px;
      color: #cc2147;
      border-style: solid;
      border-width: 2px;
      border-color: #cc2147;
      border-radius: 5px;
      box-shadow: 0 2px 0px #cc2147;
      position: relative; }
      @media only screen and (min-width: 769px) {
        .btn.middleType.middleType2.typeBlank3 {
          line-height: 52px; } }
      .btn.middleType.middleType2.typeBlank3:after {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        background: url(/keitai_payment/campaign/poinco/images/btn_blankicon.png) no-repeat center center;
        background-size: 100% auto;
        position: absolute;
        top: 50%;
        right: 3%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
  .btn.shortType {
    width: 50%;
    padding: 0 35px;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .btn.shortType {
        width: 192px;
        box-sizing: border-box; } }
  .btn.samespaceType {
    vertical-align: middle;
    font-size: 14px; }
  .btn.typeRed {
    background: #c4002d;
    color: #fff;
    box-shadow: 0 3px 0px #9b0027; }
  .btn.typeBlue {
    background: #1a1a7c;
    color: #fff;
    box-shadow: 0 3px 0px #161650; }
  .btn.type2line {
    line-height: 1; }
    .btn.type2line span {
      width: 100%;
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  .btn.typeBlank2 {
    background: #c4002d;
    color: #fff;
    box-shadow: 0 3px 0px #9b0027;
    position: relative; }
    .btn.typeBlank2:after {
      content: "";
      display: inline-block;
      width: 15px;
      height: 15px;
      background: url(/keitai_payment/campaign/poinco/images/btn_blankicon2.png) no-repeat center center;
      background-size: 100% auto;
      position: absolute;
      top: 50%;
      right: 6%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
  .btn.typeBlank {
    background: #fff;
    color: #cc2147;
    border-style: solid;
    border-width: 2px;
    border-color: #cc2147;
    border-radius: 5px;
    box-shadow: 0 2px 0px #cc2147;
    position: relative; }
    @media only screen and (min-width: 769px) {
      .btn.typeBlank {
        line-height: 50px; } }
    .btn.typeBlank:after {
      content: "";
      display: inline-block;
      width: 15px;
      height: 15px;
      background: url(/keitai_payment/campaign/poinco/images/btn_blankicon.png) no-repeat center right;
      background-size: 100% auto;
      position: absolute;
      top: 50%;
      right: 5%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
  .btn.typeWhite {
    background: #FFF;
    color: #cc2147;
    border-style: solid;
    border-width: 2px;
    border-color: #cc2147;
    border-radius: 5px;
    box-shadow: 0 2px 0px #cc2147; }
  .btn.typeBlack {
    background: #000;
    color: #FFF; }
  .btn.typeBlackborder {
    width: 390px;
    background: #FFF;
    color: #000;
    border-style: solid;
    border-width: 1px; }
  .btn.btn_bold {
    font-weight: bold; }
  .btn.btn_link {
    margin: 10px auto; }
  .btn.whiteArrow:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10%;
    margin-top: -7px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #FFF;
    border-top: 2px solid #FFF;
    -webkit-transform: translate(-50% 0);
    -ms-transform: translate(-50% 0);
    transform: translate(-50% 0);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
    @media only screen and (min-width: 769px) {
      .btn.whiteArrow:after {
        width: 6px;
        height: 6px;
        top: 54%; } }
  .btn.redArrow:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #c4002d;
    border-top: 1px solid #c4002d;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform: translate(-50% 0);
    -ms-transform: translate(-50% 0);
    transform: translate(-50% 0); }
    @media only screen and (min-width: 769px) {
      .btn.redArrow:after {
        width: 6px;
        height: 6px;
        top: 54%; } }
  .btn.redArrow2:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #c4002d;
    border-top: 1px solid #c4002d;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform: translate(-50% 0);
    -ms-transform: translate(-50% 0);
    transform: translate(-50% 0); }
    @media only screen and (min-width: 769px) {
      .btn.redArrow2:after {
        width: 6px;
        height: 6px;
        top: 54%;
        right: 4%; } }
  .btn.typeClose:after {
    content: "";
    width: 15px;
    height: 15px;
    background: url(/keitai_payment/campaign/poinco/images/close_icon.png) no-repeat center right;
    background-size: 100% auto;
    position: absolute;
    top: 51%;
    right: 5%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }

@media only screen and (min-width: 769px) {
  a:hover {
    opacity: .8; } }

/*
**共通サイドナビボタン
 */
#navBtn {
  width: 15.3125%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 110; }
  @media only screen and (min-width: 769px) {
    #navBtn {
      width: 65px;
      position: absolute;
      top: 127px;
      right: 0; } }
  #navBtn img {
    width: 100% !important; }

/*
**共通サイドナビ
 */
.sidenav {
  width: 73.4375%;
  background: #fff;
  z-index: 99; }
  @media only screen and (min-width: 769px) {
    .sidenav {
      width: 283px;
      padding-right: 10px; } }
  .sidenav h2 {
    width: 63.40426%; }
    .sidenav h2 img {
      width: 100% !important; }
  .sidenav ul li {
    padding-left: 20px;
    border-top: 2px dotted #cfcfcf;
    vertical-align: middle; }
    .sidenav ul li:first-child {
      padding-top: 20px;
      padding-bottom: 10px;
      border-top: none; }
    .sidenav ul li a {
      display: block;
      padding: 26px;
      text-decoration: none;
      position: relative;
      background: url(../images/sidenav_arrow.png) no-repeat center right 5%;
      background-size: 8px;
      color: #333333;
      font-weight: bold; }
      .sidenav ul li a.thisPage {
        color: #b40033 !important; }
      @media only screen and (min-width: 769px) {
        .sidenav ul li a {
          background-size: 5px; } }
      .sidenav ul li a .menu {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }

/*
**オーバーレイ
*/
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: #000;
  opacity: .7;
  z-index: 98; }

/*
**バナーエリア
*/
.bnr_area {
  margin-bottom: 4.375%;
  padding: 4.6875%;
  border-top: 1px solid #cfcfcf;
  border-bottom: 1px solid #cfcfcf; }
  @media only screen and (min-width: 769px) {
    .bnr_area {
      margin-bottom: 10px;
      padding: 30px 0;
      text-align: center; } }
  .bnr_area h3 {
    width: 90.625%;
    margin: 0 auto 12px; }
    @media only screen and (min-width: 769px) {
      .bnr_area h3 {
        width: 636px; } }
  .bnr_area .bnr {
    width: 90.625%;
    margin: 0 auto 8%; }
    @media only screen and (min-width: 769px) {
      .bnr_area .bnr {
        width: 794px;
        margin-bottom: 36px; } }
    @media only screen and (min-width: 769px) {
      .bnr_area .bnr.spachan {
        width: 720px; } }
    .bnr_area .bnr.second {
      margin-bottom: 8%; }
      @media only screen and (min-width: 769px) {
        .bnr_area .bnr.second {
          width: 720px;
          margin-bottom: 36px; } }

/*
**topページへもどる
*/
.goIndex {
  text-align: center; }

/*
**SNSエリア
*/
.sns_area {
  padding-top: 6.25%;
  padding-bottom: 7.8125%; }
  @media only screen and (min-width: 769px) {
    .sns_area {
      padding-top: 78px;
      padding-bottom: 60px; } }
  .sns_area img {
    width: 100% !important; }
  .sns_area ul {
    width: 62.5%;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .sns_area ul {
        width: 234px; } }
    .sns_area ul li {
      width: 30%;
      display: inline-block;
      margin-left: 4.5%; }
      .sns_area ul li:first-child {
        margin-left: 0; }

/*
**コラボグッズ一覧へ追従バナー
*/
.under_bnr {
  width: 270px;
  position: fixed;
  left: 50%;
  bottom: -55px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 97; }
  @media only screen and (min-width: 769px) {
    .under_bnr {
      width: 330px; } }

/*
**光が走るエフェクト
*/
.refBtn {
  overflow: hidden;
  position: relative; }

.sp_GeneBtn {
  width: 90%;
  margin: 3.90625% auto 0; }

.sp_presentcp_btn {
  width: 90%;
  margin: 22px auto 0; }
  .sp_presentcp_btn .middleType {
    width: 100%; }

.pc_presentcp_btn {
  width: 280px;
  margin: 22px auto 0; }

.reflection {
  height: 100%;
  width: 30px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #fff;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflection 2.5s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2.5s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -moz-animation: reflection 2.5s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -ms-animation: reflection 2.5s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -o-animation: reflection 2.5s ease-in-out infinite; }

@keyframes reflection {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    transform: scale(50) rotate(45deg);
    opacity: 0; } }

@-webkit-keyframes reflection {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0; } }

@-moz-keyframes reflection {
  0% {
    -moz-transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    -moz-transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    -moz-transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    -moz-transform: scale(50) rotate(45deg);
    opacity: 0; } }

@-ms-keyframes reflection {
  0% {
    -ms-transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    -ms-transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    -ms-transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    -ms-transform: scale(50) rotate(45deg);
    opacity: 0; } }

@-o-keyframes reflection {
  0% {
    -o-transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    -o-transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    -o-transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    -o-transform: scale(50) rotate(45deg);
    opacity: 0; } }

@media only screen and (max-width: 1040px) and (min-width: 770px) {
  ._20point_notice {
    width: 1040px; } }

._20point_notice img {
  width: 100%; }

._20point_notice .redF {
  color: #b40033; }

._20point_notice .indent {
  display: block;
  padding-left: 1em;
  text-indent: -1em; }

._20point_notice .note {
  font-size: 12;
  font-size: 0.75rem;
  font-weight: normal; }
  ._20point_notice .note li {
    padding-left: 1em;
    text-indent: -1em; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .note {
      font-size: 11px; } }

._20point_notice h1 {
  width: 84.16667%;
  margin: 0 auto;
  padding: 5.46875% 0 10.625%; }
  @media only screen and (min-width: 769px) {
    ._20point_notice h1 {
      width: 503px;
      padding: 30px 0; } }

._20point_notice .cont_inner {
  width: 93.75%;
  margin: 0 auto;
  padding: 9.375% 0; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .cont_inner {
      padding: 48px 0; } }
  @media only screen and (min-width: 769px) {
    ._20point_notice .cont_inner.cont1_inner {
      width: 650px;
      padding-bottom: 82px; } }
  @media only screen and (min-width: 769px) {
    ._20point_notice .cont_inner.cont2_inner {
      width: 790px;
      padding-top: 68px;
      padding-bottom: 82px; } }
  @media only screen and (min-width: 769px) {
    ._20point_notice .cont_inner.cont3_inner {
      width: 765px;
      padding: 36px 0; } }

._20point_notice ._20point_notice#_20point_notice {
  background: url(../images/closed/closed_ttl_bg01.png) no-repeat bottom center, url(../images/top/presents_topbg.png);
  background-size: 100% auto,auto; }
  @media only screen and (min-width: 769px) {
    ._20point_notice ._20point_notice#_20point_notice {
      padding-bottom: 40px;
      background: url(../images/closed/closed_ttl_bg01.png) repeat-x bottom center, url(../images/top/presents_topbg.png);
      background-size: auto,auto; } }

._20point_notice .Cont h2 {
  padding: 2.8125% 0;
  color: #fff;
  background: #cb0033;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  background: #cb0033; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont h2 {
      font-size: 22px;
      padding: 18px 0; } }

._20point_notice .Cont .innerWrap {
  background: url(../images/closed/closed_ttl_bg01.png) no-repeat bottom center, url(../images/closed/closed_ttl_bg02.png) no-repeat top center;
  background-size: 100% auto,100% auto; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .innerWrap {
      background: url(../images/closed/closed_ttl_bg01.png) repeat-x bottom center, url(../images/closed/closed_ttl_bg02.png) repeat-x top center;
      background-size: auto,auto; } }
  ._20point_notice .Cont .innerWrap.third {
    background: url(../images/closed/closed_ttl_bg02.png) no-repeat top center;
    background-size: 100% auto; }
    @media only screen and (min-width: 769px) {
      ._20point_notice .Cont .innerWrap.third {
        background: url(../images/closed/closed_ttl_bg02.png) repeat-x top center;
        background-size: auto; } }

._20point_notice .Cont .Cont1 dt {
  padding-bottom: 1.66667%;
  font-size: 16px;
  color: #1a1a7c;
  border-bottom: 2px dotted #1a1a7c;
  font-weight: bold; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont1 dt {
      font-size: 18px; } }

._20point_notice .Cont .Cont1 dd {
  padding: 5% 0; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont1 dd {
      padding: 18px 0;
      font-size: 16px; } }
  ._20point_notice .Cont .Cont1 dd .indentDD {
    display: block;
    padding-left: 1.5em;
    text-indent: -1.5em; }

._20point_notice .Cont .Cont1 .privilege_ttl {
  display: block;
  margin-top: 4.66667%;
  margin-bottom: 1.33333%;
  font-weight: bold; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont1 .privilege_ttl {
      font-size: 16px;
      margin-bottom: 8px; } }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont1 .privilege_ttl--2 {
      margin-top: 18px; } }

._20point_notice .Cont .Cont1 .point_ttl {
  display: block;
  text-decoration: underline; }
  ._20point_notice .Cont .Cont1 .point_ttl--2 {
    margin-top: 2.66667%; }
    @media only screen and (min-width: 769px) {
      ._20point_notice .Cont .Cont1 .point_ttl--2 {
        margin-top: 18px; } }

._20point_notice .Cont .Cont1 .point_notice {
  margin-top: 8%;
  padding-top: 6%;
  border-top: 1px dashed #333; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont1 .point_notice {
      margin-top: 18px;
      padding-top: 18px; } }

._20point_notice .Cont .Cont3 h3 {
  margin-top: 10%;
  margin-bottom: 1.66667%; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont3 h3 {
      margin-top: 30px;
      margin-bottom: 5px;
      font-size: 16px; } }

._20point_notice .Cont .Cont3 dl.typeA dt {
  margin-top: 4.33333%;
  font-size: 16px;
  font-weight: bold; }
  ._20point_notice .Cont .Cont3 dl.typeA dt:before {
    content: "■";
    color: #1a1a7c;
    display: inline-block; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont3 dl.typeA dt {
      margin-top: 26px;
      font-size: 18px; } }

._20point_notice .Cont .Cont3 dl.typeA dd {
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.7; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont3 dl.typeA dd {
      font-size: 16px; } }

._20point_notice .Cont .Cont3 dl.typeB dt:before {
  content: "●";
  color: #c9c9c9;
  display: inline-block; }

._20point_notice .Cont .Cont3 dl.typeB dd {
  margin-bottom: 3.33333%;
  padding-left: 1em; }
  ._20point_notice .Cont .Cont3 dl.typeB dd .strong {
    font-size: 17px; }
    @media only screen and (min-width: 769px) {
      ._20point_notice .Cont .Cont3 dl.typeB dd .strong {
        font-size: 16px; } }
  @media only screen and (min-width: 769px) {
    ._20point_notice .Cont .Cont3 dl.typeB dd {
      margin-bottom: 16px; } }

._20point_notice .copyright {
  margin-top: 5.625%;
  padding: 3.75% 0;
  background: #333; }
  @media only screen and (min-width: 769px) {
    ._20point_notice .copyright {
      margin-top: 36px;
      padding: 18px 0; } }
  ._20point_notice .copyright__inner {
    width: 93.75%;
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      ._20point_notice .copyright__inner {
        width: 960px; } }
  ._20point_notice .copyright__txt {
    font-size: 14;
    font-size: 0.875rem;
    color: #fff; }
    @media only screen and (min-width: 769px) {
      ._20point_notice .copyright__txt {
        font-size: 14px; } }