@charset "utf-8";

/* ====================================================
reset
*  ==================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}

html {
line-height: 1;
}

ol, ul {
list-style: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}

q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}

a img {
border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}

/* ====================================================
base
*  ==================================================== */

html {
font-size: 62.5%;
color: #3c3c3c;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', sans-serif;
}

body img {
width: 100%;
height: auto;
vertical-align: top;
}

/* ====================================================
txt
*  ==================================================== */

.ttl {
margin-top: 32px 0;
font-size: 2.0rem;
letter-spacing: 0;
line-height: 3.2rem;
text-align: center;
}

.txt {
font-size: 1.6rem;
line-height: 2.8rem;
margin-top: 24px;
padding-bottom: 2px;
text-shadow: 0px 1px 0px #fff;
}

/* ====================================================
wrap
*  ==================================================== */

.wrap {
box-sizing: border-box;
overflow: hidden;
width: 100%;
max-width: 640px;
margin: 0 auto 64px;
}

.wrap-inn {
box-sizing: border-box;
overflow: hidden;
width: 84%;
margin: 0 auto;
}

/* ====================================================
top
*  ==================================================== */

/* ----------------------------------------------------
top-list
---------------------------------------------------- */

.top-list li {
margin-bottom: 16px;
}

/* ====================================================
introduction
*  ==================================================== */

/* ----------------------------------------------------
introduction
---------------------------------------------------- */

.introduction {
width: 100%;
margin: 0 auto;
padding-bottom: 4%;
background-color: #f9dbe8;
}

.introduction-inn {
box-sizing: border-box;
overflow: hidden;
width: 84%;
margin: 0 auto;
}

.introduction-inn-box-left {
overflow: hidden;
float: left;
width: 44%;
padding: 12px 0 10px;
background-color: #fff;
border-radius: 8px;
}

.introduction-inn-box-right {
overflow: hidden;
float: right;
width: 44%;
padding: 12px 0 10px;
background-color: #fff;
border-radius: 8px;
}

.introduction-inn-box-left .upper-txt ,
.introduction-inn-box-right  .upper-txt {
text-align: center;
font-size: 1.8rem;
line-height: 1.8rem;
color: #f86f84;
font-weight: bold;
}

.introduction-inn-box-left .lower-txt ,
.introduction-inn-box-right  .lower-txt {
text-align: center;
padding-top: 8px;
font-size: 1.0rem;
line-height: 1.0rem;
color: #f86f84;
font-weight: bold;
}

/* ----------------------------------------------------
introduction-list
---------------------------------------------------- */

.introduction-list {
counter-reset: number;
}

.introduction-list li {
margin-bottom: 16px;
text-indent: -3.2rem;
padding-left: 3.2rem;
font-size: 1.6rem;
letter-spacing: 0;
line-height: 2.4rem;
color: #f86f84;
font-weight: bold;
}

.introduction-list li:before {
counter-increment: number;
content: counter(number);
background: #f86f84;
display: inline-block;
width: 2.4rem;
height: 2.4rem;
text-align: center;
border-radius: 50%;
color: #fff;
margin-right: 0.8rem;
text-indent: 0;
}

/* ----------------------------------------------------
introduction-frame
---------------------------------------------------- */

.introduction-frame {
border: 1px solid #f48b9b;
margin-top: 8px;
margin-bottom: 24px;
padding: 14px 14px 12px;
border-radius: 8px;
}

.introduction-frame .txt {
font-size: 1.4rem;
line-height: 2.4rem;
font-weight: bold;
text-align: center;
}

/* ----------------------------------------------------
introduction-btn
---------------------------------------------------- */

.introduction-btn {
margin-top: 32px;
margin-bottom: 32px;
}

.introduction-btn-list li {
margin-bottom: 16px;
}

/* ====================================================
notice
*  ==================================================== */

/* ----------------------------------------------------
notice-frame
---------------------------------------------------- */

.notice-frame {
border: 1px solid #f48b9b;
margin-top: 24px;
margin-bottom: 24px;
padding: 32px 16px 16px;
border-radius: 8px;
}

.notice-frame .notice-frame-day {
margin-bottom: 16px;
font-size: 1.6rem;
letter-spacing: 0;
line-height: 1.6rem;
color: #000;
font-weight: bold;
}

.notice-frame .notice-frame-txt {
margin-bottom: 16px;
font-size: 1.6rem;
letter-spacing: 0;
line-height: 2.4rem;
color: #000;
font-weight: bold;
}

.notice-frame .notice-frame-txt a:link {
color: #f86f84;
text-decoration: underline;
}

.notice-frame .notice-frame-txt a:visited {
color: #f86f84;
text-decoration: underline;
}

.notice-frame .notice-frame-txt a:hover {
color: #f86f84;
text-decoration: underline;
}

.notice-frame .notice-frame-txt a:active {
color: #f86f84;
text-decoration: underline;
}

/* ====================================================
cashback
*  ==================================================== */

/* ----------------------------------------------------
cashback
---------------------------------------------------- */

.cashback .txt {
margin-top: 8px;
margin-bottom: 24px;
}

.cashback .htxt {
font-weight: bold;
text-align: center;
}

/* ----------------------------------------------------
cashback-btn
---------------------------------------------------- */

.cashback-btn-list li {
margin-bottom: 16px;
}

/* ====================================================
backhome
*  ==================================================== */

.backhome {
box-sizing: border-box;
margin: 40px auto;
padding-right: 16px;
padding-left: 16px;
}

/* ====================================================
decoration
*  ==================================================== */

.font-pink {
color: #f86f84;
}