@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ul, li { text-decoration: none; list-style: none; }

body { line-height: 1; }

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

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* change colours to suit your needs */
ins { /*background-color:#ff9;*/ color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

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

/* change border colour to suit your needs */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

/*#########################################################

要素関連

#########################################################*/
html { width: 100%; }

body { width: 100%; font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, sans-serif; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1rem; color: #646464; }

p { margin: 1rem auto; line-height: 1.5; }

a { -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }

a:hover { opacity: .8; }

/*#########################################################

共通パーツ

#########################################################*/
main { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; }

div.box-inner { width: 950px; margin: 0 auto; }

@media screen and (max-width: 950px) { div.box-inner { margin: 0 2%; width: 96%; } }

/*#########################################################

ヘッダー

#########################################################*/
header { height: 65px; width: 100%; background: #ffffff; }

@media screen and (max-width: 768px) { header { height: 45px; } }

header div.logo { width: 950px; margin: 0 auto; }

@media screen and (max-width: 950px) { header div.logo { width: 100%; } }

header div.logo a { width: 120px; display: block; line-height: 70px; }

@media screen and (max-width: 950px) { header div.logo a { padding-left: 2%; } }

@media screen and (max-width: 768px) { header div.logo a { width: 90px; line-height: 45px; } }

header div.logo a img { width: 100%; vertical-align: middle; }

header h1 a { font-weight: bold; display: block; font-size: 30px; text-decoration: none; color: #e37b00; }

/*#########################################################

フッター

#########################################################*/
footer { -webkit-box-sizing: border-box; box-sizing: border-box; color: #ffffff; width: 100%; background: #ff9600; position: absolute; }

footer div#footer-box { width: 950px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 30px 0 10px; }

@media screen and (max-width: 950px) { footer div#footer-box { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } }

footer div#footer-box div.logo-sub { width: 135px; }

@media screen and (max-width: 768px) { footer div#footer-box div.logo-sub { width: 15%; } }

@media screen and (max-width: 640px) { footer div#footer-box div.logo-sub { width: 25%; } }

footer div#footer-box div.logo-sub img { width: 100%; }

footer div#footer-box ul.link-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-size: 0.9375rem; }

@media screen and (max-width: 950px) { footer div#footer-box ul.link-list { margin: 30px 0; } }

@media screen and (max-width: 768px) { footer div#footer-box ul.link-list { margin: 25px 0; } }

footer div#footer-box ul.link-list li { padding: 0 20px; }

footer div#footer-box ul.link-list li a { color: #ffffff; text-decoration: none; }

footer div#footer-box ul.sns-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }

footer div#footer-box ul.sns-box li { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-right: 30px; width: 45px; }

footer div#footer-box ul.sns-box li:last-child { margin-right: 0; }

footer div#footer-box ul.sns-box li img { width: 100%; }

footer p.footer_copy { text-align: center; font-size: 0.8125rem; }

@media screen and (max-width: 768px) { footer p.footer_copy { font-size: 0.75rem; } }

/*#########################################################

TOP to

#########################################################*/
#page-top { position: fixed; bottom: 0; right: 20px; width: 87px; z-index: 100; }

@media screen and (max-width: 768px) { #page-top { right: 2%; width: 50px; } }

#page-top a { text-decoration: none; color: #fff; text-align: center; display: block; }

#page-top a img { width: 100%; }

#page-top a:hover { text-decoration: none; opacity: 1; }

/* buruburu hoverアニメ */
a.buruburu { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px transparent; box-shadow: 0 0 1px transparent; }

.buruburu:hover { -webkit-animation-name: buruburu; animation-name: buruburu; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

/* buruburu アニメ */
@-webkit-keyframes buruburu { 10% { -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  20% { -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  50% { -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  60% { -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  90% { -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0); }
  100% { -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0); } }

@keyframes buruburu { 10% { -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg); }
  20% { -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg); }
  50% { -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg); }
  60% { -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg); }
  90% { -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0); }
  100% { -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0); } }

/*#########################################################

ダウンロードボックス

#########################################################*/
div#download-box { margin: 0 auto; background: url(https://ponos.s3.amazonaws.com/information/appli/battlecats/news/5anniversary/images/common/neco_bottom.png) left bottom repeat-x, #ffffff; }

@media screen and (max-width: 768px) { div#download-box { background-size: 60%; } }

div#download-box div#download-info { width: 950px; margin: 0 auto; }

@media screen and (max-width: 950px) { div#download-box div#download-info { margin: 0 2%; width: 96%; } }

div#download-box div#download-info p { padding: 40px 0 10px; text-align: center; }

div#download-box div#download-info p img { width: 55%; }

@media screen and (max-width: 950px) { div#download-box div#download-info p img { width: 60%; } }

@media screen and (max-width: 768px) { div#download-box div#download-info p img { width: 70%; } }

@media screen and (max-width: 640px) { div#download-box div#download-info p img { width: 80%; } }

div#download-box div#download-info ul#apps-shop { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 140px; }

@media screen and (max-width: 768px) { div#download-box div#download-info ul#apps-shop { padding-bottom: 20%; } }

div#download-box div#download-info ul#apps-shop li { width: 250px; }

@media screen and (max-width: 768px) { div#download-box div#download-info ul#apps-shop li { width: 38%; } }

@media screen and (max-width: 640px) { div#download-box div#download-info ul#apps-shop li { width: 50%; } }

div#download-box div#download-info ul#apps-shop li:first-child { padding-right: 8%; }

@media screen and (max-width: 768px) { div#download-box div#download-info ul#apps-shop li:first-child { padding-right: 3%; } }

div#download-box div#download-info ul#apps-shop li img { width: 100%; }

/*#########################################################

注意事項

#########################################################*/
div#campaign-box { background: url("https://ponos.s3.amazonaws.com/information/appli/battlecats/news/5anniversary/images/common/bg_text_box.png") right bottom no-repeat, url("https://ponos.s3.amazonaws.com/information/appli/battlecats/news/5anniversary/images/common/bg_textbox.gif") left top repeat; border: 1px solid #ccc; border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; padding: 35px; width: 950px; margin: 40px auto; }

@media screen and (max-width: 950px) { div#campaign-box { width: 96%; margin: 40px 2%  30px; } }

@media screen and (max-width: 768px) { div#campaign-box { width: 96%; margin: 40px 2%  30px; padding: 4% 4% 1%; } }

div#campaign-box h3.campaign-bold { font-weight: bold; font-size: 0.875rem; line-height: 1; padding-top: 10px; }

div#campaign-box p { font-size: 0.875rem; line-height: 1.8; margin-top: 5px; }

div#campaign-box h2.detail-ttl { margin-bottom: 30px; color: #ff5400; text-align: center; font-size: 1.5625rem; }

@media screen and (max-width: 768px) { div#campaign-box h2.detail-ttl { margin-top: 20px; font-size: 1.3125rem; } }

@media screen and (max-width: 640px) { div#campaign-box h2.detail-ttl { margin-top: 10px; font-size: 1.1875rem; } }

div#campaign-box h2.detail-ttl:before { content: ''; display: inline-block; width: 26px; height: 26px; background: url("https://ponos.s3.amazonaws.com/information/appli/battlecats/news/5anniversary/images/common/icon_neko.png") left -2px no-repeat; background-size: contain; vertical-align: middle; padding-right: 20px; }

@media screen and (max-width: 640px) { div#campaign-box h2.detail-ttl:before { background: none; padding-right: 0px; width: 0px; height: 0px; } }

div#campaign-box h2.detail-ttl:after { content: ''; display: inline-block; width: 26px; height: 26px; background: url("https://ponos.s3.amazonaws.com/information/appli/battlecats/news/5anniversary/images/common/icon_neko.png") right -2px no-repeat; background-size: contain; vertical-align: middle; padding-left: 20px; }

@media screen and (max-width: 640px) { div#campaign-box h2.detail-ttl:after { background: none; padding-left: 0px; width: 0px; height: 0px; } }

/*#########################################################

プレゼントキャンペーン

#########################################################*/
div#main-img { padding-bottom: 16px; background: url("../images/bg_ground.jpg") left bottom repeat-x, url("../images/bg_cloud.jpg") left bottom repeat-x, #8bdbfe; }

@media screen and (max-width: 950px) { div#main-img { background: url("../images/bg_ground.jpg") left bottom/14% auto repeat-x, url("../images/bg_cloud.jpg") left bottom/100% auto repeat-x, #8bdbfe; padding-bottom: 20px; margin-bottom: 10px; } }

@media screen and (max-width: 950px) { div#main-img img { width: 98%; } }

div#main-img h1 { margin-bottom: -3px; text-align: center; }

/*#########################################################
keyword
#########################################################*/
div.keyword-box { margin-top: -16px; overflow: hidden; background: url("../images/bg.jpg") left top repeat; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 80px 0; }

@media screen and (max-width: 768px) { div.keyword-box { padding: 60px 0; overflow: hidden; margin-bottom: 10px; } }

div.keyword-box div.box-inner { -webkit-box-sizing: border-box; box-sizing: border-box; width: 815px; text-align: center; background-color: #ffffff; padding: 10px; text-align: center; -webkit-box-shadow: 0 0 0 4px #ffdf62, 0 0 0 8px #FFF, 0 0 0 14px #ffdf62; box-shadow: 0 0 0 4px #ffdf62, 0 0 0 8px #FFF, 0 0 0 14px #ffdf62; }

@media screen and (max-width: 950px) { div.keyword-box div.box-inner { margin: 0 auto; width: 92%; } }

@media screen and (max-width: 640px) { div.keyword-box div.box-inner { -webkit-box-shadow: 0 0 0 3px #ffdf62, 0 0 0 6px #FFF, 0 0 0 11px #ffdf62; box-shadow: 0 0 0 3px #ffdf62, 0 0 0 6px #FFF, 0 0 0 11px #ffdf62; width: 90%; } }

div.keyword-box div.box-inner div.keyword-ttl { padding: 30px 0; background: url("../images/keyword_txt_bg.png") center center no-repeat; background-size: contain; }

div.keyword-box div.box-inner div.keyword-ttl p.keyword-txt { margin: 0 auto; line-height: 0; }

div.keyword-box div.box-inner div.keyword-ttl p.keyword-txt img { width: 45%; }

@media screen and (max-width: 640px) { div.keyword-box div.box-inner div.keyword-ttl p.keyword-txt img { width: 65%; } }

@media screen and (max-width: 950px) { div.keyword-box div.box-inner div.keyword-ttl h2 img { width: 96%; } }

@media screen and (max-width: 950px) { div.keyword-box div.box-inner img.keyword { width: 96%; } }

@media screen and (max-width: 640px) { div.keyword-box div.box-inner img.keyword { width: 98%; } }

div.keyword-box div.box-inner p.entry-txt { font-size: 1.125rem; font-weight: bold; margin: 30px 0 20px; }

div.keyword-box div.box-inner a.entry-btn img { width: 55%; }

@media screen and (max-width: 950px) { div.keyword-box div.box-inner a.entry-btn img { width: 73%; } }

@media screen and (max-width: 640px) { div.keyword-box div.box-inner a.entry-btn img { width: 88%; } }

div.keyword-box div.box-inner ul.keyword-notes { padding: 40px 40px 25px; text-align: left; }

@media screen and (max-width: 768px) { div.keyword-box div.box-inner ul.keyword-notes { padding: 30px 15px 15px; } }

div.keyword-box div.box-inner ul.keyword-notes li { font-size: 0.9375rem; padding-bottom: 5px; line-height: 1.6; }

/*#########################################################
present-box
#########################################################*/
div.present-box { padding-bottom: 50px; margin-top: -16px; background: url("../images/present_bg.gif") left top repeat; }

@media screen and (max-width: 640px) { div.present-box { padding-bottom: 30px; } }

div.present-box div.present-ttl { padding-top: 50px; }

@media screen and (max-width: 768px) { div.present-box div.present-ttl { padding-top: 35px; } }

div.present-box div.present-ttl h2.pc-ttl { margin: 0 auto; text-align: center; }

@media screen and (max-width: 950px) { div.present-box div.present-ttl h2.pc-ttl img { width: 98%; } }

@media screen and (max-width: 640px) { div.present-box div.present-ttl h2.pc-ttl { display: none; } }

div.present-box div.present-ttl h2.sp-ttl { display: none; margin: 0 auto; text-align: center; }

@media screen and (max-width: 640px) { div.present-box div.present-ttl h2.sp-ttl { display: block; }
  div.present-box div.present-ttl h2.sp-ttl img { width: 94%; } }

div.present-box p.present-number { margin: 0 auto; text-align: center; }

div.present-box p.present-number img { width: 70%; }

@media screen and (max-width: 768px) { div.present-box p.present-number img { width: 84%; } }

@media screen and (max-width: 640px) { div.present-box p.present-number img { padding-top: 20px; width: 100%; } }

div.present-box ul.present-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; background: url("../images/nekoashi_bg.png") top center no-repeat; background-size: contain; }

@media screen and (max-width: 640px) { div.present-box ul.present-item { display: block; background: url("../images/nekoashi_bg_sp.png") top center repeat; background-size: contain; } }

div.present-box ul.present-item li { width: 45%; }

@media screen and (max-width: 640px) { div.present-box ul.present-item li { margin: 0 auto; text-align: center; width: 85%; } }

div.present-box ul.present-item li img { width: 100%; }

div.present-box ul.present-item li.item-b { padding-top: 80px; }

@media screen and (max-width: 768px) { div.present-box ul.present-item li.item-b { padding-top: 40px; } }

@media screen and (max-width: 768px) { div.present-box ul.present-item li.item-c { padding-top: 40px; } }

div.present-box ul.present-item li.item-d { padding-top: 85px; }

@media screen and (max-width: 768px) { div.present-box ul.present-item li.item-d { padding-top: 40px; } }

div.present-box ul.present-item li.item-e { margin-top: -30px; }

@media screen and (max-width: 768px) { div.present-box ul.present-item li.item-e { margin-top: 0px; padding-top: 40px; } }

div.present-box ul.present-item li.item-txt { padding-top: 60px; }

@media screen and (max-width: 768px) { div.present-box ul.present-item li.item-txt { padding-top: 40px; } }