@charset "utf-8";

body{
  /* bodyに謎のpadding-right: 17pxが入る。bootstrapのモーダルスクリプトが悪さしているっぽい */
  padding-right: 0!important;
}
/* 斜体 */
.transform-italic {
  -webkit-transform: skewX(-15deg);
  -moz-transform: skewX(-15deg);
  -o-transform: skewX(-15deg);
  transform: skewX(-15deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
}
/* 青ボタン */
a.blue-btn {
  width: 80%;
  font-size: 19px;
  font-weight: bold;
  margin: 0 auto;
  display: block;
  display: block;
  position: relative;
  max-width: 720px;
  background: #6085CC;
  box-shadow: 0 5px 0 #3256AD;
  border-radius: 50vh;
  text-align: center;
  padding: 14px 0px;
  box-sizing: border-box;
  line-height: 1.2;
  letter-spacing: 1px;
  transition-duration: 0.05s;
  user-select: none;
  margin: 0 auto;
  text-decoration: none;
  color: #FFF !important;
}
a.blue-btn,
a.blue-btn:hover,
a.blue-btn:active {
  text-decoration: none !important;
  color:#FFF
}
a.blue-btn:hover {
  text-decoration: none;
  color: #FFF !important;
  opacity: .7;
}
a.blue-btn::after {
  content: "";
  position: absolute;
  display: block;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 10px;
  height: 10px;
  top: 19px;
  left: 12px;
  transform: rotate(45deg);
}
.lightbox_btn {
  margin-top: 30px;
  margin-bottom: 15px;
  text-align: center;
}
.lightbox_btn a {
  background: #fa4e9e;
  color: #fff;
  display: inline-block;
  padding: 15px 0;
  width: 365px;
  -webkit-border-radius: 5px;
}
.lightbox_btn a:hover {
  opacity: .7;
  text-decoration: none;
  color: #FFF;
}
.lightbox_btn a p {
  font-size: 16px;
  line-height: 13.5px;
  background: url(/image/top/link_mark.png) left center no-repeat;
  padding-left: 25px;
  display: inline-block;
  margin-bottom: 0;
}
/* PC only */
@media screen and (min-width: 641px) {
  #inc_award {
    margin-top: 0 !important;
    margin-bottom: 4rem;
  }
  a.ar_link.blue{
    text-align: right;
    color: #3f63ab;
    margin: 0 auto;
    background-size: 14px;
    background-image: url(/device/popup_include/img/ar-icon_b.png);
  }
  /* 購入ボタン */
  a.app-btn:hover {
    opacity: .7;
    text-decoration: none;
    color: #fff;
  }
  a.app-btn {
    width: 470px;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto;
    display: block;
    display: block;
    position: relative;
    max-width: 720px;
    background: #23a33b;
    background: -moz-linear-gradient(bottom, #6db928 1%, #23a33b 100%);
    background: -webkit-linear-gradient(bottom, #6db928 1%, #23a33b 100%);
    background: linear-gradient(to bottom, #6db928 1%, #23a33b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db928', endColorstr='#23a33b', GradientType=1);
    border-radius: 3px;
    text-align: center;
    padding: 24px 0px;
    box-sizing: border-box;
    line-height: 1.2;
    letter-spacing: 2px;
    transition-duration: 0.05s;
    user-select: none;
    margin: 0 auto;
    text-decoration: none;
    color: #FFF;
  }
  a.app-btn::after {
    content: "";
    position: absolute;
    display: block;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
    width: 16px;
    height: 16px;
    top: 30px;
    left: 12px;
    transform: rotate(45deg);
  }
  .app-btn-img:hover {
    text-decoration: none;
    opacity: .7;
  }
  .app-btn-img {
    background: url(/campaign/share_no1_202202/img/app_btn.png) center top no-repeat;
    background-size: contain;
    width: 475px;
    height: 71px;
    display: block;
    color: #fff !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.4rem;
    font-weight: bold;
    position: relative;
    margin: 0 auto;
  }
  .app-btn-area {
    padding: 4rem 0;
  }
  .tu .app-btn-wrap {
    position: relative;
    text-align: center;
  }
  a.btn-af-head {
    flex-basis: 37%  !important;
    height: 50px;
    margin: 0;
    padding-top: 16px;
  }
  a.btn-af-head:after {
    top: 17px;
  }
  .fixed .navArea.nav-area-af{
    margin-top: 5px !important;
  }
}
/* アフェリエイト */
.af-none,.af-all,.af-1,.af-1-5{display: none;}
.id-none,.id-all{display: none !important;}
/* アフェリエイト　タイアップ特典 */
.tu-none,.tu-all{display: none !important;}
/* アフェリエイト　外部リンク外し */
.tu-external-link-none,.tu-external-link-all{display: none !important;}
.tu .tokuten-link-area .tokuten-link-inner
/* 申し込みボタンの遅延読み込み */
.lazyshow {
  visibility: hidden;
}
.campaign_bnr{
  padding: 40px 0;
  margin: 0 auto;
  text-align: center;
}
.campaign_bnr p{
  font-size: 20px;
}
/* ヘッダー書き換え */
#headback.af-nav{height: 135px;}
.af-nav .top_nav_list li{padding: 0;border: none;}
.af-nav .top_nav_list li:first-child {border-left:none;}
.af-nav #nav{ display: flex; justify-content: space-around;}
.af-nav #nav > a{ display: block;flex-basis: 20%;  text-align: center; border-left: 1px dotted #CCC;}
.af-nav #nav > a:last-child{border-right: 1px dotted #CCC;}
.af-nav .fixed{height: 65px; background: #FFF; border-bottom: 1px solid #e85298;}
.af-nav .fixed #nav{padding-left: 100px;}

/* 共通部品---------------------------------------------- */

/* カラー系 */
.bg-brown{ background: #e7e4d9;}

/* ブラウンのボタン */
.brown-btn,
a.brown-btn{
  color: #FFF!important;
  background: #b68a41;
  padding: 8px 20px 8px 20px;
  text-align: center;
  border-radius: 6px;
  display: inline-block;
  margin: 10px;
  position: relative;
}
a.brown-btn:hover{text-decoration: none;opacity: .8;}

/* PKG版 */
.s19-pkg-select{
  text-align: center;
  margin: 3em auto;
}
/* 細かいバグ等の修正*/
.application-btn a:hover,
.application-btn a:focus{color: #FFF;}
.s19-lineup a.box-link{padding-top: 1em;}

.btn-af-head{
  display: block;
  position: relative;
  width: 260px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: bold;
  background: #23A33B;
  background: -moz-linear-gradient(bottom, #9ed73b 1%,#87c631 100%);
  background: -webkit-linear-gradient(bottom, #9ed73b 1%,#87c631 100%);
  background: linear-gradient(to bottom, #9ed73b 1%,#87c631 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db928', endColorstr='#23a33b',GradientType=1 );
  box-shadow: 0px 3px 2px #CCC;
  border-radius: 3px;
  text-align: center;
  padding: 11px 0px 3px 20px;
  box-sizing: border-box;
  color: #FFF!important;
  letter-spacing: 0px;
  transition-duration: .05s;
  user-select: none;
  margin: 5px;
}

.btn-af-head:hover{
  text-decoration: none;
  color: #fff;
  opacity: .7;
}
.btn-af-head:after {
  content: "";
  position: absolute;
  display: block;
  border-top: 3px solid #FFF;
  border-right: 3px solid #FFF;
  width: 16px;
  height: 16px;
  top: 22px;
  left: 1px;
  transform: rotate(45deg);
}
a.close_btn {
  pointer-events: none;
  cursor: not-allowed;
}
a.close_btn img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}