@charset "UTF-8";
.owabi { position: relative; z-index: 1; width: 90%; max-width: 600px; margin: 20px auto; padding: 10px 14px; border: 4px double red; box-sizing: border-box; font-size: 16px; background-color: #fff; }
.owabi p:first-of-type { margin-bottom: .5em; text-align: center; }

/* ----- header ----- */
.header { padding: 20px 0 22px; background: url(./img/header_bg.png) no-repeat center top; background-size: 1015px 404px; }
.header .titleSub { width: 681px; margin: 0 auto 14px; }
.header .title { width: 668px; margin: 0 auto 18px; }
.header .period { position: relative; width: 571px; height: 100px; margin: 0 auto; line-height: 1; background: url(./img/header_period_bg.png) no-repeat 0 0; background-size: 571px 100px; }
.header .period .kikan { position: absolute; top: 15px; left: 0; width: 100%; text-align: center; color: #fff; font-size: 33px; text-shadow: 3px 3px 1px #f27815, -3px 3px 1px #f27815, 3px -3px 1px #f27815, -3px -3px 1px #f27815,3px 3px 1px #f27815, -3px 3px 1px #f27815, 3px -3px 1px #f27815, -3px -3px 1px #f27815; }
.header .period .kikan .small { font-size: .727em; }
.header .period .kikan .large { font-size: 1.24em; }
.header .period .note { position: absolute; left: 0; bottom: 5px; width: 100%; text-align: center; color: #c46446; font-size: 16px; }
@media screen and (max-width: 768px) { .header { padding: 2% 0; background-size: 100% auto; }
  .header .titleSub { width: 70%; margin-bottom: 5%; }
  .header .title { width: 68%; margin-bottom: 5%; }
  .header .period { width: 90%; height: auto; padding-top: 17%; background-size: 100% auto; }
  .header .period .kikan { top: 15%; font-size: 5.2vw; }
  .header .period .kikan .small { font-size: .727em; }
  .header .period .kikan .large { font-size: 1.24em; }
  .header .period .note { font-size: 2.8vw; bottom: 6%; } }

/* ----- 説明 ----- */
.campaignCatch { margin-bottom: 3.4%; text-align: center; }
.campaignCatch h2 { margin-bottom: 4.1%; color: #ff331a; font-size: 28px; font-weight: bold; }
.campaignCatch p { line-height: 1.5; }
.campaignCatch p:first-of-type { margin-bottom: 2%; font-size: 20px; }
@media screen and (max-width: 768px) { .campaignCatch h2 { font-size: 6vw; line-height: 1.2; }
  .campaignCatch p { text-align: left; }
  .campaignCatch p:first-of-type { font-size: 18px; } }

.campaignPeriod { position: relative; padding: 15px 26px 20px; background-color: #ffffec; }
.campaignPeriod::after { content: ""; position: absolute; top: -33px; right: -11px; width: 114px; height: 114px; background: url(./img/period_badge.png) no-repeat 0 0; background-size: cover; }
.campaignPeriod h3 { margin-bottom: 4%; color: #0068b6; font-size: 30px; text-align: center; }
.campaignPeriod dl { display: flex; align-items: center; margin-bottom: 2.8%; }
.campaignPeriod dl dt { width: 94px; padding: 1px 0; letter-spacing: 3px; border-radius: 10px; color: #fff; font-size: 22px; text-align: center; }
.campaignPeriod dl dt span { font-size: 1.68em; vertical-align: -2px; }
.campaignPeriod dl dd { padding-left: 28px; color: #636363; font-size: 20px; }
.campaignPeriod dl dd span { font-size: 1.7em; }
.campaignPeriod dl.end dd { position: relative; }
.campaignPeriod dl.end dd::after { content: attr(data-text) ""; position: absolute; bottom: -14px; left: 28px; color: #ff331a; font-size: 12px; }
@media (max-width: 768px) { .campaignPeriod dl.end dd::after { left: 0; } }
@media (max-width: 768px) { .campaignPeriod dl.end { margin-bottom: 8%; } }
.campaignPeriod dl:nth-of-type(1) dt { background-color: #009bec; }
.campaignPeriod dl:nth-of-type(2) dt { background-color: #ff2c85; }
.campaignPeriod dl:nth-of-type(3) dt { background-color: #ff8105; }
.campaignPeriod dl:nth-of-type(4) dt { background-color: #a55ae5; }
.campaignPeriod dl:nth-of-type(5) { margin-bottom: 0; }
.campaignPeriod dl:nth-of-type(5) dt { background-color: #37b50b; }
@media screen and (max-width: 768px) { .campaignPeriod { margin-top: 20px; padding: 15px 10px 20px; }
  .campaignPeriod::after { top: -33px; right: -11px; width: 80px; height: 80px; }
  .campaignPeriod h3 { font-size: 7.5vw; text-align: left; }
  .campaignPeriod dl { display: block; margin-bottom: 4%; }
  .campaignPeriod dl dt { display: table; width: auto; margin-bottom: 2%; padding: 2px 8px; font-size: 5.5vw; }
  .campaignPeriod dl dd { padding-left: 0; font-size: 4.1vw; } }

/* ----- 賞品一覧 ----- */
.presentList { position: relative; margin-top: 100px; padding: 28px 20px 12px; border-radius: 10px; background: #f4fbff url(./img/campaign_bg.png) repeat-x 0 0; background-size: 57px auto; }
.presentList .icchy { position: absolute; top: -86px; left: 50%; width: 250px; height: auto; transform: translateX(-50%); }
.presentList .caution { color: #dc0000; padding: 3px 0 3px 32px; font-size: 14px; font-weight: bold; line-height: 1.2; background: url(./img/icon_co.png) no-repeat 6px center; background-size: 20px 17px; }
@media screen and (max-width: 768px) { .presentList { margin-top: 8%; padding: 28px 10px 12px; }
  .presentList .icchy { top: -2%; width: 40%; height: auto; transform: translateX(-58%); } }
.presentList.past { margin-top: 7%; padding-top: 14px; background-image: none; }
.presentList.past .presentTitle { align-items: flex-end; justify-content: center; margin-bottom: 8px; color: #076cbb; }
.presentList.past .presentTitle h3 { line-height: 1; }
.presentList.past .presentTitle p { margin-bottom: 2px; padding-left: .5em; }

.presentTitle { display: flex; align-items: center; justify-content: space-between; padding-left: 34px; padding-right: 16px; color: #fff; font-size: 36px; }
.presentTitle h3 { letter-spacing: 4px; }
.presentTitle h3 span { font-size: 1.39em; }
@media screen and (max-width: 768px) { .presentTitle { padding-right: 0; padding-left: 0; font-size: 7vw; } }

.presentBox { display: flex; flex-wrap: wrap; position: relative; z-index: 1; margin-bottom: 3.2%; padding: 20px 13px 20px 18px; border-radius: 5px; background-color: #fff; }
.presentBox .text { display: flex; flex-direction: column; justify-content: space-between; align-content: space-between; position: relative; width: 300px; padding-right: 32px; box-sizing: border-box; }
.presentBox .text .awards { margin-top: -10px; font-size: 25px; }
.presentBox .text .awards:first-letter { font-size: 2em; vertical-align: -3px; }
.presentBox .text .point { position: absolute; top: 4px; left: 70px; padding: 4px 8px; color: #fff; }
.presentBox .text .name { font-size: 28px; line-height: 1.2; }
.presentBox .text .name span { display: block; margin-top: 4px; font-size: .6em; }
.presentBox .text .small { line-height: 1.2; }
.presentBox .image { position: relative; width: 210px; align-self: flex-start; }
.presentBox .image .badge { position: absolute; left: -22px; bottom: -12px; width: 74px; height: 74px; }
.presentBox .image .badge p { position: absolute; top: 15px; left: 0; width: 100%; color: #fff; font-size: 34px; text-align: center; font-weight: bold; }
.presentBox .image .badge p span { display: block; font-size: 12px; font-weight: normal; }
.presentBox .noteList { font-size: .77em; }
.presentBox .noteList li { padding-left: 1em; text-indent: -1em; }
@media screen and (max-width: 768px) { .presentBox { display: block; padding: 16px 10px; }
  .presentBox .text { display: block; width: 100%; padding-right: 0; }
  .presentBox .text .point { top: 16px; left: 68px; font-size: 14px; }
  .presentBox .text .name { font-size: 24px; }
  .presentBox .text .small { margin-top: 3%; }
  .presentBox .image { margin: 3% auto 0; } }

.awards-a .awards { color: #dc0000; }
.awards-a .point { background-color: #dc0000; }
.awards-a .badge-path { fill: #dc0000; }

.awards-b .awards { color: #f07836; }
.awards-b .point { background-color: #f07836; }
.awards-b .badge-path { fill: #f07836; }

.awards-c .awards { color: #00a0e9; }
.awards-c .point { background-color: #00a0e9; }
.awards-c .badge-path { fill: #00a0e9; }

.awards-w { background: url(./img/pre_w_bg.png) repeat 0 0; background-size: 15px auto; }
.awards-w .inner { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 18px 15px; border-radius: 5px; background-color: #fff; }
.awards-w .inner .text { width: 273px; }
@media (max-width: 768px) { .awards-w .inner .text { width: 100%; } }
.awards-w .wTitle { display: flex; align-items: center; width: 100%; margin-bottom: 4px; }
@media (max-width: 768px) { .awards-w .wTitle { display: block; } }
.awards-w .wTitle .awards { margin-top: -10px; font-size: 32px; }
.awards-w .wTitle .awards:first-letter { font-size: 1.4em; vertical-align: -3px; }
.awards-w .wTitle p { margin-left: 1em; padding-bottom: 4px; border-bottom: 2px solid #0068b7; color: #0068b7; font-size: 18px; font-weight: bold; }
@media (max-width: 768px) { .awards-w .wTitle p { display: inline-block; margin-left: 0; margin-bottom: 6px; font-size: 14px; } }
.awards-w .awards { color: #0068b7; }
.awards-w .point { background-color: #0068b7; }
.awards-w .badge-path { fill: #0068b7; }

/* ----- 遊び方 ----- */
.howTo { padding-top: 20px; }
@media screen and (max-width: 768px) { .howTo { padding-top: 10px; } }

.numList { counter-reset: number; }
.numList li { position: relative; margin-bottom: 5%; padding-top: 2px; padding-left: 55px; line-height: 1.66; }
.numList li::before { counter-increment: number; content: counter(number); position: absolute; top: 0; left: 0; padding: 12px 10px 10px; border-radius: 5px; color: #fff; font-family: 'nikumaru', 'メイリオ', sans-serif; font-size: 36px; line-height: 1; background-color: #0068b7; vertical-align: bottom; }
.numList li img { margin-top: 2%; }
.numList em { color: #ff5353; font-style: normal; }

.apply { border-radius: 0 0 5px 5px; }
.apply .applyTitle { padding: 14px 0; border-radius: 5px 5px 0 0; color: #0068b7; font-size: 20px; font-weight: bold; text-align: center; background: url(./img/bg_yellow.gif) repeat 0 0; background-size: 6px; }
.apply .applyInner { padding: 14px 20px 20px; background-color: #fcfcea; }
.apply .applyInner p { line-height: 1.4; }
.apply .maruBtn a { background-color: #ff5353; }
.apply .entryTitle { margin-top: 3%; color: #ff5353; font-size: 1.25em; font-weight: bold; text-align: center; }
.apply .applyClose { margin-top: 3%; color: #ff5353; font-size: 20px; font-weight: bold; text-align: center; }
.apply .applyClose + .applyClose { margin-top: 1.5%; }
.apply .maruBtn a { margin-top: 4px; }
.apply .maruBtn:first-of-type { margin-bottom: 8%; }
@media screen and (max-width: 768px) { .apply .applyInner { padding: 10px; font-size: 14px; }
  .apply .applyClose { margin-top: 6%; font-size: 16px; font-feature-settings: 'palt'; } }

.noteList { margin-top: 4%; font-size: 16px; line-height: 1.5; }
@media screen and (max-width: 768px) { .noteList { font-size: 14px; } }

/* ----- 操作 ----- */
.operation { padding-top: 20px; }
.operation .btnList { display: flex; justify-content: space-between; }
@media screen and (max-width: 768px) { .operation { padding-top: 10px; }
  .operation .btnList { display: block; } }

.operationList { font-size: 16px; }
.operationList li { margin-bottom: 1em; line-height: 1.5; }
.operationList li h4 { color: #ff5353; font-weight: bold; }
@media screen and (max-width: 768px) { .operationList { font-size: 14px; } }

/*# sourceMappingURL=top.css.map */