@charset "UTF-8";
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700|Open+Sans:400,700&display=swap");
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. 2. Add the correct display in IE. */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; }

/** Add the correct display in IE 9-. */
audio, canvas, progress, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Add the correct display in IE 10-. 1. Add the correct display in IE. */
template, [hidden] { display: none; }

/* Links ========================================================================== */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
a:active, a:hover { outline-width: 0; }

/* Text-level semantics ========================================================================== */
/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/* Forms ========================================================================== */
/** 1. Change font properties to `inherit` in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ }

/** Restore the font weight unset by the previous rule. */
optgroup { font-weight: bold; }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Change the border, margin, and padding in all browsers (opinionated). */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Correct the text style of placeholders in Chrome, Edge, and Safari. */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

*, *::before, *::after { box-sizing: border-box; }

html { background-color: #ffffff; font-size: 62.5%; /* = 10px */ }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Headings */
h1 { font-size: 2em; }

h2, section h1, .h2 { border-left: 10px solid #c0392b; color: #85534e; padding-left: 5px; font-size: 1.5em; }

h3, section section h1, .h3 { background-color: initial; border: initial; border-bottom: 1px dashed #85534e; color: #85534e; font-size: 1.17em; }

h4, section section section h1, .h4 { background-color: initial; border: initial; color: #85534e; font-size: 1.00em; }
h4::before, section section section h1::before, .h4::before { content: "■ "; }

h5, section section section section h1, .h5 { background-color: initial; border: initial; color: #85534e; font-size: 1.00em; }

/** Quote */
blockquote { border: 1px solid #666; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); background-color: #FAFAFA; padding: 10px 20px; }

/** Section */
section { margin: 0 0 50px 0; }

@media print { html { transform-origin: top left; transform: scale(0.7); } }

body { position: relative; /* z-indexを効かせるため */ margin: 0; background-image: url(../img/bg_ticket.svg); background-repeat: repeat; background-size: 90px 70px; font-family: 'Noto Sans Japanese', 'Noto Sans JP', '源ノ角ゴシック', 'Source Sans Pro', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif; font-size: 1.6rem; min-width: 1200px; z-index: 0; }
@media print { body { background: none; } }
@media screen and (max-width: 640px) and (orientation: portrait) { body { padding-top: 10px; min-width: 0px; width: auto; transform: none; } }

body::before { position: absolute; left: 0; top: 0; display: block; content: ""; width: 100%; height: 100%; background-image: url(../img/bg02.svg); background-size: 200px; background-repeat: repeat; opacity: 0.7; z-index: -1; }
@media print { body::before { background: none; } }

.layout-top { padding-top: 20px; }

.layout-page { position: static; width: 1200px; min-height: 100%; margin: 0 auto; }
@media screen and (max-width: 640px) and (orientation: portrait) { .layout-page { width: auto; } }

.l-header .logoImage, .layout-top .l-header > .logo-kosys::before { display: block; content: ""; position: relative; top: -50px; margin: 0 auto; height: 285px; width: 500px; background-image: url(../img/logo.svg); background-position: 0 0; background-size: contain; z-index: 10; }

.l-header { position: relative; padding-top: 5px; margin-top: -20px; }
.l-header > .logo-kosys { display: block; position: relative; margin-bottom: 65px; padding: 0; height: 85px; width: 100%; background-color: #c0392b; -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); -moz-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); -ms-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); -o-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); }

@media screen and (max-width: 640px) and (orientation: portrait) { .layout-top .l-header > .logo-kosys { height: 42.5px; width: 100%; } }
@media screen and (max-width: 640px) and (orientation: portrait) { .layout-top .l-header > .logo-kosys::before { position: relative; top: -25px; height: 142.5px; width: 250px; } }
@media screen and (max-width: 640px) and (orientation: portrait) { .layout-top .l-header { padding-top: 5px; margin-top: -20px; } }

.layout-page .l-header { position: absolute; width: 100%; left: 0; top: -10px; padding: 0; margin: 0; }
@media screen and (max-width: 640px) and (orientation: portrait) { .layout-page .l-header { height: 100px; } }
.layout-page .l-header > .logo-kosys { height: 42.5px; }
.layout-page .l-header > .logo-kosys > .logoImage { top: -25px; left: -475px; /* = 250 / 2 - 1200 / 2  */ height: 142.5px; width: 250px; background-size: cover; }
@media screen and (max-width: 640px) and (orientation: portrait) { .layout-page .l-header > .logo-kosys > .logoImage { left: 0; } }

.l-nav { position: relative; height: 140px; margin-top: 5px; margin-left: 500px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav { height: auto; width: 90%; margin: 0 auto; margin-top: 90px; padding: 0 20px; border: solid 1px #DDD; background-color: #FFFFFF; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } }
.l-nav .nav-title { display: none; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav .nav-title { position: relative; display: block; height: 40px; width: 100%; text-align: center; color: #85534e; font-size: 1.2em; }
  .l-nav .nav-title::before { content: ""; display: inline-block; height: 40px; vertical-align: middle; }
  .l-nav .nav-title::after { content: "▼"; display: block; position: absolute; right: 0; top: 12.5px; font-size: 10px; } }
.l-nav .nav-toggle { display: none; }
.l-nav .nav-list { position: absolute; display: block; right: 0; margin: 0; padding: 0; list-style: none; height: 130px; writing-mode: vertical-lr; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav .nav-list { position: static; height: auto; right: auto; writing-mode: horizontal-tb; } }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav .nav-list { display: none; }
  .l-nav .nav-toggle:checked + .nav-list { display: block; }
  .l-nav .nav-toggle:checked ~ .nav-list { display: block; }
  .l-nav .nav-toggle:checked ~ .nav-title::after { transform: rotate(90deg); } }
.l-nav .nav-item { display: block; width: 40px; height: 100%; margin-left: 20px; border: solid 1px #DDD; background-color: #FFFFFF; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-align: left; writing-mode: vertical-rl; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav .nav-item { height: 40px; width: 100%; margin: 5px 0; writing-mode: horizontal-tb; } }
.l-nav .nav-link { position: relative; display: block; width: 100%; height: 100%; padding-right: 4px; color: black; text-decoration: none; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav .nav-link { padding-left: 0; padding-top: 4px; } }
.l-nav .nav-item-title { display: block; font-size: 18px; line-height: 1.0; padding-top: 28px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav .nav-item-title { padding-top: 0; padding-left: 28px; } }
.l-nav .nav-item-tagline { display: block; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.0; font-size: 8px; padding-top: 28px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav .nav-item-tagline { padding-top: 0; padding-left: 28px; } }
.l-nav .nav-item-number { box-sizing: border-box; position: absolute; top: 5px; left: 10px; height: 20px; width: 20px; border-radius: 20px; box-sizing: border-box; background-color: #c0392b; color: white; text-align: center; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.0; font-size: 8px; writing-mode: horizontal-tb; overflow: hidden; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-nav .nav-item-number { top: 10px; left: 5px; } }
.l-nav .nav-item-lineNumber { display: block; width: 100%; font-size: 8px; line-height: 7px; padding-top: 1px; }
.l-nav .nav-item-stationNumber { display: block; width: 100%; font-size: 10px; }
.l-nav .nav-item-active { background-color: #FFDDDD; border: solid 1px #FFD0D0; font-weight: 700; }

.l-content { position: relative; width: 1200px; margin: 0 auto; background-color: white; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6); padding: 10px 10px; border: 5px solid #c0392b; border-radius: 10px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-content { width: 100%; height: auto; border-left: none; border-right: none; height: auto; margin: 0 auto; } }

.layout-top .l-content { width: 1200px; margin: 0 auto; min-height: 500px; background-color: white; border: 5px solid #c0392b; border-radius: 30px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .layout-top .l-content { margin-top: 1em; width: 100%; height: auto; border-left: none; border-right: none; } }
.layout-top .l-content section { padding: 20px; margin: 0; }
.layout-top .l-content > section > h1 { /*TODO: 適切な場所に移動する */ padding: 20px; margin: 0; padding: 0; padding-left: 10px; border-left: 10px solid #c0392b; }
.layout-top .altSite { font-size: 150%; }

.layout-page .l-content { margin-top: 10px; padding: 10px 20px; }
.layout-page .l-content-header { position: relative; }
.layout-page .l-content-body { min-height: 400px; margin-top: 20px; padding-bottom: 100px; }
.layout-page .l-content-nav { background-color: #c0392b; height: 20px; }
.layout-page .l-content-title { text-align: center; margin: 0 0; font-size: 36px; }
.layout-page .l-content-title-tagline { text-align: center; margin: 2px; font-size: 18px; }
.layout-page .l-content-body-main, .layout-page .post { padding: 0 10px; }
.layout-page .l-content-body-sidebar, .layout-page .post-sidebar { padding: 0 10px; }
.layout-page .l-content-body-sidebar h2, .layout-page .post-sidebar h2 { border-left: none; font-size: 1.17em; }

.l-footer { margin-top: 100px; width: 100%; background-color: #d4934d; min-height: 50px; padding-bottom: 20px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .l-footer { margin-top: 70px; } }

.footerWrapper { position: relative; width: 1200px; margin: 0 auto; }
@media screen and (max-width: 640px) and (orientation: portrait) { .footerWrapper { width: 100%; padding-top: 50px; } }

.footerWrapper > .footerLogoLink { display: block; position: absolute; top: -98px; right: 10px; width: 300px; height: 150px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .footerWrapper > .footerLogoLink { top: -66px; width: 200px; height: 100px; } }

.footerWrapper > .logo-opap { width: 300px; height: 150px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .footerWrapper > .logo-opap { width: 200px; height: auto; } }

.footerWrapper > .copyright { color: white; font-style: normal; }
@media screen and (max-width: 640px) and (orientation: portrait) { .footerWrapper > .copyright { display: block; text-align: center; } }

.footerWrapper a { color: white; }

.row::after, .layout-page .l-content-body::after { display: table; content: ""; clear: both; }

.col, .col-1, .col-2, .col-3, .layout-page .l-content-body-sidebar, .layout-page .post-sidebar, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .layout-page .l-content-body-main, .layout-page .post, .col-10, .col-11, .col-12 { float: left; }

.col-1 { width: 8.33333333%; }

.col-2 { width: 16.66666667%; }

.col-3, .layout-page .l-content-body-sidebar, .layout-page .post-sidebar { width: 25.00000000%; }

.col-4 { width: 33.33333333%; }

.col-5 { width: 41.66666667%; }

.col-6 { width: 50.00000000%; }

.col-7 { width: 58.33333333%; }

.col-8 { width: 66.66666667%; }

.col-9, .layout-page .l-content-body-main, .layout-page .post { width: 75.00000000%; }

.col-10 { width: 83.33333333%; }

.col-11 { width: 91.66666667%; }

.col-12 { width: 100%; }

@media screen and (max-width: 640px) and (orientation: portrait) { .col, .col-1, .col-2, .col-3, .layout-page .l-content-body-sidebar, .layout-page .post-sidebar, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .layout-page .l-content-body-main, .layout-page .post, .col-10, .col-11, .col-12 { width: 100%; float: none; } }
.clearfix, .character-list::after, .episode-link .episode-link-list::after { display: table; content: ""; clear: both; }

.textblock { padding: 10px 10px; }

.hideText { text-indent: -1000%; white-space: nowrap; overflow: hidden; }

/* 補足情報 */
.note { font-size: 80%; color: #888; }

/* スローガン・キャッチコピー */
.slogan { color: #85534e; font-size: 1.2em; font-weight: bold; margin-bottom: 1.0em; }

/* 標準表スタイル */
.table-common, .character-profile-table, .onair-table, .table-series { border-collapse: collapse; border-radius: 5px; width: 100%; table-layout: fixed; border-top: none; border-bottom: 4px solid #bd6d65; font-size: 1.2em; }
.table-common th, .character-profile-table th, .onair-table th, .table-series th { color: #bd6d65; }
.table-common > thead > tr > th, .character-profile-table > thead > tr > th, .onair-table > thead > tr > th, .table-series > thead > tr > th, .table-common > thead > tr > td, .character-profile-table > thead > tr > td, .onair-table > thead > tr > td, .table-series > thead > tr > td { padding: 10px 5px; border-bottom: 4px solid #bd6d65; }
.table-common > tbody > tr, .character-profile-table > tbody > tr, .onair-table > tbody > tr, .table-series > tbody > tr { background-color: #FFF8F8; }
.table-common > tbody > tr:first-child > th, .character-profile-table > tbody > tr:first-child > th, .onair-table > tbody > tr:first-child > th, .table-series > tbody > tr:first-child > th, .table-common > tbody > tr:first-child > td, .character-profile-table > tbody > tr:first-child > td, .onair-table > tbody > tr:first-child > td, .table-series > tbody > tr:first-child > td { border-top: 4px solid #bd6d65; }
.table-common > tbody > tr:nth-child(2n + 1), .character-profile-table > tbody > tr:nth-child(2n + 1), .onair-table > tbody > tr:nth-child(2n + 1), .table-series > tbody > tr:nth-child(2n + 1) { background-color: #FFFFFF; }
.table-common > tbody > tr > th, .character-profile-table > tbody > tr > th, .onair-table > tbody > tr > th, .table-series > tbody > tr > th, .table-common > tbody > tr > td, .character-profile-table > tbody > tr > td, .onair-table > tbody > tr > td, .table-series > tbody > tr > td { padding: 10px 5px; border-bottom: 2px solid #bd6d65; }
.table-common > tbody > tr > th, .character-profile-table > tbody > tr > th, .onair-table > tbody > tr > th, .table-series > tbody > tr > th { font-weight: normal; text-align: left; width: 150px; }
.table-common > tbody > tr > td, .character-profile-table > tbody > tr > td, .onair-table > tbody > tr > td, .table-series > tbody > tr > td { text-align: left; width: auto; }
.table-common ul, .character-profile-table ul, .onair-table ul, .table-series ul { margin: 0 0; padding: 0; list-style: none; }
.table-common ul > li, .character-profile-table ul > li, .onair-table ul > li, .table-series ul > li { margin: 0; padding: 0; }

/* スクロール */
.marquee { overflow: hidden; }
.marquee > * { display: inline-block; padding-left: 100%; white-space: nowrap; animation: anime-marquee 20s linear infinite; }

@keyframes anime-marquee { 0% { transform: translateX(0); }
  100% { transform: translateX(-100%); } }
.heading-inline-tagline { font-size: 80%; }

.jumbotron { position: relative; text-align: center; width: 1200px; margin: 0 auto; height: 720px; overflow: visible; }
@media screen and (max-width: 640px) and (orientation: portrait) { .jumbotron { width: 80%; height: auto; margin: 0 auto; overflow: visible; } }

.jumbotron > h1 { position: absolute; left: 0; top: 0; border: initial; background: initial; }

.jumbotronImage { position: relative; margin: 0 auto; width: 720px; height: 720px; z-index: 0; }
@media screen and (max-width: 640px) and (orientation: portrait) { .jumbotronImage { margin: 0; width: 100%; height: auto; overflow: visible; } }

.jumbotronImage::before { display: block; content: ""; position: absolute; top: 7%; left: 0; width: 100%; height: 100%; background-image: url(../img/bg_line.svg); background-repeat: no-repeat; background-size: cover; transform-origin: center; transform: rotateX(45deg); z-index: -1; }

.jumbotronMainImage { width: 720px; height: 720px; transform: translateZ(400px); }
@media screen and (max-width: 640px) and (orientation: portrait) { .jumbotronMainImage { margin: 0; height: auto; width: 100%; } }

.jumbotronSlogan { position: absolute; right: -140px; top: 30px; width: 140px; height: 500px; transform: translateZ(410px) rotate(5deg); color: #65ace4; }
@media screen and (max-width: 640px) and (orientation: portrait) { .jumbotronSlogan { right: -5vw; top: 15vw; width: 20vw; height: 70vw; transform: rotate(5deg) translateZ(450px); } }

.jumbotronSlogan > img { width: 140px; height: 500px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .jumbotronSlogan > img { width: 100%; height: auto; } }

.special { position: absolute; right: 10px; top: -100px; height: 100px; width: 250px; padding: 5px 10px; transform: rotate(15deg); background-color: white; background-image: url(../img/bg_ticket_blue.svg); background-repeat: repeat; background-size: 72px 56px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6); text-align: center; animation: anime-special ease-in-out alternate 5s infinite; }
@media screen and (max-width: 640px) and (orientation: portrait) { .special { position: relative; left: 0; top: 0; bottom: 0; transform: none; margin: 30px auto; animation: anime-special-mobile ease-in-out alternate 5s infinite; } }
.special > a { display: block; width: 100%; height: 100%; text-decoration: none; color: black; }
.special h2 { border: none; color: black; font-size: 1.20em; margin: 10px 0 0 0; border-bottom: solid 2px black; }

@keyframes anime-special { 0% { transform: translateY(0) rotate(15deg); }
  100% { transform: translateY(-10px) rotate(15deg); } }
@keyframes anime-special-mobile { 0% { transform: translateY(0) rotate(5deg); }
  100% { transform: translateY(-10px) rotate(5deg); } }
.infoDisplay { position: absolute; background-color: #888; border-top: 5px solid #44aacc; height: 150px; width: 420px; right: 10px; bottom: 10px; color: white; font-weight: 600; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6); border-radius: 5px; padding: 0 10px; }
@media screen and (max-width: 640px) and (orientation: portrait) { .infoDisplay { position: static; width: 100%; } }

.infoDisplay table { table-layout: fixed; width: 100%; border-spacing: 3px; }

.infoDisplay table th { font-weight: 600; }

.infoDisplay table td { background-color: black; height: 1.8rem; font-weight: normal; font-size: 1.6rem; text-align: left; color: #de9610; }
.infoDisplay table td a { text-decoration: none; color: #de9610; }

.navMap { position: absolute; left: 0; top: 0; z-index: 10; }
@media screen and (max-width: 640px) and (orientation: portrait) { .navMap { position: relative; width: 100%; } }

.navMap-item { display: block; text-decoration: none; position: relative; border-radius: 27px; height: 54px; width: 200px; background-color: #56a764; border: 2px solid white; margin: 20px 0; color: white; font-weight: 600; line-height: 1.0; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 640px) and (orientation: portrait) { .navMap-item { width: 100%; } }

.navMap-item::after { display: block; content: ""; position: absolute; width: 15px; height: 45px; top: 50px; left: 17px; background-color: #44aacc; z-index: -1; }

.navMap-item:last-of-type::after { display: none; }

.navMap-item:hover::before { display: block; content: ""; position: absolute; width: 100%; height: 100%; border-radius: 27px; background-color: white; opacity: 0.2; }

.navMap-item:nth-of-type(2n) { background-color: #7cc64a; }

.navMap-item:nth-of-type(2n+1) { background-color: #f29f05; }

.navMap-item.navMap-item-important { background-color: #c0392b; }

.navMap-itemTitle { margin-left: 55px; margin-right: 27px; font-size: 20px; text-align: left; padding-top: 7px; padding-bottom: 5px; }

.navMap-itemTagline { text-align: left; margin-left: 55px; font-size: 10px; }

.navMap-itemNumber { box-sizing: border-box; position: absolute; top: 5px; left: 5px; height: 40px; width: 40px; border-radius: 20px; box-sizing: border-box; background-color: white; color: black; text-align: center; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.0; overflow: hidden; }

.navMap-itemLineNumber { display: block; width: 100%; font-size: 16px; line-height: 14px; padding-top: 2px; }

.navMap-itemStationNumber { display: block; width: 100%; font-size: 20px; }

.headingCategoryLink { color: black; text-decoration: none; }

.headingCategoryLink:hover { color: #666; text-decoration: underline; }

.pageNumber { display: block; box-sizing: border-box; position: absolute; top: 15px; left: 50px; height: 40px; width: 40px; border-radius: 20px; box-sizing: border-box; background-color: #c0392b; color: white; text-align: center; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.0; text-decoration: none; overflow: hidden; }
@media screen and (max-width: 640px) and (orientation: portrait) { .pageNumber { top: 5px; left: 5px; transform: scale(0.5); } }

.pageNumber:hover { background-color: #f88; }

.pageNumber-line { display: block; width: 100%; font-size: 16px; line-height: 14px; padding-top: 2px; }

.pageNumber-station { display: block; width: 100%; font-size: 20px; }

.sponsorGroup { text-align: center; margin-bottom: 30px; }

.sponsorGroup h3 { margin: 5px 0; }

.sponsorLogo { width: 300px; margin: 1em; }

.sponsorLogo-middle { width: 200px; margin: 1em; }

.sponsorNameList, .sponsorNameList-large, .sponsorNameList-middle, .sponsorNameList-small, .sponsorNameList-xsmall { display: block; margin: 0px; padding: 0; }
.sponsorNameList li, .sponsorNameList-large li, .sponsorNameList-middle li, .sponsorNameList-small li, .sponsorNameList-xsmall li { display: inline-block; margin: 10px 5px; padding: 3px 5px; background-color: #FFDDDD; border-right: solid 1px #EEAAAA; border-bottom: solid 1px #EEAAAA; }

.sponsorNameList-large { font-size: 120%; }

.sponsorNameList-middle { font-size: 100%; }

.sponsorNameList-small { font-size: 80%; }

.sponsorNameList-xsmall { font-size: 70%; }

.sponsorNote { font-size: 70%; text-align: center; }

.post-title { background: none; color: #85534e; border: none; }

.post-meta { text-align: right; color: #666; }

.post-content { padding: 10px; margin-bottom: 30px; }

.post-nav { position: relative; border-top: 1px dashed #85534e; color: #666; }
.post-nav .post-prev { display: block; width: 50%; text-align: left; }
.post-nav .post-next { position: absolute; right: 0; top: 0; width: 50%; text-align: right; }
.post-nav .post-next::after { display: table; content: " "; clear: both; }

.layout-top .post-list { display: block; list-style: none; margin: 0 0; padding: 0; }
.layout-top .post-list li { display: block; margin: 0; padding: 0; margin: 10px 0; width: 100%; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.layout-top .post-list .post-meta { font-weight: bold; }

.post-sidebar .post-list { display: block; list-style: none; margin: 0 0; padding: 0; }
.post-sidebar .post-list li { display: block; margin: 0; padding: 0; margin: 10px 0; }
.post-sidebar .post-list .post-meta { display: block; font-weight: bold; text-align: left; }
.post-sidebar .post-list .post-link { display: block; }

.character { width: 100%; }
.character h3 { border: none; border-left: 10px solid #bd6d65; padding-left: 8px; }
.character .character-name { display: inline-block; background: none; color: #85534e; border: none; font-size: 2em; margin: 0; padding: 0; margin-right: 10px; }
.character .character-englishName { display: inline; font-size: 1.5em; color: #888; margin: 0; padding: 0; }

.character-voiceActor { font-size: 1.2em; color: #666; margin: 0; padding: 0; }

.character-image-undefined { font-size: 20px; text-align: center; color: #DDDDDD; }
.character-image-undefined > i { font-size: 200px; }
.character-image-undefined > span { display: block; margin-top: 10px; }

.character-slogan { color: #85534e; font-size: 1.8em; font-weight: bold; margin-bottom: 1.0em; }

.character-slogan::before { content: "――"; display: inline; }

.character-content { margin-bottom: 50px; }

.character-nav { margin-top: 50px; }

.character-list { display: block; margin: 0; padding: 0; width: 100%; list-style: none; }
.character-list * { box-sizing: border-box; }

.character-list-item { display: block; float: left; margin: 0; margin-right: 5px; margin-bottom: 5px; padding: 0; border: 1px solid #DDDDDD; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); width: calc(100% / 4 - 5px); }
@media screen and (max-width: 640px) and (orientation: portrait) { .character-list-item { width: 100%; } }
.character-list-item a { display: block; position: relative; width: 100%; min-height: 90px; padding: 5px 0 0 90px; text-decoration: none; }
.character-list-item a:hover::before { display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: white; opacity: 0.2; z-index: 100; }
.character-list-item .character-thumbnail { position: absolute; left: 5px; top: 5px; width: 80px; min-height: 80px; z-index: 0; }
.character-list-item .character-name { margin: 0; padding: 0; color: #85534e; font-size: 1.2em; font-weight: bold; }
.character-list-item .character-englishName { margin: 0; padding: 0; color: #666; }

.onair-table td.onair-place { text-align: left; }
.onair-table td.onair-date { text-align: center; }

.table-series > tbody > tr > th, .table-series > tbody > tr > td { height: 5em; text-align: center; vertical-align: middle; padding: 0; }
.table-series .col-item-name { width: 30%; }
.table-series .check-yes { color: green; }
.table-series .check-partial { color: gold; }
.table-series .check-no { color: red; }
.table-series .cell-work-list { font-size: 80%; }
.table-series .cell-work-list ul { display: inline-block; text-align: left; }
.table-series .cell-work-list li { list-style: circle; }

.episode { position: relative; }

.episode-body { padding: 10px; }

.episode-link a { font-size: 1.5em; text-decoration: none; }
.episode-link a:hover { opacity: 0.5; }
.episode-link .episode-link-list { display: block; list-style: none; margin: 0; padding: 0; }
.episode-link .episode-link-list > li { display: block; width: 50%; margin: 0; padding: 0; padding-left: 3em; float: left; text-align: left; }
.episode-link .niconico { color: #666; }
.episode-link .youtube { color: #c0392b; }
.episode-link .danimestore { color: #ea552a; }

.signature { text-align: right; margin: 30px 0; }

.btn { display: inline-block; padding: 10px; font-weight: bold; color: white; background-color: orange; text-decoration: none; border-radius: 3px; }
.btn:hover { background-color: #F9C270; }