@charset "utf-8";

/* 00.USUAL
--------------------------------------------------- */
html {
    scroll-behavior: smooth;
}
article#rank {
    background-color: #fff;
}
div.container {
	padding: 0;
}
.pcNone {
	display: none;
}

.linkBtn {
	font-weight: bold;
	font-size: 118%;
	margin-top: 2em;
}
.linkBtn span {
	display: block;
	font-size: 81%;
}
div.linkBtn {
    background: -moz-linear-gradient(top, #e60012, #bb0000);
    background: -webkit-linear-gradient(top, #e60012, #bb0000);
    background: linear-gradient(to bottom, #e60012, #bb0000);
}
div.linkBtn:hover {
    background: #fff;
}

/* 01.MAINVISUAL
--------------------------------------------------- */
section#mainvisual {
    background-color: #e94d59;
    color: #fff;
}
section#mainvisual div.container {
    background: url("../img/mv_figure.png") no-repeat right bottom / 470px auto;
    padding: 7em 0;
}
section#mainvisual h1 {
    margin: 0 0 0.5em;
    font-weight: 500;
    font-size: 280%;
}
section#mainvisual p {
    margin: 0;
    font-size: 106%;
    line-height: 1.6;
}

/* 02.LIST
--------------------------------------------------- */
section#list {
    margin: 3em 0;
}
section#list table.pcTable {
    border-collapse: collapse;
    width: 100%;
    margin-top: 3em 0;
}
section#list table.pcTable tr.point,
section#list table.pcTable tr.coupon,
section#list table.pcTable tr.line { border-top:1px solid #ccc; }

section#list table.pcTable tr.medal th {
    vertical-align: bottom;
}
section#list table.pcTable tr.medal th img {
    margin-bottom: -1px;
    position: relative;
}
section#list table.pcTable th,
section#list table.pcTable td {
    text-align: center;
    vertical-align: middle;
    box-shadow: 3px 0 0 0 rgba(255,255,255,1) inset;
}
section#list table.pcTable th {
    font-size: 112%;
}
section#list table.pcTable th span {
    font-weight: normal;
    font-size: 81%;
    line-height: 130%;
    margin-top: 0.3em;
    display: block;
}
section#list table.pcTable th a {
    color: #1a1a1a;
    text-decoration: underline;
}
section#list table.pcTable td img {
    max-width: 90px !important;
}
section#list table td span.num {
    font-family: Arial, Helvetica, "sans-serif";
    font-weight: bold;
    font-size: 250%;
    letter-spacing: 0em;
}
section#list table .re { background-color:#fdedee; }
section#list table .br { background-color:#f9eee8; }
section#list table .si { background-color:#ebebeb; }
section#list table .go { background-color:#faf5e5; }
section#list table .pl { background-color:#e5f4f4; }
section#list table .di { background-color:#e5e5e5; }

