@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300&display=swap|Noto+Serif+TC:200,300");
/*
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; }

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; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

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; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

img { vertical-align: bottom; max-width: 100%; }

li { list-style: none; }

body { font-family: "Noto Serif JP", serif, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 400; -webkit-text-size-adjust: 100%; letter-spacing: 0.01em; background: #000; color: #FFF; }

html { font-size: calc(100vw / 32); }
@media only screen and (min-width: 751px) { html { font-size: 16px; } }

a { text-decoration: none; }

h1, h2, h3, h4, h5 { font-weight: normal; }

.f_neduko { font-family: "Noto Serif TC", serif; }

#wapper { overflow: hidden; }

@media only screen and (min-width: 751px) { #wrapper { min-width: 1300px; }
  .sp { display: none; }
  .main_menu { width: 178px; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); }
  .main_contents { width: calc(100% - 178px); margin-left: 178px; } }
@media only screen and (max-width: 750px) { .pc { display: none; } }
@-webkit-keyframes move_bg_r { 0% { background-position: 0vw top; }
  100% { background-position: -100vw top; } }
@-o-keyframes move_bg_r { 0% { background-position: 0vw top; }
  100% { background-position: -100vw top; } }
@-moz-keyframes move_bg_r { 0% { background-position: 0vw top; }
  100% { background-position: -100vw top; } }
@keyframes move_bg_r { 0% { background-position: 0vw top; }
  100% { background-position: -100vw top; } }
@-webkit-keyframes move_bg_b { 0% { background-position: left top; }
  100% { background-position: -100vw top; } }
@-o-keyframes move_bg_b { 0% { background-position: left top; }
  100% { background-position: -100vw top; } }
@-moz-keyframes move_bg_b { 0% { background-position: left top; }
  100% { background-position: -100vw top; } }
@keyframes move_bg_b { 0% { background-position: left top; }
  100% { background-position: -100vw top; } }
@-webkit-keyframes move_bg_r_sp { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-100vw); -moz-transform: translateX(-100vw); -ms-transform: translateX(-100vw); -o-transform: translateX(-100vw); transform: translateX(-100vw); } }
@-o-keyframes move_bg_r_sp { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-100vw); -moz-transform: translateX(-100vw); -ms-transform: translateX(-100vw); -o-transform: translateX(-100vw); transform: translateX(-100vw); } }
@-moz-keyframes move_bg_r_sp { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-100vw); -moz-transform: translateX(-100vw); -ms-transform: translateX(-100vw); -o-transform: translateX(-100vw); transform: translateX(-100vw); } }
@keyframes move_bg_r_sp { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-100vw); -moz-transform: translateX(-100vw); -ms-transform: translateX(-100vw); -o-transform: translateX(-100vw); transform: translateX(-100vw); } }
#wrapper { position: relative; }
#wrapper .contents_bg p { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; -webkit-background-size: 100vw; -o-background-size: 100vw; background-size: 100vw; }
#wrapper .contents_bg .bg_canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
@media only screen and (min-width: 751px) { #wrapper .bg1 { background-image: url("../img/bg_smoke_red.png"); -webkit-animation: move_bg_r 58s linear infinite; -moz-animation: move_bg_r 58s linear infinite; -o-animation: move_bg_r 58s linear infinite; animation: move_bg_r 58s linear infinite; }
  #wrapper .bg2 { background-image: url("../img/bg_smoke_blue.png"); -webkit-animation: move_bg_b 60s linear infinite; -moz-animation: move_bg_b 60s linear infinite; -o-animation: move_bg_b 60s linear infinite; animation: move_bg_b 60s linear infinite; } }
@media only screen and (max-width: 750px) { #wrapper { width: 100vw; overflow: hidden; }
  #wrapper .contents_bg p { width: 200vh; }
  #wrapper .bg1 { background-image: url("../img/bg_smoke_red_sp.png"); -webkit-animation: move_bg_r_sp 30s linear infinite; -moz-animation: move_bg_r_sp 30s linear infinite; -o-animation: move_bg_r_sp 30s linear infinite; animation: move_bg_r_sp 30s linear infinite; }
  #wrapper .bg2 { background-image: url("../img/bg_smoke_blue_sp.png"); -webkit-animation: move_bg_r_sp 20s linear infinite; -moz-animation: move_bg_r_sp 20s linear infinite; -o-animation: move_bg_r_sp 20s linear infinite; animation: move_bg_r_sp 20s linear infinite; } }
#wrapper .main_contents { position: relative; }

footer { background: #000; position: relative; }
footer a { color: #FFF; }
footer .share li { display: inline-block; }
footer .aniplex { letter-spacing: -.4em; }
footer .aniplex li { display: inline-block; position: relative; letter-spacing: 0; }
footer .aniplex li:after { content: ""; display: block; position: absolute; width: 1px; height: 100%; background: #fff; top: 0; right: 0; }
footer .aniplex li:last-child:after { display: none; }
footer .pagetop { background: url("../img/footer/btn_page_top_pc.png") no-repeat center top; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; }
footer p { color: #494949; }
@media only screen and (min-width: 751px) { footer { text-align: right; padding: 46px 125px 46px 0; }
  footer .pagetop { width: 65px; height: 65px; cursor: pointer; right: 40px; top: calc(50% - 32.5px); position: absolute; }
  footer .pagetop:hover { background-position: center bottom; }
  footer .share { margin-bottom: 15px; }
  footer .share .ttl { display: none; }
  footer .share li { width: 20px; }
  footer .aniplex { margin-bottom: 10px; font-size: 13px; }
  footer .aniplex li { padding: 0 16px; }
  footer .aniplex li:last-child { padding-right: 0; }
  footer p { font-size: 10px; line-height: 2; }
  footer a { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; cursor: pointer; }
  footer a:hover { opacity: 0.65; } }
@media only screen and (max-width: 750px) { footer { padding: 0 -0px 14vw; }
  footer .pagetop { width: 20vw; height: 20vw; margin: 10vw auto 5vw; }
  footer .share { text-align: center; margin-bottom: 5vw; }
  footer .share li { width: 8vw; vertical-align: middle; margin: 0 3vw; }
  footer .share li.ttl { width: auto; white-space: nowrap; }
  footer .aniplex { text-align: center; margin-bottom: 5vw; }
  footer .aniplex li { padding: 0 3vw; }
  footer p { font-size: 0.8rem; text-align: center; line-height: 1.8; } }

.nav { position: fixed; z-index: 500; height: 100%; top: 0; }
.nav_header { background: #000; position: relative; height: 100%; }
.nav_header .nav_cap { position: absolute; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; color: #b80100; }
.nav_header:before, .nav_header:after { content: ""; display: block; position: absolute; width: 1px; background: #5d0000; }
.nav_header:before { top: 0; }
.nav_header:after { bottom: 0; }
.nav_wrap { position: absolute; top: 0; height: 100%; background: url("../img/bg_menu_repeate.png") repeat-y; }
.nav_wrap li a { display: block; background: #89000a; color: #FFF; position: relative; }
.nav_wrap li a:before { content: ""; width: 0%; height: 100%; display: block; position: absolute; top: 0; left: 0; background: #fff; }
.nav_wrap li a span { position: relative; z-index: 2; transition: color 0.1s ease 0.1s; }
.nav_wrap li.current a { color: #000; }
.nav_wrap li.current a:before { width: 100%; }
@media only screen and (min-width: 751px) { .nav { width: 180px; }
  .nav_header { width: 24px; }
  .nav_header .nav_cap { top: calc(50% + 14px); font-size: 10px; left: 6px; }
  .nav_header:before, .nav_header:after { left: 11px; height: calc(50% - 30px); }
  .nav_wrap { margin-left: 24px; width: 156px; }
  .nav_wrap h1 { width: calc(100% + 40px); left: -14px; position: relative; padding: 83px 0 67px; }
  .nav_wrap .nav_mainmenu { padding-bottom: 67px; }
  .nav_wrap li { margin-bottom: 10px; font-size: 14px; }
  .nav_wrap li a { padding: 4px 0px 6px 24px; }
  .nav_wrap li a:before { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
  .nav_wrap li a:hover { color: #000; }
  .nav_wrap li a:hover:before { width: 100%; } }
@media only screen and (max-width: 750px) { .nav_header { width: 5vw; }
  .nav_header .nav_btn { position: absolute; width: 8vw; height: 6vw; top: 6.5vw; left: 1.4vw; z-index: 10; }
  .nav_header .nav_btn p { position: absolute; width: 100%; height: 3px; background: #b80100; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
  .nav_header .nav_btn p:nth-child(1) { top: 0; }
  .nav_header .nav_btn p:nth-child(2) { top: 36%; }
  .nav_header .nav_btn p:nth-child(3) { top: 72%; }
  .nav_header .nav_cap { top: 22.5vw; font-size: 10px; left: 6px; }
  .nav_header:before, .nav_header:after { left: 2.5vw; }
  .nav_header:before { height: 3vw; }
  .nav_header:after { height: calc(100% - 4em - 14vw); }
  .nav_wrap { background-color: rgba(0, 0, 0, 0.8); left: 5vw; width: 0; overflow: hidden; -webkit-transition: width 0.2s ease-in; -moz-transition: width 0.2s ease-in; -ms-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in; transition: width 0.2s ease-in; }
  .nav_wrap .nav_inner { transform: translate(0, 0) !important; }
  .nav_wrap h1 { display: none; }
  .nav_wrap .nav_mainmenu { width: 50vw; padding: 5vw 0 0 8.2vw; }
  .nav_wrap .nav_mainmenu li { font-size: 1.3rem; margin-bottom: 3vw; }
  .nav_wrap .nav_mainmenu li a { padding: 5px 4.9vw 7px; }
  .nav.opne_menu .nav_wrap { width: 95vw; }
  .nav.opne_menu .nav_btn p:nth-child(1) { top: 36%; -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -ms-transform: rotate(330deg); -o-transform: rotate(330deg); transform: rotate(330deg); }
  .nav.opne_menu .nav_btn p:nth-child(2) { width: 0; }
  .nav.opne_menu .nav_btn p:nth-child(3) { top: 36%; -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); -ms-transform: rotate(210deg); -o-transform: rotate(210deg); transform: rotate(210deg); } }

.main_contents { letter-spacing: 0.1em; }
@media only screen and (min-width: 751px) { .main_contents { margin-bottom: 120px; }
  .main_contents .page_title { width: 290px; margin: auto; } }
@media only screen and (max-width: 750px) { .main_contents { margin-bottom: 24vw; }
  .main_contents .page_title { width: 370px; width: 49.33vw; margin: auto; } }

.floatcontents { position: fixed; z-index: 1000; background: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; top: 0; left: 0; display: none; opacity: 0; }
.floatcontents .wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.floatcontents .close { position: absolute; }
.floatcontents .close:before, .floatcontents .close:after { content: ""; display: block; position: absolute; width: 100%; height: 4px; top: 50%; background: #89000a; }
.floatcontents .close:before { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.floatcontents .close:after { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); }
.floatcontents .player { position: absolute; }
@media only screen and (min-width: 751px) { .floatcontents .close { width: 60px; height: 40px; right: 0; cursor: pointer; }
  .floatcontents .close:before, .floatcontents .close:after { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
  .floatcontents .close:hover:before, .floatcontents .close:hover:after { background: #FFF; }
  .floatcontents .player { width: 980px; height: 551px; border: 1px solid #fff; top: calc(50% - 275px); left: calc(50% - 490px); } }
@media only screen and (max-width: 750px) { .floatcontents .close { width: 16vw; height: 10vw; top: 0; right: 0; }
  .floatcontents .player { width: 100%; height: 56.4vw; top: calc(50% - 56.4vw/2); } }

@-webkit-keyframes open_pagettl { 0% { filter: blur(5px); }
  100% { filter: blur(0px); opacity: 1; } }
@-o-keyframes open_pagettl { 0% { filter: blur(5px); }
  100% { filter: blur(0px); opacity: 1; } }
@-moz-keyframes open_pagettl { 0% { filter: blur(5px); }
  100% { filter: blur(0px); opacity: 1; } }
@keyframes open_pagettl { 0% { filter: blur(5px); }
  100% { filter: blur(0px); opacity: 1; } }
.main_contents .page_title { opacity: 0; }
.main_contents .in_scroll { opacity: 0; }
.main_contents .in_scroll_open { -webkit-animation: open_pagettl 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; -moz-animation: open_pagettl 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; -o-animation: open_pagettl 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; animation: open_pagettl 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; }
.main_contents.open_contents .page_title { -webkit-animation: open_pagettl 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; -moz-animation: open_pagettl 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; -o-animation: open_pagettl 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; animation: open_pagettl 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; }

.global_portal_sp .portal_global--header { z-index: 400; }