@charset "euc-jp";

/*-------- 汎用 --------*/
html {
    overflow-y: scroll;
    font-size: 62.5%;
}
body {
    background: none;
    color: #333;
    font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 1.25rem;
    line-height: 1.5;
    overflow-x: hidden;
}
a {
    text-decoration: none;
}
a:focus {
    outline: none;
}
img {
    box-sizing: border-box;
    vertical-align: bottom;
    width: 100%;
}
ul,ol {
    list-style: none;
}
h2 { text-align: center;}
h2.heading {
    position: relative;
    font-weight: bold;
    font-size: 1.7rem;
}
h2.heading::before {
    width: 50px;
    height: 4px;
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -25px;
    border-radius: 5px;
}
.wrap div {
    box-sizing: border-box;
}

/*-------- オファー --------*/
.btn_area {
    box-sizing: border-box;
    border-radius: 5px;
    margin: 0 auto 60px;
}
.btn_area a {
    color: #FFF;
    display: block;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 5px;
    background: #ff2764;
    position: relative;
    text-align: center;
}

/*-------- ヘッダー --------*/
.header {
    width: 100%;
    position: fixed;
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px 5px 5px;
}
.header .header_inner {
    display: flex;
    align-items: center;
}
.header p {
    font-size: 1.2rem;
    padding: 10px 0 0;
    clear: both;
    text-align: center
}
.header .logo {
    width: 80px;
}
.header .btn_area {
    width: 140px;
    display: inline-block;
    box-shadow: 0 3px 0 #df154e;
    text-align: center;
    margin: 0 15px 0 auto;
}
.header .btn_area a {
    display: block;
    font-weight: normal;
    font-size: 1.4rem;
    padding-left: 30%;
    text-align: center;
    padding: 4px 2px;
}

/*-------- メインビジュアル --------*/
.mainvisual {
    background: #359dd9;
    padding: 70px 0 30px;
}
.mainvisual .btn_area {
    margin: 0 10px;
}
.mainvisual .btn_area a {
    width: 100%;
    display: block;
    border: #fff 2px solid;
    border-radius: 8px;
    margin: 10px 0 30px;
    padding: 10px 0;
    font-size: 1.7rem;
}
.mainvisual .heading_sub {
    text-align: center;
    font-weight: bold;
    font-size: 1.7rem;
    color: #fff;
}
.mainvisual .atout {
    width: auto;
    box-sizing: border-box;
    border-radius: 8px;
    background: #fff;
    box-shadow: 4px 4px 0 #3291c7;
    margin: 20px 10px 0;
    padding: 30px;
    text-align: center;
}
.mainvisual .atout h3 {
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 20px;
}
.mainvisual .atout .txt {
    letter-spacing: 1px;
    line-height: 2.0em;
    font-size: 1.4rem;
    
}
.mainvisual .atout .txt span {
    font-weight: bold;
    color: #ff2764;
}

/*-------- コンテンツ --------*/
.contents {
    text-align: center;
}

/*-------- ポイント交換先 --------*/

