@charset "utf-8";

/* ---------- 基本設定 ---------- */
body {
    font-family: "游ゴシック体", "Yu Gothic","Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    background: #08233E;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    position: relative;
    /* ヘッダの高さ分 */
    padding-top: 64px;
}

body.-fixed {
    overflow-y: hidden;
    width: 100%;
    position: fixed;
    left: 0;
}

body.-modal-open {
    overflow: hidden;
}

a {
    transition: opacity .2s ease;
}

a:active,
a:focus,
a:hover {
    opacity: .8;
}

small {
    font-size: inherit;
}

.font_small {
    font-size: 11px;
}

/* ---------- Header ---------- */
.MAHeader {
    background: #08233E;
}

.MAHeader__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 8px 16px 16px;
    background: #08233E;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: top .1s ease;
}

.MAHeader.-scrolling .MAHeader__main {
    top: 0;
}

.MAHeader__logo {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .3s ease, transform .2s ease;
}

.MAHeader.-scrolling .MAHeader__logo,
.MAHeader.-fixed .MAHeader__logo {
    opacity: 1;
    transform: translateY(0);
}

.MAHeader__logo > a > img  {
    width: 146px;
    height: auto;
}

.MAHeader__main__menu {
    display: flex;
    align-items: center ;
}

/* SNSリンク */
.MAHeader__share__menu {
    display: flex;
    align-items: center;
    transition: transform .3s ease;
}

.MAHeader__share__menu > p {
    font-size: 10px;
}

.MAHeader__share__menu > nav {
    margin-left: 16px;
}

.MAHeader__share__menu > nav > ul {
    display: flex;
    align-items: center;
}

.MAHeader__share__menu > nav > ul > li + li {
    margin-left: 16px;
}

.MAHeader__share__menu + .MAHeader__hamburger {
    margin-left: 24px;
}

.MAHeader__share__menu svg {
    width: 24px;
    height: 24px;
}

.MAHeader__share__menu svg.icon-line {
    width: 25px;
    height: 25px;
}

.MAHeader__share__menu svg.icon-x {
    width: 21px;
    height: 21px;
}

/* SNSアイコン色設定 */
.MAHeader__share__menu .icon-x,
.MAHeader__share__menu .icon-facebook,
.MAHeader__share__menu .icon-line {
    fill: #FFFFFF;
}


/* ---------- Hamburger ---------- */
.MAHeader__hamburger {
    margin-left: 18px;
}

.MAHeader__hamburger__menu {
    width: 100%;
    height: 100vh;
    margin: auto;
    padding: 104px 50px;
    background: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: translateY(-10px);
    transition: opacity .3s ease, visibility .3s ease, transform .4s ease;
}

/* ハンバーガーメニューが開いたとき */
.MAHeader__hamburger__menu[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.MAHeader__hamburger__menu > p {
    text-align: center;
}

.MAHeader__hamburger__menu > p > img {
    width: 100%;
    max-width: 561px;
    height: auto;
}

.MAHeader__hamburger__menu > nav {
    margin-top: 80px;
}

.MAHeader__hamburger__menu > nav > ul {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}

.MAHeader__hamburger__menu > nav > ul > li {
    writing-mode: vertical-rl;
}

.MAHeader__hamburger__menu > nav > ul > li + li {
    margin-right: 40px;
}

.MAHeader__hamburger__menu > nav > ul > li > a {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #08233E;
}

.MAHeader__hamburger__button {
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
    top: 0;
    transition: top .3s ease;
}

/* 上線、下線 */
.MAHeader__hamburger__button::before,
.MAHeader__hamburger__button::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    margin: auto;
    background: #FFFFFF;
    position: absolute;
    right: 0;
    left: 0;
    transform-origin: center;
    transition: transform .3s ease, top .3s ease, bottom .3s ease;
}

.MAHeader__hamburger__button::before {
    top: 9px;
}

.MAHeader__hamburger__button::after {
    bottom: 9px;
}

/* 真ん中線 */
.MAHeader__hamburger__button > span::before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    margin: auto;
    background: #FFFFFF;
    position: absolute;
    top: 15px;
    right: 0;
    left: 0;
    transition: opacity .2s ease, background .3s ease;
}