section#list table.pcTable tr.rankup td { padding-bottom:10px; }
section#list table.pcTable tr.rankup td.re { vertical-align:bottom; padding-bottom:0; }
section#list table.pcTable tr.point td { padding:2.2em 0 2em; }
section#list table.pcTable tr.coupon td { line-height:120%; padding:1.8em 0 1.6em; }
section#list table.pcTable tr.line th { font-size:106%; }
section#list table.pcTable tr.line th img { max-width:130px !important; margin-bottom:0.2em; }
section#list table.pcTable tr.line td { line-height:140%; padding:1.8em 0; }
section#list table.pcTable tr.line td.sigo {
    background: -moz-linear-gradient(left, #ebebeb 0%, #ebebeb 50.1%, #ffffff 50.2%, #ffffff 51.3%, #faf5e5 51.4%, #faf5e5 100%);
    background: -webkit-linear-gradient(left, #ebebeb 0%,#ebebeb 50.1%,#ffffff 50.2%,#ffffff 51.3%,#faf5e5 51.4%,#faf5e5 100%);
    background: linear-gradient(to right, #ebebeb 0%,#ebebeb 50.1%,#ffffff 50.2%,#ffffff 51.3%,#faf5e5 51.4%,#faf5e5 100%);
}
section#list table.pcTable tr.line td.pldi {
    background: -moz-linear-gradient(left, #e5f4f4 0%, #e5f4f4 50.1%, #ffffff 50.2%, #ffffff 51.3%, #e5e5e5 51.4%, #e5e5e5 100%);
    background: -webkit-linear-gradient(left, #e5f4f4 0%, #e5f4f4 50.1%, #ffffff 50.2%, #ffffff 51.3%, #e5e5e5 51.4%, #e5e5e5 100%);
    background: linear-gradient(to right, #e5f4f4 0%, #e5f4f4 50.1%, #ffffff 50.2%, #ffffff 51.3%, #e5e5e5 51.4%, #e5e5e5 100%);
}

/* 03.RANKUP
--------------------------------------------------- */
section#rankup,
section#coupon {
    margin: 6em 0;
}
section#rankup h2,
section#coupon h2 {
    text-align: center;
    margin-bottom: 0.5em;
    font-weight: 200;
    color: #e60012;
    font-size: 280%;
}
    section#rankup h2 { background: url("../img/ic_rankup.png") no-repeat top center / 10% auto; padding-top:11%; }
    section#coupon h2 { background: url("../img/ic_coupon.png") no-repeat top center / 23% auto; padding-top:15%; }
section p.lead {
    text-align: center;
    font-size: 112%;
    line-height: 160%;
    margin-bottom: 0;
}
section#rankup div.container {
    width: 800px;
}
section#rankup dl {
    border: 2px solid #eb5c67;
    border-radius: 10px;
    text-align: center;
    margin-top: 4em;
}
section#rankup dl dt {
    background-color: #eb5c67;
    padding: 10px 5% 13px;
}
section#rankup dl dt img {
    width: 415px;
}
section#rankup dl dd {
    padding: 25px 5% 30px;
}
section#rankup dl dd img {
    width: 475px;
}

/* 04.COUPON
--------------------------------------------------- */
section#coupon div.cta.filter {
    margin-top: 2em;
}
section#coupon div.cta.filter a {
    display: inline-block;
    width: 16.6%;
    text-align: center;
    border-bottom: 3px solid #e6e6e6;
    cursor: pointer;
    transition: all 0.3s;
    padding: 1.5em 0;
}
    section#coupon div.cta.filter a[data-filter=".regular"]:hover,
    section#coupon div.cta.filter a[data-filter=".regular"].mixitup-control-active { border-bottom:3px solid #e94d59; }
    section#coupon div.cta.filter a[data-filter=".bronze"]:hover,
    section#coupon div.cta.filter a[data-filter=".bronze"].mixitup-control-active { border-bottom:3px solid #c2541d; }
    section#coupon div.cta.filter a[data-filter=".silver"]:hover,
    section#coupon div.cta.filter a[data-filter=".silver"].mixitup-control-active { border-bottom:3px solid #999; }
    section#coupon div.cta.filter a[data-filter=".gold"]:hover,
    section#coupon div.cta.filter a[data-filter=".gold"].mixitup-control-active { border-bottom:3px solid #cc9900; }
    section#coupon div.cta.filter a[data-filter=".platinum"]:hover,
    section#coupon div.cta.filter a[data-filter=".platinum"].mixitup-control-active { border-bottom:3px solid #36b3ae; }
    section#coupon div.cta.filter a[data-filter=".diamond"]:hover,
    section#coupon div.cta.filter a[data-filter=".diamond"].mixitup-control-active { border-bottom:3px solid #2a2a2a; }