.exchange {
    box-sizing: border-box;
    background: #eee;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #f2f2f2), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #f2f2f2), color-stop(0.75, #f2f2f2), color-stop(0.75, transparent), to(transparent));
      background-image: -webkit-linear-gradient(-45deg, #f2f2f2 25%, transparent 25%, transparent 50%, #f2f2f2 50%, #f2f2f2 75%, transparent 75%, transparent);
      background-image: -moz-linear-gradient(-45deg, #f2f2f2 25%, transparent 25%, transparent 50%, #f2f2f2 50%, #f2f2f2 75%, transparent 75%, transparent);
      background-image: -ms-linear-gradient(-45deg, #f2f2f2 25%, transparent 25%, transparent 50%, #f2f2f2 50%, #f2f2f2 75%, transparent 75%, transparent);
      background-image: linear-gradient(-45deg, #f2f2f2 25%, transparent 25%, transparent 50%, #f2f2f2 50%, #f2f2f2 75%, transparent 75%, transparent);    
    background-size: 8px 8px;
    padding: 30px 0;
}
.exchange .exchange_slide {
    box-sizing: border-box;
    padding: 35px 0 10px;
}
.exchange .slide {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
h2.heading::before {
    background: #359dd9;
}
.exchange .slide li { padding: 0 7px;}
.exchange .slide li img {
    width: 100%;
    vertical-align: bottom;
}
.slide { display: none;}
.slide.slick-initialized { display: block;}
.slick-slide img { margin: 0 auto;}
.exchange .txt {
    font-size: 1.4rem;
}
.exchange .txt span {
    font-weight: bold;
    font-size: 2.0rem;
    color: #ff2764;
}
.fs_s {
    margin: 0 20px 20px;
    font-size: 0.75rem;
    text-align: left;
}

/*-------- 使用用途 --------*/

.ability {
    box-sizing: border-box;
    padding: 25px 0 35px;
}
.ability ul li {
    margin-bottom: 45px;
    text-align: left;
}
.ability ul li:last-child { margin-bottom:0;}
.ability ul li img {
    width: 100%;
    vertical-align: bottom;
}

/*-------- もっと効率的にポイ活しよう --------*/

.efficiency {
    box-sizing: border-box;
    background: #359dd9;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #46a5dc), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #46a5dc), color-stop(0.75, #46a5dc), color-stop(0.75, transparent), to(transparent));
      background-image: -webkit-linear-gradient(-45deg, #46a5dc 25%, transparent 25%, transparent 50%, #46a5dc 50%, #46a5dc 75%, transparent 75%, transparent);
      background-image: -moz-linear-gradient(-45deg, #46a5dc 25%, transparent 25%, transparent 50%, #46a5dc 50%, #46a5dc 75%, transparent 75%, transparent);
      background-image: -ms-linear-gradient(-45deg, #46a5dc 25%, transparent 25%, transparent 50%, #46a5dc 50%, #46a5dc 75%, transparent 75%, transparent);
      background-image: linear-gradient(-45deg, #46a5dc 25%, transparent 25%, transparent 50%, #46a5dc 50%, #46a5dc 75%, transparent 75%, transparent);    
    background-size: 8px 8px;
    padding: 30px 0;
}
.efficiency h2 { color: #fff;}
.efficiency h2::before { background: #ffdc48;}
.efficiency .detail {
    margin: 0 auto;
    padding: 30px 0 0;
}
.efficiency .detail .txt {
    box-sizing: border-box;
    padding: 0 10px 20px;
    text-align: left;
    line-height: 2.0em;
    font-size: 14px;
    color: #fff;
}
.efficiency .detail .txt span { font-weight: bold;}
.efficiency .detail img {
    width: 50%;
}

/*-------- キャンペーン --------*/

.campaign {
    box-sizing: border-box;
    padding: 30px 0;
}
.campaign .heading_sub {
    margin: 10px 0 30px;
    font-weight: bold;
    font-size: 1.7rem;
}
.campaign ul li:nth-child(1) {
    position: relative;
    margin-bottom: 75px;
}
.campaign ul li:nth-child(1)::after {
    width: 32px;
    height: 32px;
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50%;
    background: url("../img/img_campaign_and.png") no-repeat 0 0;
    background-size: 32px;
    margin-left: -16px;
}
.campaign ul li .image {
    margin-bottom: 20px;
    padding: 0 10px;
}
.campaign ul li .txt {
    line-height: 2.0em;
    font-size: 1.4rem;
}
.campaign ul li .txt span { font-weight: bold;}
.campaign ul li .num {
    display: inline-block;
    border-radius: 2px;
    background: #ff2764;
    padding: 3px 15px;
    font-weight: bold;
    font-size: 1.7rem;
    color: #fff;
}
.campaign ul li:nth-child(2) .num { margin-bottom: 10px;}

/*-------- フッター --------*/
.links {
    padding: 10px 0;
    text-align: center;
    margin: 0 auto;
}
.links li {
    display: inline-block;
    margin-right: 10px;
}
.links li a {
    text-decoration: underline;
    color: #fff;
}
.links li a:hover {
    color: #f5a202;
}
.footer {
    background: #002e42;
    color: #FFF;
    text-align: center;
    padding: 15px 0;
}
.footer p { font-size: 1.0rem;}