/* メニューが開いたとき */
.MAHeader__hamburger__button[aria-expanded="true"] {
    top: -32px;
}

.MAHeader__hamburger__button[aria-expanded="true"]::before {
    background: #08233E;
    transform: rotate(45deg);
    top: 15px;
}

.MAHeader__hamburger__button[aria-expanded="true"]::after {
    background: #08233E;
    transform: rotate(-45deg);
    bottom: 15px;
}

.MAHeader__hamburger__button[aria-expanded="true"] > span::before {
    opacity: 0;
}

.MAHeader__hamburger__button > span > span {
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
    white-space: nowrap;
}

.MAHeader__hamburger > .MAHeader__hamburger__button[aria-expanded="true"] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10000%);
}

.MAHeader__hamburger__menu > .MAHeader__hamburger__button {
    position: absolute;
    top: 20px;
    right: 20px;
}

.MAHeader__hamburger__menu > .MAHeader__hamburger__button[aria-expanded="false"] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10000%);
}


/* ---------- Contents ---------- */
.MAContent {
    padding-bottom: 80px;
    background: url("/resources/a/pc/v2/images/magademy-award/content/bg_01.png") repeat-y top center;
}

.MAContent.-no-bg {
    background: none;
}

.MAContent__body {
    width: 100%;
    max-width: 1076px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#nominate_character > .MAContent__body {
    max-width: 1105px;
}

.MAContent__inner {
    margin-right: 7.143%;
}

.MAContent__inner > *:first-child {
    margin-top: 0;
}

.MAContent__inner > *:last-child {
    margin-bottom: 0;
}


/* ---------- Section ---------- */
.MAContent__section {
    margin-top: 160px;
}

.MAContent__section:first-child {
    margin-top: 0px;
}

.MAContent__section#nominate_character {
    overflow-x: hidden;
}


/* ---------- Heading ---------- */
.MAHeading.-level3 {
    margin-top: 74px;
    margin-bottom: 24px;
}

.MAHeading.-level3 + img {
    margin-top: 16px;
}

.MAHeading.-level3 > h3 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.334;
}

.MAHeading.-level4 {
    margin-bottom: 12px;
}

.MAHeading.-level4 > h4 {
    font-size: 20px;
    font-weight: bold;
    line-height: 2;
}


/* ---------- Text ---------- */
.MAText {
    font-size: 16px;
    line-height: 2;
}

.MAText > p > a {
    text-decoration: underline;
}

.MAText__hidden {
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
    white-space: nowrap;
}


/* ---------- Col Layout ---------- */
.MAColLayout {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}

.MAColLayout__heading {
    margin-top: -8px;
    margin-right: 15px;
    margin-left: 122px;
    writing-mode: vertical-rl;
}

.MAColLayout__heading > span {
    font-size: 40px;
    font-weight: bold;
}

.MAColLayout__body {
    width: 100%;
    max-width: 806px;
}

.MAColLayout__body > *:first-child {
    margin-top: 0;
}

.MAColLayout__body > *:last-child {
    margin-bottom: 0;
}

/* ---------- Media ---------- */
.MAMedia {
    display: flex;
    justify-content: center;
    align-items: center;
}

.MAMedia.-inText {
    flex-direction: row-reverse;
    align-items: flex-start;
}

.MAMedia__text {
    margin-left: 24px;
}

.MAMedia__text > .MAText {
    font-size: 14px;
}

.MAMedia__text > *:first-child {
    margin-top: 0;
}

.MAMedia__text > *:last-child {
    margin-bottom: 0;
}

.MAMedia__image {
    flex-shrink: 0;
}

.MAMedia__image + .MAMedia__image {
    margin-left: 40px;
}

.MAMedia__image svg {
    width: 100%;
    height: 100%;
}


/* ---------- Award ---------- */
.MAAward__heading.-level2 {
    margin: 0 0 20px;
    text-align: center;
}

.MAAward__heading.-level2 > h2 {
    display: inline-block;
    padding: 0 75px;
    font-size: 56px;
    font-weight: bold;
    text-align: center;
    position: relative;
}

