/* Legacy top.js passes duration as a string: jQuery uses its 400ms default and swing easing. */
#categoryBox { transition: height 400ms cubic-bezier(.37, 0, .63, 1); }
#categoryBox.close.is-open { height: 168px; }
.news-row { border-bottom: 1px solid #ddd; padding: .7em 0; }
.news-row time { display: inline-block; margin-left: 1em; }
.article-body { margin: 1em 0; overflow-wrap: anywhere; }
.article-body img { max-width: 100%; height: auto; }
nav[aria-label="ニュースカテゴリ"], nav[aria-label="ページ送り"] { display: flex; gap: .8em; margin: 1em 0; }
#newsTab a { display: block; }
#newsTab a img { vertical-align: top; }
#newsTab a:focus:not(:focus-visible) { outline: 0; }
#newsTab a:focus-visible { outline: 2px dotted #09f; outline-offset: -2px; }
#topNewsarea > #newsEvent,
#topNewsarea > #newsMaintenance { border: 0; }
#topNewsarea .m2-news-list .news-list-row,
#btmContentsMain .m2-news-list .news-list-row { display: flex; align-items: center; gap: 5px; min-height: 36px; padding: 7px 0 8px; box-sizing: border-box; }
#topNewsarea .m2-news-list .news-list-category,
#btmContentsMain .m2-news-list .news-list-category { flex: none; width: 65px; margin: 0; }
.m2-news-list .news-list-category img { display: block; width: 65px; height: 20px; }
#topNewsarea .m2-news-list .news-list-title,
#btmContentsMain .m2-news-list .news-list-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #09f; }
#topNewsarea .m2-news-list .news-list-date,
#btmContentsMain .m2-news-list .news-list-date { flex: none; float: none; white-space: nowrap; }
#topNewsarea .news_more { padding-top: 12px; }
#newsHeader { display: grid; grid-template-columns: 65px minmax(0, 1fr) max-content; align-items: start; gap: 10px; height: auto !important; }
#newsHeader .news-category { float: none; margin: 0; }
#newsHeader .news-title { float: none; width: auto !important; min-width: 0; padding: 0; overflow-wrap: anywhere; }
#newsHeader .news-date { float: none; padding: 0 !important; white-space: nowrap; }
.news-snsgroup a.news-post-button { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 20px; padding: 0 8px; border: 1px solid #000; border-radius: 999px; background: #000; color: #fff; font: 500 12px/18px Arial, sans-serif; text-decoration: none; vertical-align: middle; white-space: nowrap; }
.news-snsgroup a.news-post-button:hover { background: #333; border-color: #333; color: #fff; }
.news-snsgroup a.news-post-button:focus-visible { outline: 2px solid #09f; outline-offset: 2px; }
.news-post-button svg { flex: none; }
@media (max-width: 800px) {
    #topNewsarea .m2-news-list .news-list-row,
    #btmContentsMain .m2-news-list .news-list-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
    #topNewsarea .m2-news-list .news-list-date,
    #btmContentsMain .m2-news-list .news-list-date { justify-self: end; margin-top: 0; }
    .m2-news-list .news-list-category::after,
    .m2-news-list .news-list-date::before { content: none; }
    #newsHeader { grid-template-columns: minmax(0, 1fr); }
    #newsHeader .news-date { justify-self: end; }
}
.m2-banners { display: flex; width: 520px; max-width: 100%; height: 172px; margin: 0 0 8px 5px; padding: 6px; box-sizing: border-box; gap: 6px; background: url('/img/top/rotate_bg.png') no-repeat; }
.m2-banner-slides { flex: 1; min-width: 0; }
.m2-banner-slide > img { width: 100%; height: 160px; object-fit: contain; }
.m2-banner-slide[hidden] { display: none; }
.m2-banner-buttons { flex: none; width: 112px; margin-top: -3px; }
.m2-banner-thumbs { width: 112px; height: 140px; overflow: hidden; }
.m2-banner-thumb-list { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.m2-banner-thumb-list button { flex: none; width: 112px; height: 45px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; opacity: .3; }
.m2-banner-thumb-list button:hover { opacity: .6; }
.m2-banner-thumb-list button[aria-pressed="true"] { opacity: 1; }
.m2-banner-thumb-list button { transition: opacity 200ms cubic-bezier(.37, 0, .63, 1); }
.m2-banner-thumb-list img { display: block; width: auto; max-width: 112px; height: 45px; object-fit: contain; }
.m2-banner-arrow { display: block; width: 110px; height: 10px; margin: 0; padding: 0; border: 0; background: transparent center no-repeat; cursor: pointer; }
.m2-banner-up { background-image: url('/img/top/rotate_up.png'); }
.m2-banner-up:hover, .m2-banner-up:focus-visible { background-image: url('/img/top/rotate_up_rollover.png'); }
.m2-banner-down { background-image: url('/img/top/rotate_down.png'); }
.m2-banner-down:hover, .m2-banner-down:focus-visible { background-image: url('/img/top/rotate_down_rollover.png'); }
.m2-banner-arrow:disabled { cursor: default; opacity: .5; }
.m2-banner-buttons button:focus-visible { outline: 2px solid #fc6; outline-offset: -2px; }
#mobile-navigation { border: 1px solid #777; padding: 24px; background: #fff; }
#mobile-navigation::backdrop { background: #0008; }
@media (max-width: 799px) { .m2-banners { margin-left: 0; } }
@media (max-width: 800px) {
    #contentsC .m2-banners { display: block; margin: 0 auto; padding: 0; }
    #contentsC .m2-banner-buttons { display: none; }
    #contentsC .m2-banner-slides { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 95%; height: 100%; margin: 0 auto; padding: 1%; }
    #contentsC .m2-banner-slide:not([hidden]) { display: block; max-width: 100%; }
    #contentsC .m2-banner-slide > img { width: auto; height: auto; max-width: 100%; }
}

/* The game launcher keeps its 707 x 359 layout at every browser width. */
#patchBody .m2-banners { margin: 0 0 0 5px; }
#patchBody #NewsBox .news-list-row { position: relative; height: 26px; box-sizing: border-box; line-height: 20px; }
#patchBody #NewsBox .news-list-category img { display: block; width: 65px; height: 20px; }
#patchBody #NewsBox .news-list-title { width: 330px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #09f; }
#patchBody #NewsBox .news-list-date { position: absolute; top: 2px; right: 0; float: none; width: 108px; white-space: nowrap; text-align: right; }
#patchBody #NewsBox .news-icon-new { float: none; }
#patchBody #NewsBox p { color: #333; }

.regist-back-button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.regist-validation-icon { vertical-align: middle; }
.regist-captcha-refresh { border: 0; padding: 0; background: transparent; cursor: pointer; vertical-align: baseline; line-height: 0; }
.regist-captcha-refresh img { display: block; }
.regist-captcha-refresh:focus-visible { outline: 2px solid #09f; outline-offset: 2px; }
.m2-field-error { clear: both; box-sizing: border-box; overflow-wrap: anywhere; }
#regist_box { display: flow-root; }
#regist_accform .form_error { box-sizing: border-box; }

.m2-content-layout #btmContentsCR { margin-top: 20px; }
.fanbanner_htmltag { height: 7em; overflow: auto; }
.copyright_htmltag { height: 8em; overflow: auto; }

#support_form input[type=email] { border: 1px solid #ccc; width: 300px; }

.m2-image-dialog { position: absolute; inset: auto 0 auto; box-sizing: border-box; max-width: none; max-height: none; margin: 0 auto; padding: 10px; border: 0; border-radius: 3px; overflow: visible; background: #fff; color: #000; box-shadow: 0 0 25px #000; transition: width .25s ease, height .25s ease, top .25s ease; animation: m2-image-fade .25s linear; }
.m2-image-dialog::backdrop { background: rgb(0 0 0 / 75%); animation: m2-image-fade .25s linear; }
.m2-image-content { position: relative; overflow: hidden; transition: opacity .25s linear .25s; }
.m2-image-loading .m2-image-content { opacity: 0; }
.m2-image-dialog img { display: block; max-width: none; max-height: none; }
.m2-image-meta { box-sizing: border-box; padding: 10px 0 0; }
.m2-image-meta p { margin: 0; padding: 15px; color: #666; font-size: 14px; }
.m2-image-dialog .m2-image-close { position: absolute; top: -7.5px; right: -7.5px; box-sizing: border-box; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 100%; overflow: hidden; background: #fff; cursor: pointer; font: inherit; }
.m2-image-close::before { position: absolute; inset: 0; content: "\00d7"; color: #333; font-size: 22px; font-weight: 700; line-height: 30px; text-align: center; }
.m2-image-close:focus-visible { outline: 2px solid #09f; outline-offset: 2px; }
.m2-image-spinner { position: absolute; inset: 0; width: 50px; height: 50px; margin: auto; }
.m2-image-spinner::before, .m2-image-spinner::after { position: absolute; inset: 0; box-sizing: border-box; border: 5px solid rgb(51 51 51 / 25%); border-radius: 110%; content: ''; }
.m2-image-spinner::after { border-color: transparent; border-top-color: #333; animation: m2-image-spin .75s linear infinite; }
.m2-image-error { box-sizing: border-box; margin: 0; padding: 25px; color: #900; font-size: 14px; text-align: center; text-transform: uppercase; }
.m2-image-dialog.m2-image-mobile { position: fixed; inset: 0; padding: 40px 0 0; border-radius: 0; background: #111; }
.m2-image-mobile::backdrop { background: #111; }
.m2-image-mobile .m2-image-content { height: 100%; }
.m2-image-mobile .m2-image-close { top: 0; right: 0; width: 40px; height: 40px; border-radius: 0; background: #111; }
.m2-image-mobile .m2-image-close::before { color: #ccc; font-size: 28px; line-height: 40px; }
.m2-image-mobile .m2-image-meta { position: absolute; right: 0; bottom: 0; left: 0; padding: 15px 65px; background: #111; }
.m2-image-mobile .m2-image-meta p { padding: 0; color: #eee; }
.m2-image-mobile .m2-image-spinner::before { border-color: rgb(153 153 153 / 25%); }
.m2-image-mobile .m2-image-spinner::after { border-top-color: #999; }
.m2-image-closing, .m2-image-closing::backdrop { animation: m2-image-fade-out .25s linear forwards; }
@keyframes m2-image-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m2-image-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes m2-image-spin { to { transform: rotate(360deg); } }
.faq-back { text-align: center; margin: 15px 0; }
#btmContentsMain a.faq-back-link { display: inline-block; border: 1px solid #aaa; border-radius: 3px; padding: 5px; color: #000; background: #f5f5f5; }
.member-logout-form { display: inline; margin: 0; }
.member-logout-form button { border: 0; padding: 0; background: transparent; color: #000; font: inherit; line-height: inherit; cursor: pointer; }
.member-logout-form button:hover { color: #09f; }
.member-logout-form button:focus-visible { outline: 2px solid #09f; outline-offset: 2px; }

#mypage_accform input[type=email] { border: 1px solid #ccc; padding: 3px; }

.member-confirm-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.member-confirm-actions .regist-back-button img { display: block; }