@charset "UTF-8";

* {
    box-sizing: border-box;
}

html, body, p, h1, h2, h3, h4, ul, ol {
    margin: 0;
    padding: 0;
}

body {
    font-size: 18px;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-feature-settings: 'palt';
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

img {
    vertical-align: top;
}

a {
    color: #1763ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    margin-left: 1em;
    list-style-position: outside;
}

a.icon {
    font-size: 16px;
}

.icon::before {
    margin-right: 3px;
    font-family: FontAwesome, serif;
    text-decoration: none;
    display: inline-block;
}

.icon-arrow::before {
    content: '\f0a9';
    color: #ffb320;
}

.nav-login {
    width: 100%;
    height: 30px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    background: #0d5ed7;
    border-bottom: 1px solid #ffffff;
}

.nav-login .inner {
    max-width: 960px;
    max-height: 100%;
    margin: auto;
    text-align: right;
}

.nav-login a {
    margin-left: 20px;
    color: #ffffff;
    font-size: 12px;
    line-height: 30px;
}

.nav-login .icon-arrow::before {
    color: #ffffff;
}

.nav-login img {
    max-height: 29px;
}

.header {
    min-width: 960px;
    margin: 0 0 20px;
    position: relative;
    background-image: linear-gradient(to bottom, #0475ea 4%, #2194ff 51%, #e0f7db);
}

.nav-login + .header {
    padding-top: 30px;
}

.header.fifth {
    background-image: linear-gradient(to bottom, #d40000, #ff900e 75%, #fff1cb);
}

.header .inner {
    max-width: 960px;
    margin: auto;
}

.header .kv {
    text-align: center;
}

.header .kv img {
    max-width: 100%;
    min-width: 960px;
}

.header .sns {
    width: 960px;
    margin: auto;
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    text-align: right;
}

.header .sns iframe {
    border: 1px solid #ffffff !important;
    border-radius: 3px;
}

.header .sub-nav {
    padding: 25px 0;
    background: #dfe9f8;
    text-align: center;
}

.header .sub-nav .inner {
    position: relative;
}

.header .sub-nav a {
    margin-right: 10px;
    padding-right: 10px;
    display: inline-block;
    border-right: 1px solid #1846de;
    color: #1846de;
    font-size: 20px;
    font-weight: bold;
    line-height: 1em;
}

.header .sub-nav a:last-of-type {
    margin-right: 0;
    border-right: 0;
}

.header .term {
    padding: 15px;
    background: url("https://cdn-image.alphapolis.co.jp/manga_derby/header-turf.png") repeat;
    text-align: center;
}

.header .term ul {
    list-style: none;
}

.header .term li {
    margin-right: 30px;
    padding: 6px 30px;
    display: inline-block;
    background: #ffffff;
    border-radius: 20px;
    font-size: 20px;
    font-weight: bold;
}

.header .term li:last-child {
    margin-right: 0;
}

.header .term li b {
    color: #ea0000;
}

.header .checker {
    height: 19px;
    background: url("https://cdn-image.alphapolis.co.jp/manga_derby/header-checker.gif") repeat-x;
}

.header .checker-fifth {
    height: 20px;
    background: url("https://cdn-image.alphapolis.co.jp/manga_derby/header-checker1906.gif") repeat-x;
}

.header .separater {
    height: 10px;
    background-color: #0000a5;
}

.header .nav {
    padding: 11.5px;
    background: #1762d4;
    text-align: center;
}

.header .nav a {
    padding: 0 8px;
    border-right: 1px solid #ffffff;
    color: #ffffff;
    line-height: 1em;
    text-decoration: none;
}

.header .nav a:last-child {
    border-right: 0;
}

.header .bet-count {
    padding: 15px;
    background: #0d5ed7;
    color: #ffffff;
    font-size: 18px;
}

.header .bet-count .inner {
    width: 900px;
}

.header .bet-count .total,
.header .bet-count .condition {
    margin-bottom: 8px;
    padding-left: 5px;
    border-left: 11px solid #fff715;
    line-height: 1;
}

.header .bet-count .total b,
.header .bet-count .condition b {
    font-size: 26px;
    color: #fff715;
}

.header .bet-count .total {
    float: left;
}

.header .bet-count .condition {
    float: right;
}

.header .bet-gauge {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    width: 900px;
    padding: 12px 20px;
    border-radius: 5px;
    background: #ffffff;
}

.header .bet-gauge__bar-wrap {
    width: 800px;
    height: 26px;
    overflow: hidden;
    border-radius: 5px;
}

.header .bet-gauge__bar {
    max-width: 100%;
    height: 100%;
    transform-origin: left;
    transition: all 2s;
    background-image: linear-gradient(to right, #feb2d4, #ff439b);
    background-repeat: no-repeat;
    background-size: 800px;
    text-align: right;
}

.header .about-bet {
    text-align: right;
}

.header .about-bet a {
    color: #ffffff;
}

.GoToExplanation.bonus {
    position: absolute;
    top: 80px;
    right: 17px;

}

.bonustime .GoToExplanation {
    font-weight: normal;
}

.sns {
    height: 20px;
    margin-top: 20px;
    text-align: center;
}

.sns a {
    text-decoration: none;
}

.sns .twitter-share-button {
    vertical-align: top;
}

.sns .fb-like {
    height: 20px;
}

.sns .fb-like span {
    vertical-align: top !important;
}

.sns.space {
    padding-top: 60px;
}

.sns-count-start .sns {
    width: 960px;
    height: auto;
    margin: auto;
    margin-bottom: 20px;
    text-align: right;
}

.content {
    min-width: 960px;
    overflow: hidden;
}

.content .button-group {
    text-align: center;
}

.content .button-group .button {
    width: 900px;
    max-width: 100%;
    padding: 25px 25px;
    display: inline-block;
    border: solid 1px #ffffff;
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 24px;
    font-weight: bold;
}

.content .button-group .button:hover {
    opacity: .8;
    color: #fff;
    text-decoration: none;
}

.content .button-group .manga-button {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.75rem;
    box-shadow: inset 0 0 0 2px #fff;
    border: solid 1px #dfcfd0;
    background-image: linear-gradient(to bottom, #f16363, #e84040);
}

.content .button-group .manga-button::before {
    margin-right: 5px;
    content: " ";
    display: inline-block;
    width: 35px;
    height: 35px;
    background: url('https://cdn-image.alphapolis.co.jp/manga_derby/icon_comic.png');
    background-size: contain;
    vertical-align: middle;
}

.wrapper {
    width: 960px;
    margin: 0 auto;
}

.section {
    margin-top: 40px;
}

.section:first-child {
    margin-top: 0;
}

.section h2 {
    font-family: HiraKakuProN-W6, serif;
    margin-bottom: 40px;
    padding: 10px;
    background-image: linear-gradient(
            -45deg, #a7cffd 10%, #e7f2ff 10%, #e7f2ff 50%, #a7cffd 50%, #a7cffd 60%, #e7f2ff 60%, #e7f2ff);
    background-size: 8px 8px;
}

.section h2 img {
    margin: auto;
    display: block;
}

.section h2.fifth-header {
    color: #b40000;
    background: none;
    border-bottom: 7px solid #d40708;
    font-size: 26px;
    text-align: center;
    line-height: 1;
    padding: 0 10px 4px;
}

.section .inner {
    padding: 0 30px;
}

.section .inner.fifth li {
    font-family: Meiryo, serif;
    font-size: 14px;
    text-align: justify;
    line-height: 1.57;
}

.section h3 {
    padding-left: 5px;
    border-left: 5px solid #d40708;
    font-size: 18px;
    line-height: 24px;
}

.section.schedule.fifth {
    margin-top: 40px;
}

.tabs {
    margin-bottom: 20px;
    display: flex;
}

.tab {
    width: 50%;
    background: #efefef;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: background .5s;
}

.tab:hover {
    background: #cccccc;
}

.tab.selected {
    position: relative;
    background: #e80000;
    color: #ffffff;
}

.tab.selected::after {
    width: 0;
    height: 0;
    margin: auto;
    position: absolute;
    bottom: -10px;
    right: 0;
    left: 0;
    content: "";
    border-top: 10px solid #e80000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.login {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ecc735;
}

.login .ribbon {
    margin-bottom: 20px;
    padding: 14px 10px;
    display: block;
    position: relative;
    background: #ffe508;
    font-size: 22px;
    line-height: 1;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 #ffffff;
}

.login .ribbon::before,
.login .ribbon::after {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    content: "";
}

.login .ribbon::before {
    left: 0;
    border-left: 16px solid #ffffff;
}

.login .ribbon::after {
    right: 0;
    border-right: 16px solid #ffffff;
}

.login .input {
    width: 640px;
    margin: auto;
}

.login label {
    display: block;
}

.login .email {
    padding-bottom: 10px;
}

.login input[type=email],
.login input[type=password] {
    width: 100%;
    padding: 5px;
    background: #fdffe5;
    border: 1px solid #cccccc;
}

.login .submit {
    text-align: center;
}

.login .submit input {
    padding: 15px 40px;
    background: #ffba25;
    border: 1px solid #ff8a0c;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: background .5s;
}

.login .submit input:hover {
    background: #ff8a0c;
}

.login .reminder,
.login .register {
    width: 640px;
    margin: auto;
}

.login .reminder {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: right;
}

.login .register {
    margin-top: 10px;
    text-align: center;
}

.my-contents {
    margin-bottom: 20px;
    padding: 20px 30px;
    border: 1px solid #edc93b;
}

.my-contents h2 {
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    font-size: 18px;
}

.my-contents h2 .name {
    color: #ff8106;
}

.my-contents .my-notes {
    margin-bottom: 10px;
    float: left;
    font-size: 14px;
    line-height: 27px;
}

.my-contents .my-content {
    margin-top: 10px;
    clear: both;
    overflow: hidden;
    border: 1px solid #d5d5d5;
}

.my-contents .my-content h3 {
    padding: 0 10px;
    float: left;
    background: #ff489d;
    color: #ffffff;
    font-size: 20px;
    line-height: 50px;
}

.my-contents .my-content > div {
    padding: 0 10px;
    display: flex;
    white-space: nowrap;
    line-height: 50px;
}

.my-contents .my-content .entried {
    background: #fffcec;
}

.my-contents .my-content .canceled {
    background: #ece9e9;
}

.my-contents .my-content .title {
    padding-right: 10px;
    flex-grow: 1;
    overflow: hidden;
    color: #307eff;
    font-weight: bold;
    text-overflow: ellipsis;
}

.my-contents .my-content .title a {
    color: #307eff;
}

.my-contents .my-content .current-rank {
    padding-right: 10px;
    font-size: 16px;
    font-weight: bold;
}

.my-contents .my-content .current-rank b {
    color: #ff7805;
}

.my-contents .my-content .current-bet {
    font-size: 16px;
    font-weight: bold;
}

.my-contents .my-content .current-bet b {
    color: #e80000;
}

.next-bonustime {
    margin-bottom: 20px;
    padding: 15px;
    border: 6px solid #ffaf24;
    font-size: 30px;
    text-align: center;
    position: relative;
}

.next-bonustime b {
    color: #ff0000;
}

.bonustime {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

.bonustime p {
    padding: 15px;
    border: 6px solid #e4200d;
    color: #ff0000;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}

.bonustime p b {
    font-size: 32px;
}

.about-bonus {
    text-align: right;
    font-weight: normal;
}

.about-bonustime {
    text-align: right;
}

.entries {
    margin-top: 20px;
}

.entries h2 {
    background: linear-gradient(to right, #7d0303 0%, #d50909 50%, #7d0303 100%);
    color: #ffffff;
    font-size: 35px;
    text-align: center;
}

.entries h2::after {
    width: 100%;
    height: 2px;
    display: block;
    position: relative;
    top: -1px;
    background: #ffffff;
    content: "";
}

.entries .paginator {
    margin-top: 20px;
    margin-bottom: 30px;
    color: #545454;
    text-align: center;
}

.entries .paginator .current,
.entries .paginator a {
    width: 30px;
    margin-left: 6px;
    display: inline-block;
    border: 1px solid #cccccc;
    color: #545454;
    text-align: center;
    line-height: 30px;
}

.entries .paginator .current {
    font-weight: bold;
}

.entries .entry {
    padding: 20px 0;
    display: flex;
    border-bottom: 1px solid #cccccc;
}

.entries .rank {
    width: 100px;
    position: relative;
    text-align: center;
}

.entries .rank span {
    height: 153px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #ff7805;
    font-size: 20px;
    font-weight: bold;
}

.entries .rank .normal {
    height: 30px;
}

.entries .rank span img {
    margin-top: 10px;
}

.entries .entry .cover {
    width: 106.89px;
    margin-right: 12px;
    position: relative;
    outline: 1px solid #cccccc;
}

.entries .entry .cover img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.entries .entry .info {
    width: 500px;
}

.entries .entry .info .tag span {
    padding: 0 13px;
    display: inline-block;
    color: #ffffff;
    font-size: 11px;
    line-height: 20px;
}

.entries .entry .info .tag.men span {
    background: #1b5ab9;
}

.entries .entry .info .tag.women span {
    background: #ff3c58;
}

.entries .entry .info .tag.boy span {
    background: #3692f8;
}

.entries .entry .info .tag.girl span {
    background: #f87eaf;
}

.entries .entry .info .tag.bl span {
    background: #9330db;
}

.entries .entry .info .title {
    padding-top: 10px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    text-overflow: ellipsis;
}

.entries .entry .info .author {
    font-size: 14px;
}

.entries .entry .bet {
    padding-left: 20px;
    flex-grow: 1;
    text-align: right;
    white-space: nowrap;
}

.entries .entry .bet .total-bonus-pt {
    font-size: 26px;
}

.entries .entry .bet .total-bonus-pt b {
    color: #e80000;
}

.entries .entry .bet .total-bet {
    font-size: 16px;
}

.entries .entry .bet .total-bet b {
    color: #ff338e;
    font-size: 22px;
}

.entries .entry .read-button {
    padding-top: 15px;
}

.entries .entry .cheer-button {
    padding-top: 15px;
}

.entries .entry .bet-button {
    padding-top: 28px;
    padding-left: 10px;
}

.entries .entry .read-button a,
.entries .entry .cheer-button a,
.entries .entry .bet-button a {
    width: 170px;
    display: inline-block;
    border-radius: 3px;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    line-height: 48px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.entries .entry .read-button a {
    background: linear-gradient(to bottom, #ffa442, #ff7501);
    border: 1px solid #ff4e08;
}

.entries .entry .read-button a:active {
    background: linear-gradient(to top, #ffa442, #ff7501);
}

.entries .entry .cheer-button a {
    max-width: 100%;
    padding: 5px;
    background: linear-gradient(to bottom, #5dbbff, #2c8bfc);
    border: 1px solid #0096f4;
    font-size: 18px;
    line-height: 19px;
    white-space: normal;
}

.entries .entry .cheer-button a:active {
    background: linear-gradient(to bottom, #2c8bfc, #5dbbff);
}

.entries .entry .bet-button a {
    background: linear-gradient(to bottom, #ff80b9, #ff419b);
    border: 1px solid #ff65c0;
}

.entries .entry .bet-button a:active {
    background: linear-gradient(to top, #ff80b9, #ff419b);
}

.reader {
    margin-top: 30px;
}

.reader.fifth {
    margin-top: 22px;
}

.overlay {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: rgba(0, 0, 0, .3);
    opacity: 0;
    transition: opacity .5s;
}

.overlay.open {
    display: block;
    opacity: 1;
}

.dialog {
    display: none;
    opacity: 0;
}

.dialog.open {
    display: block;
    opacity: 1;
}

.dialog form {
    width: 400px;
    height: 400px;
    margin: auto;
    padding: 30px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    overflow: auto;
    background: #ffffff;
    font-size: 26px;
    white-space: normal;
    text-align: center;
}

.dialog form .close {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    background: #737373;
    cursor: pointer;
    color: #ffffff;
}

.dialog form .close::before,
.dialog form .close::after {
    width: 15px;
    height: 2px;
    margin: auto;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #ffffff;
}

.dialog form .close::before {
    transform: rotate(-45deg);
}

.dialog form .close::after {
    transform: rotate(45deg);
}

.dialog form p {
    font-size: 20px;
}

.dialog form .title {
    padding: 20px 0;
}

.dialog form .vote-count {
    padding-bottom: 30px;
    color: #ff3d9d;
    font-weight: bold;
}

.dialog form .buttons {
    padding-bottom: 20px;
}

.dialog form button {
    margin-right: 20px;
    padding: 0 40px;
    display: inline-block;
    background: #8f8f8f;
    border: 1px solid #d5d5d5;
    color: #ffffff;
    font-size: 18px;
    line-height: 50px;
    white-space: nowrap;
    cursor: pointer;
}

.dialog form button.submit {
    margin-right: 0;
    background: #ff489d;
    border-color: #d5d5d5;
}

.dialog form ul {
    padding-bottom: 30px;
    clear: both;
    font-size: 14px;
    text-align: left;
}

.abstract {
    margin-top: 20px;
}

.abstract.fifth {
    margin-top: 40px;
}

.abstract h2 {
    margin-bottom: 18px;
}

.abstract .image {
    padding-top: 8px;
}

.abstract .image.author.fifth {
    margin-bottom: 30px;
}

.abstract .image img {
    margin-left: -125px;
}

.schedule .image img {
    margin-left: -127px;
}

.explanation {
    font-size: 16px;
    margin-top: 30px;
}

.notice {
    margin-bottom: 40px;
    position: relative;
    font-size: 16px;
}

.notice table {
    width: 100%;
    border-collapse: collapse;
}

.notice tr:first-child th,
.notice tr:first-child td {
    padding-top: 0;
    border-bottom: 1px solid #8f8f8f;
}

.notice tr:last-child th,
.notice tr:last-child td {
    padding-bottom: 0;
}

.notice th {
    padding: 30px 30px 30px 0;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.notice td {
    padding: 30px 0;
}

.notice img.character {
    position: absolute;
    right: -40px;
    bottom: 0;
}

.notice img.character.fifth {
    position: absolute;
    right: -40px;
    bottom: -7px;
}

p.attention {
    text-indent: -1em;
    margin-left: 1em;
    font-family: Meiryo, serif;
    font-size: 14px;
    text-align: justify;
    line-height: 1.57;
}

a.page-top-icon {
    width: 82px;
    height: 87px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    transition: right .5s, bottom .5s, opacity .5s .5s;
}

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

.teaser-main {
    margin: 40px auto;
    text-align: center;
}

.past-derby {
    text-align: center;
}

.past-derby-button {
    display: inline-block;
    height: 56px;
    border: solid 1px #cccccc;
    margin: 0 auto 40px;
    padding: 8px 35px;
    background-image: linear-gradient(to top, #1059ff, #2c9cea);
    cursor: pointer;
    transition: background .5s;
}

.past-derby-button a {
    color: #ffffff;
    font-family: Meiryo, serif;
    font-size: 26px;
    font-weight: bold;
    text-decoration: none;
}

.past-derby-button:hover {
    opacity: .8;
}

.past-derby.fifth .past-derby-button {
    height: auto;
    margin-top: 40px;
    padding: 16px;
    display: block;
    background-image: linear-gradient(to top, #343ad9, #335aff);
    border: 4px solid rgba(255, 255, 255, 0.5);
}

.past-derby.fifth .past-derby-button a {
    display: block;
    font-size: 30px;
}

.footer {
    min-width: 960px;
    padding: 20px 0;
    background: #000000;
    text-align: center;
}

.footer img {
    max-width: 100%;
}

.footer .copyright {
    padding-top: 10px;
    color: #eeeeee;
    font-size: 12px;
}