/* テキスト左右のデコレーション */
.MAAward__heading.-level2 > h2::before,
.MAAward__heading.-level2 > h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 138px;
    position: absolute;
    top: 0;
}

.MAAward__heading.-level2 > h2::before {
    background: url("/resources/a/common/images/magademy-award/award_h2_deco_01.svg") no-repeat top center;
    left: 0;
}

.MAAward__heading.-level2 > h2::after {
    background: url("/resources/a/common/images/magademy-award/award_h2_deco_02.svg") no-repeat top center;
    right: 0;
}

.MAAward__heading.-level2 > h2 > span {
    display: block;
    font-size: 24px;
    color: #AB7D10;
}

.MAAward .font_s {
    font-size: 13px;
    line-height: 1.3em;
    text-align: center;
    margin: 0 auto 48px;
}

.MAAward__list > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -40px 0 0 -16px;
}

.MAAward__list > ul > li {
    width: calc(50% - 16px);
    margin: 40px 0 0 16px;
    color: #08233E;
}

.MAAward__list__inner {
    display: flex;
    flex-direction: column;
    background: linear-gradient(.25turn, #8B6918, #C49A37, #8B6918);
}

.MAAward__list__body {
    margin: 0 4px 4px 4px;
    background: #FFFFFF;
}

.MAAward__heading.-level3 {
    padding: 12px 0 13px;
    background: linear-gradient(.25turn, #8B6918, #C49A37, #8B6918);
    color: #FFFFFF;
    text-align: center;
}

.MAAward__heading.-level3 > h3 {
    display: inline-block;
    padding: 0 60px;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.23;
    position: relative;
}

/* テキスト左右のデコレーション */
.MAAward__heading.-level3 > h3::before,
.MAAward__heading.-level3 > h3::after {
    content: "";
    display: block;
    width: 54px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}

.MAAward__heading.-level3 > h3::before {
    background: url("/resources/a/common/images/magademy-award/award_h3_deco_01.svg") no-repeat top center / 54px 20px;
    left: 0;
}

.MAAward__heading.-level3 > h3::after {
    background: url("/resources/a/common/images/magademy-award/award_h3_deco_02.svg") no-repeat top center / 54px 20px;
    right: 0;
}

.MAAward__media {
    display: flex;
    flex-direction: column-reverse;
}

.MAAward__media__desc {
    padding: 20px 20px 24px 20px;
}

.MAAward__heading.-level4 {
    text-align: center;
}

.MAAward__heading.-level4 > h4 {
    font-size: 24px;
    font-weight: bold;
}

.MAAward__heading.-level4 > h4 > span {
    display: block;
    font-size: 16px;
}

.MAAward__media__text {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #C2CED9;
}

.MAAward__media__desc .MAAward__media__text > *:first-child {
    margin-top: 0;
}

.MAAward__media__desc .MAAward__media__text > *:last-child {
    margin-bottom: 0;
}

.MAAward__heading.-level5 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
}

.MAAward__heading.-level5.-award,
.MAAward__comment.-award {
    color: #AB7D10;
}

.MAAward__comment {
    font-size: 14px;
}

.MAAward__text__link {
    display: flex;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
}

.MAAward__text__link > * {
    width: 50%;
}

.MAAward__text__link > a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background: #AB7D10;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
}

.MAAward__text__link .MAModal__openButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: calc(100% - 8px);
    margin-left: 8px;
    padding: 0 5px;
}

.MAAward__copyright {
    margin-top: 14px;
    font-size: 10px;
}

.MAAward__media__image > img {
    width: 100%;
    height: auto;
}


/* ---------- Nominate ---------- */
.MANominate {
    position: relative;
}

.MANominate__heading.-level2 {
    margin-bottom: 20px;
    text-align: center;
}

.MANominate__heading.-level2 > h2 {
    font-size: 40px;
    font-weight: bold;
}

.MANominate__heading.-level2 > h2 > span {
    display: block;
    font-size: 24px;
    color: #AB7D10;
}