section#coupon div.cta.filter a img {
    max-width: 70% !important;
}
section#coupon div#mixContainer.boxes {
    display: flex;
    flex-wrap: wrap;
    background: rgba(230,0,32,0.05);
    margin-bottom: 1em;
    padding: 2em;
}
section#coupon div#mixContainer.boxes dl {
    width: 23.6%;
    margin: 0 0.7% 1%;
    padding: 2.5% 0 2%;
    box-sizing: border-box;
    background: url("../img/coupon_bg_201119.png") no-repeat center center / 100% auto;
    color: #fff;
    text-align: center;
}
section#coupon div#mixContainer.boxes dl dt {
    background: url("../img/coupon_line.png") no-repeat center bottom / 100% auto;
    font-size: 112%;
    margin: 0 1.2em;
    padding-bottom: 0.7em;
}
section#coupon div#mixContainer.boxes dl dd {
    font-size: 300%;
    font-weight: 800;
    line-height: 120%;
    padding-top: 0.2em;
}
section#coupon div#mixContainer.boxes dl dd span.num {
    font-family: Arial, Helvetica, "sans-serif";
    letter-spacing: -0.05em;
}
section#coupon div#mixContainer.boxes dl dd.fontM {
    font-size: 300%;
    line-height: 60%;
}
section#coupon div#mixContainer.boxes dl dd.fontS {
    font-size: 181%;
}
section#coupon div#mixContainer.boxes dl dd span.fontS {
    font-size: 62%;
}
    section#coupon div#mixContainer.boxes dl.point0,
    section#coupon div#mixContainer.boxes dl.early { background:url("../img/coupon_bg_org.png") no-repeat center center / 100% auto; }
    section#coupon div#mixContainer.boxes dl.point0 dt,
    section#coupon div#mixContainer.boxes dl.early dt { position:relative; }
    section#coupon div#mixContainer.boxes dl.point0 dt::before,
    section#coupon div#mixContainer.boxes dl.early dt::before { position:absolute; top:-40px; left:-50px; -webkit-transform:scale(0.5); transform:scale(0.5); }
    section#coupon div#mixContainer.boxes dl.point0 dt::before { content:url("../img/coupon_badge.png"); }
    section#coupon div#mixContainer.boxes dl.early dt::before { content:url("../img/coupon_badge_early.png"); }
    section#coupon ul.attentionNote li img { max-width:35px; }

.is-animated {
    animation: .6s zoom-in;
}
@keyframes zoom-in {
  0%   { transform: scale(.1); }
  100% { transform: none; }
}

/* 05.APP
--------------------------------------------------- */
section#app {
    margin: 6em 0 0;
    padding: 4em 0;
    background-color: #ed4b59;
    text-align: center;
}
section#app h3 {
    margin: 0 0 1.5em;
}
section#app h3 img {
    width: 810px;
}
section#app ul.otoku {
    list-style: none;
    width: 85%;
    margin: 0 auto 3em;
    padding: 0;
    display: flex;
}
section#app ul.otoku li {
    box-sizing: border-box;
    padding: 0 3%;
}
section#app div.download {
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: row-reverse;
    padding: 2em 3em 0;
}
section#app div.download dl {
    margin: 0;
    padding: 2.5em 3em 0;
}
section#app div.download dl dt {
    margin-bottom: 2em;
}
section#app div.download dl dd {
}
section#app div.download dl dd ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}
section#app div.download dl dd ul li {
    width: 48%;
    
}
    