.MANominate__heading.-level3 {
    margin-top: 20px;
    margin-bottom: 40px;
    padding-top: 13px;
    padding-bottom: 16px;
    text-align: center;
    position: relative;
}

.MANominate__list + .MANominate__heading.-level3 {
    margin-top: 80px;
}

/* 上下2本線 */
.MANominate__heading.-level3::before,
.MANominate__heading.-level3::after,
.MANominate__heading.-level3 > .MANominate__heading__inner::before,
.MANominate__heading.-level3 > .MANominate__heading__inner::after {
    content: "";
    display: block;
    width: 100vw;
    height: 2px;
    margin: 0 calc(50% - 50vw);
    background: linear-gradient(.25turn, #8B6918, #C49A37, #8B6918);
    position: absolute;
    left: 0;
}

.MANominate__heading.-level3::before {
    top: -2px;
}

.MANominate__heading.-level3::after {
    top: -6px;
}

.MANominate__heading.-level3 > .MANominate__heading__inner::before {
    bottom: -2px;
}

.MANominate__heading.-level3 > .MANominate__heading__inner::after {
    bottom: -6px;
}

.MANominate__heading.-level3 > .MANominate__heading__inner > h3 {
    font-size: 32px;
    font-weight: bold;
}

.MANominate__heading.-level3 > .MANominate__heading__inner > h3 > span {
    color: #AB7D10;
}

.MANominate__heading.-level4 {
    margin-bottom: 16px;
    text-align: center;
}

.MANominate__heading.-level4 > h4 {
    font-size: 24px;
    font-weight: bold;
}

.MANominate__heading.-level4 > h4 > span {
    display: block;
    font-size: 16px;
}

.MANominate__heading.-level5 {
    margin-bottom: 8px;
}

.MANominate__heading.-level5 > h5 {
    font-size: 14px;
    font-weight: bold;
}

.MANominate__nav > ul {
    display: flex;
    justify-content: center;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    margin-top: 20px;
    padding: 20px 0;
}

.MANominate__nav.-is-fixed > ul {
    margin-top: 0;
    background: #08233E;
    border-top: 1px solid #4B5772;
    border-bottom: 1px solid #4B5772;
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 9999;
}

.MANominate__nav > ul > li + li {
    margin-left: 40px;
}

.MANominate__nav > ul > li > a {
    display: flex;
    align-items: center;
    font-weight: bold;
}

.MANominate__nav > ul > li > a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-style: solid;
    border-width: 7px 5px 0 5px;
    border-color: #AB7D10 transparent transparent transparent;
}

.MANominate__list > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -40px 0 0 -16px;
}

.MANominate__list > ul > li {
    width: calc(33.333% - 16px);
    margin: 40px 0 0 16px;
    color: #08233E;
}

.MANominate__list > ul.spt_actor > li {
    margin: 40px 0 0 18px;
}

.MANominate__list__inner {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    background: #FFFFFF;
}

.MANominate__list > ul > li.-award {
    position: relative;
}

.MANominate__list > ul > li.-award .MANominate__list__inner {
    outline: 4px solid #AB7D10;
    outline-offset: -4px;
}

.MANominate__list > ul > li.-award .MANominate__image::before,
.MANominate__list > ul > li.-award .MANominate__image::after {
    content: "";
    display: block;
    position: absolute;
}

/* 左上の王冠 */
.MANominate__list > ul > li.-award .MANominate__image::before {
    width: 38px;
    height: 25px;
    background: url("/resources/a/common/images/magademy-award/icon_crown_01.svg") no-repeat top center / 38px 25px;
    top: 16px;
    left: 12px;
    z-index: 2;
}

/* 左上の王冠の背景三角 */
.MANominate__list > ul > li.-award .MANominate__image::after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: #AB7D10 transparent transparent transparent;
    top: 0;
    left: 0;
    z-index: 1;
}

.MANominate__desc {
    padding: 24px;
}

.MANominate__text {
    padding-top: 16px;
    border-top: 1px solid #C2CED9;
}

.MANominate__text__comment {
    margin-top: 8px;
    font-size: 12px;
}

.MANominate__copyright {
    display: inline-block;
    font-size: 10px;
}