/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 959px) {
    div.container { width:90%; }
    .pcNone { display:block; }
    .spNone { display:none !important; }
    
    section#mainvisual { text-align:center; }
    section#mainvisual div.container { background-position:center bottom; background-size:50% auto; padding:3em 0 28%; }
    
    section#list table.spTable { font-size:2vw; margin-bottom:3em; }
    section#list table.spTable th,
    section#list table.spTable td { text-align:center; border:2px solid #fff; }
    section#list table.spTable th a { color:#1a1a1a; text-decoration:underline; }
    section#list table.spTable tr.head th { padding-bottom:0.8em; }
    section#list table.spTable th img { padding:5% 10%; }
    section#list table.spTable td img { max-width:45%; }
    section#list table.spTable td.start { vertical-align:bottom; }
    section#list table.spTable td.start img { max-width:55%; }

    section#rankup div.container { width:90%; }

    section#coupon div#mixContainer.boxes dl { width:48.6%; }
    section#coupon div#mixContainer.boxes dl dt { font-size:3vw; }
    section#coupon div#mixContainer.boxes dl dd { font-size:7vw; }
    section#coupon div#mixContainer.boxes dl dd.fontS { font-size:4vw; }
    section#coupon div#mixContainer.boxes dl dd.fontM { font-size:5.5vw; }
    section#coupon div#mixContainer.boxes dl.point0 dt::before { top:-25px; -webkit-transform:scale(0.7); transform:scale(0.7); }

    section#coupon p { margin-bottom:2em; }
    section#coupon div.cta.filter a { width:16.65%; margin:0; padding:1.2em 0; text-decoration:none; font-size:2.2vw; font-weight:800; letter-spacing:0em; color:#fff; border-bottom:none; border-radius:6px 6px 0 0; vertical-align:bottom; }
    section#coupon div.cta.filter a img { display:none; }
    section#coupon div.cta.filter a[data-filter=".regular"] { background-color:#e94d59; }
    section#coupon div.cta.filter a[data-filter=".regular"]::before { content:"レギュラー"; }
    section#coupon div.cta.filter a[data-filter=".bronze"] { background-color:#c2541d; }
    section#coupon div.cta.filter a[data-filter=".bronze"]::before { content:"ブロンズ"; }
    section#coupon div.cta.filter a[data-filter=".silver"] { background-color:#999; }
    section#coupon div.cta.filter a[data-filter=".silver"]::before { content:"シルバー"; }
    section#coupon div.cta.filter a[data-filter=".gold"] { background-color:#cc9900; }
    section#coupon div.cta.filter a[data-filter=".gold"]::before { content:"ゴールド"; }
    section#coupon div.cta.filter a[data-filter=".platinum"] { background-color:#36b3ae; }
    section#coupon div.cta.filter a[data-filter=".platinum"]::before { content:"プラチナ"; }
    section#coupon div.cta.filter a[data-filter=".diamond"] { background-color:#2a2a2a; }
    section#coupon div.cta.filter a[data-filter=".diamond"]::before { content:"ダイヤモンド"; }
    section#coupon div.cta.filter a:hover { border-bottom:none; padding:1.5em 0; }
    section#coupon div.cta.filter a.mixitup-control-active { padding:1.5em 0; }
    section#coupon div#mixContainer.boxes dl.point0 dt::before { top:-40px; -webkit-transform:scale(0.4); transform:scale(0.4); }
    
    section#app ul.otoku { width:auto; }
    section#app div.download { padding:3% 3% 0; }
    section#app div.download dl { padding:4% 5% 0; }
    section#app div.download dl dt { margin-bottom:5%; }
    section#app div.download dl dd img { width:90%; }
}


/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:559px) {
    section#mainvisual div.container { background-size:60% auto; padding-bottom:33%; }
    section#mainvisual h1 { font-size:6vw; font-weight:600; }
    section#mainvisual p { font-size:3vw; }
    section#list table.spTable { font-size:2.8vw; }
    section#list table.spTable td { line-height:1; padding:1% 0; }
    section#list table.spTable th img { padding:0 10% 0 0; }
    section#list table.spTable td img { max-width:60%; }
    section p.lead { font-size:3vw; font-weight:400; }
    section#rankup,
    section#coupon { margin:4em 0; }
    section#rankup h2,
    section#coupon h2 { font-size:7vw; }
    section#rankup h2 { background-size:15% auto; padding-top:16%; }
    section#coupon h2 { background-size:40% auto; padding-top:25%; }
    section#rankup p.lead { margin-bottom:1em; }
    section#rankup dl { margin-top:3em; }
    section#coupon div#mixContainer.boxes { padding:1em; }
    section#app { padding:3em 0; }
    section#app ul.otoku li { padding:0 2%; }
}

/* ==============================================================
 Less than SP-PORTRAIT / iPhone5
================================================================= */
@media screen and (max-width:320px) {
    section#coupon div#mixContainer.boxes dl.point0 dt::before { -webkit-transform:scale(0.3); transform:scale(0.3); }
}