.MANominate__text__link {
    display: flex;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
}

.MANominate__text__link .MAModal {
    width: 63%;
}

.MANominate__text__link > a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 37%;
    background: #AB7D10;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
}

.MANominate__text__link .MAModal__openButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: calc(100% - 8px);
    margin-left: 8px;
    padding: 0 5px;
}

.MANominate__image > img {
    width: 100%;
    height: auto;
}


/* ---------- Modal ---------- */
.MAModal__body {
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    width: 100%;
    height: 100%;
    margin: auto;
    opacity: 0;
    color: #08233E;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    transition: visibility .4s ease, opacity .3s ease;
}

.MAModal__body[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
}

.MAModal__inner {
    position: relative;
}

.MAModal__display {
    width: 100%;
    max-width: 600px;
    max-height: 84vh;
    padding: 40px;
    background: #FFFFFF;
    overflow-y: auto;
    position: relative;
    z-index: 9999;
}

.MAModal__openButton {
    background: #08233E;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    transition: background .1s ease;
}

.MAModal__openButton:active,
.MAModal__openButton:focus,
.MAModal__openButton:hover {
    background: #18436F;
}

.MAModal__closeButton {
    width: 32px;
    height: 32px;
    position: absolute;
    top: -8px;
    right: 0;
    z-index: 9999;
    transform: translateY(-100%);
}

/* ×ボタン */
.MAModal__closeButton::before,
.MAModal__closeButton::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #FFFFFF;
    position: absolute;
    top: 15px;
    left: 6px;
}

.MAModal__closeButton::before {
    transform: rotate(45deg);
}

.MAModal__closeButton::after {
    transform: rotate(135deg);
}

.MAModal__closeButton > span {
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
    white-space: nowrap;
}

.MAModal__overlay {
    width: 100%;
    height: 100%;
    background: #08233E;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    transition: opacity .3s ease;
}

.MAModal__body[aria-hidden="false"] .MAModal__overlay {
    opacity: .9;
}

.MAModal__media {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

.MAModal__heading.-level4 > h4 {
    font-size: 20px;
    font-weight: bold;
}

.MAModal__heading.-level4 > h4 > span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

.MAModal__heading.-level5 {
    margin-top: 26px;
    margin-bottom: 12px;
}

.MAModal__heading.-level5 > h5 {
    font-size: 14px;
    font-weight: bold;
}

.MAModal__media__text {
    flex-grow: 1;
    margin-left: 24px;
}

.MAModal__button {
    margin-top: 24px;
}

.MAModal__button > a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 110px;
    background: #AB7D10;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
}

.MAModal__media__image {
    flex-shrink: 0;
}

.MAModal__media__image > img {
    width: 200px;
    height: auto;
}

.MAModal__comment__list > li {
    padding: 13px 0;
    border-top: 1px solid #C2CED9;
}

.MAModal__comment__list > li:last-child {
    border-bottom: 1px solid #C2CED9;
}

.MAModal__comment__list > li > p {
    font-size: 14px;
    line-height: 1.8;
}

.MANominate__copyright {
    margin-top: 14px;
}


/* ---------- Footer ---------- */
.MAFooter {
    background: #071C31;
}

.MAFooter__inner {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 64px 20px 40px;
    box-sizing: border-box;
}

.MAFooter__inner > h1 {
    width: 100%;
    text-align: center;
}

.MAFooter__menu {
    margin-top: 48px;
}

.MAFooter__menu > ul {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}

.MAFooter__menu > ul > li {
    writing-mode: vertical-rl;
    line-height: 1;
}

.MAFooter__menu > ul > li + li {
    margin-right: 32px;
}

.MAFooter__copyright {
    margin-top: 55px;
    color: #4B5772;
    font-size: 10px;
    text-align: center;
}

.noscript {
    position: absolute;
    z-index: 10;
    background-color: #3A3A3A;
    color: #FFFFFF;
    width: 100%;
    text-align: center;
}

/* ---------- Media Query ---------- */
@media screen and (max-width: 950px) {
    .MAContent__inner {
        margin-right: 0;
    }
}