@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
html { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
a img { border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
a { text-decoration: none; outline: none; -webkit-transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
a:hover { opacity: 0.5; }
.anchor { position: absolute; top: 0; left: 0; }
img { max-width: 100%; vertical-align: bottom; }
.ib { display: inline-block; }
body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; font-size: 16px; line-height: 1.5; font-weight: 500; -webkit-text-size-adjust: 100%; background: #1f1f1f; }
#container { position: relative; }
#contents { position: relative; width: 100%; max-width: 2000px; margin: auto; overflow: hidden; }
#main { position: relative; width: 2000px; top: 0; left: 50%; margin-left: -1000px; }
#bg-movie { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -99999999; }
#bg-movie .inner { position: relative; width: 100%; height: 100%; max-width: 2000px; margin: auto; overflow: hidden; }
#bg-movie video { position: relative; width: 100%; height: 100%; }
@media only screen and (max-width: 640px) { #bg-movie .inner { background: url("../media/MCP_PV_verA_Master_1019_02_MiddleQuality_640x360_2fps.gif") no-repeat center center; background-size: cover; }
  #bg-movie video { visibility: hidden; } }
.mejs__overlay-button { display: none; }
#navigation { position: fixed; left: 0; top: 0; z-index: 10001; background: black; width: 260px; height: 100%; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); line-height: 1; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: -webkit-transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), -webkit-transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); overflow: auto; -webkit-overflow-scrolling: touch; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#navigation > .inner { max-width: 180px; margin: auto; }
#navigation .logo { margin-top: 22.22222%; }
#navigation #nav-menu { margin-top: 16.66667%; padding-top: 17.22222%; padding-bottom: 17.22222%; border-top: solid 1px #4d4d4d; border-bottom: solid 1px #4d4d4d; }
#navigation #nav-menu li + li { margin-top: 14.44444%; }
#navigation #nav-menu span { opacity: 0.1; }
#navigation #nav-sns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-top: 16.66667%; }
#navigation #nav-sns span { opacity: 0.2; }
.open-menu #navigation { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); }
#menu { position: fixed; left: 0; top: 0; margin-left: 30px; margin-top: 30px; z-index: 10000; background: black; border-radius: 100%; cursor: pointer; }
@media only screen and (max-width: 640px) { #menu { width: 12.5%; margin-left: 4.6875%; margin-top: 4.6875%; } }
#menu img { -webkit-transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
#menu:hover img { opacity: 0.5; }
.wrapper { position: relative; }
.section { position: relative; left: 0; top: 0; width: 100%; overflow: visible; }
.box { position: relative; width: 100%; max-width: 1180px; margin: auto; }
.box-helf { width: 50%; max-width: 590px; }
@media only screen and (max-width: 1280px) { #main { width: 156.25vw; margin-left: -78.125vw; }
  .box { width: 59%; margin: auto; }
  .box-helf { width: 50%; max-width: 590px; } }
.movie-link { position: relative; display: inline-block; }
.movie-link:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 22%; padding-top: 22%; background: url("../images/common/movie_play_icon.png") no-repeat center center; background-size: 100% auto; z-index: 1; -webkit-transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.movie-link:hover { opacity: 1; }
.movie-link:hover:after { opacity: 0.5; }
.section-top { background: white; }
.section-top .box { padding-top: 40px; }
@media only screen and (max-width: 1280px) { .section-top .box { padding-top: 2%; } }
.section-top .main-visual { position: relative; display: block; width: 100%; max-width: 1100px; margin: auto; }
.section-top picture { display: block; }
.section-top .title { position: absolute; width: 45.18182%; left: 0; top: 0; margin-top: 5.54545%; margin-left: -0.90909%; }
.section-top .video { position: absolute; left: 0; top: 0; width: 16.94915%; margin-top: 59.91525%; margin-left: 1.69492%; z-index: 100; }
.section-top:after { position: absolute; left: 0; bottom: 0; content: ""; width: 100%; line-height: 0; font-size: 0; margin-bottom: -5.6%; padding-top: 7.75%; background: url("../images/marco/top_border_bottom.png") center center no-repeat; z-index: 1; background-size: 100% auto; overflow: hidden; }
.section-top .sns { position: relative; width: 19.49153%; margin: auto; margin-top: -2.11864%; z-index: 101; }
.section-top .sns ul { display: -webkit-box; display: -ms-flexbox; display: flex; }
.section-top .sns li { width: 21.73913%; }
.section-top .sns li + li { margin-left: 4.34783%; }
.section-top .sns span { opacity: 0.2; }
@media only screen and (max-width: 640px) { .section-top .box { padding-top: 5.22193%; }
  .section-top .main-visual { padding-bottom: 31.33159%; }
  .section-top .visual { width: 92.4282%; margin: auto; }
  .section-top .title { position: relative; width: 100%; margin: auto; margin-top: -1.69713%; }
  .section-top .sns { width: 60.05222%; margin: auto; margin-top: 10.57441%; }
  .section-top .sns li { width: 21.73913%; }
  .section-top .sns li + li { margin-left: 4.34783%; }
  .section-top .sns a { display: block; }
  .section-top .sns img { width: 100%; max-width: 100%; }
  .section-top .video { position: absolute; left: 0; right: 0; top: auto; bottom: 0; width: 52.21932%; margin: auto; margin-bottom: -10.44386%; text-align: center; }
  .section-top:after { margin-bottom: 0; } }
.section-story { padding: 0; padding-top: 9.15%; background: #121546 url("../images/marco/bg_galaxy.png") center center; }
@media only screen and (max-width: 1280px) { .section-story { background-size: 50% auto; } }
.section-story .banner { width: 91.52542%; margin: auto; }
.section-story .banner ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.section-story .banner li { width: 31.48148%; margin: 0 0.92593%; background: white; }
.section-story .banner li:nth-child(n+4) { margin-top: 1.88679%; }
.section-story .news { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2.375em; color: white; }
.section-story .news h3 { -ms-flex-preferred-size: 143px; flex-basis: 143px; width: 12.11864%; margin-top: -0.25em; padding: 0 1.86441%; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1; }
.section-story .news ul { width: 100%; max-height: 7.375em; overflow: auto; }
.section-story .news li { font-size: 0.75em; line-height: 1.5; }
.section-story .news li + li { margin-top: 0.16667em; }
.section-story .news a { color: white; }
.section-story .story { position: relative; margin-top: 5.25%; }
.section-story h2 { position: relative; width: 30.76271%; margin-left: 18.30508%; }
.section-story p { position: relative; width: 42.45763%; margin-top: -2.0339%; margin-left: 30.9322%; padding-bottom: 9.0678%; }
.section-story .stills h3 { position: absolute; left: 0; top: 0; width: 21.35%; margin-top: -0.3%; margin-left: 60.05%; }
.section-story .stills > .still { position: absolute; left: 0; top: 0; }
.section-story .stills > .still:nth-of-type(1) { width: 2.05%; margin-top: 14.85%; margin-left: 0%; }
.section-story .stills > .still:nth-of-type(2) { width: 19.7%; margin-top: 4.85%; margin-left: 2.8%; }
.section-story .stills > .still:nth-of-type(3) { width: 19.5%; margin-top: 16.55%; margin-left: 16.85%; }
.section-story .stills > .still:nth-of-type(4) { width: 18.95%; margin-top: 10.9%; margin-left: 72.9%; }
.section-story .stills > .still:nth-of-type(5) { width: 5.3%; margin-top: 4.55%; margin-left: 94.7%; }
.section-story:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; margin-bottom: -8.05%; padding-bottom: 8.15%; background: url("../images/marco/story_border_bottom.png") center center no-repeat; z-index: 1; background-size: 100% auto; overflow: hidden; }
@media only screen and (max-width: 640px) { .section-story .banner { margin-top: 18.75%; }
  .section-story .banner ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: 82.1256%; margin: auto; padding-top: 2.34375%; }
  .section-story .banner li { width: 100%; margin: 0; }
  .section-story .banner li:nth-child(n+4), .section-story .banner li + li { margin: 0; margin-top: 4.6875%; }
  .section-story .banner img { width: 100%; }
  .section-story .news { display: block; width: 93.75%; margin: auto; margin-top: 4.57143em; padding-bottom: 4.5em; font-size: 0.875em; }
  .section-story .news h3 { width: 8.9375em; text-align: center; padding: 0; margin: auto; margin-top: -0.25em; }
  .section-story .news ul { margin-top: 1em; max-height: 10.5em; }
  .section-story .news li + li { margin-top: 1em; }
  .section-story .story { position: relative; margin-top: 26.5625%; }
  .section-story h2 { position: relative; width: 56.71875%; margin-left: 33.75%; z-index: 101; margin-left: auto; margin-right: auto; }
  .section-story p { position: relative; width: 80.78125%; margin-top: 0%; margin-left: 57.8125%; padding-bottom: 16.71875%; margin-left: auto; margin-right: auto; }
  .section-story .stills { position: absolute; left: 0; top: 0; margin-top: -14.0625%; width: 100%; }
  .section-story .stills h3 { position: absolute; width: 33.35938%; left: 50%; top: 0; margin-left: -3.125%; margin-top: -12.5%; z-index: 1; }
  .section-story .stills > .still { display: none; }
  .section-story .stills > .still:nth-of-type(4) { display: block; width: 30.46875%; left: auto; right: 50%; top: 0; margin-top: -2.5%; margin-left: 0%; } }
.section-image { position: relative; padding-top: 56.25%; z-index: -1; }
.section-image-01 { top: 0; }
@-webkit-keyframes to-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; }
  100% { -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); opacity: 0; } }
@keyframes to-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; }
  100% { -webkit-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); opacity: 0; } }
@-webkit-keyframes to-in { 0% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } }
@keyframes to-in { 0% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } }
.toon { opacity: 0; }
.to-toon .real, .to-real .toon { -webkit-animation: to-out 0.2s cubic-bezier(0.470, 0.000, 0.745, 0.715); animation: to-out 0.2s cubic-bezier(0.470, 0.000, 0.745, 0.715); -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.to-toon .toon, .to-real .real { -webkit-animation: to-in 0.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.2s; animation: to-in 0.2s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.stills > .still { position: absolute; left: 0; top: 0; }
.section-character-01 { background: white; margin-top: -6.7%; }
.section-character-01:before { content: ""; position: absolute; width: 100%; left: 0; top: 0; padding-top: 22.9%; margin-top: -22.85%; background: url("../images/marco/character_border_01.png") top center no-repeat; background-size: 100% auto; z-index: 100; overflow: hidden; }
.section-character-01 h2 { position: absolute; left: 0; top: 0; margin-left: 48.47458%; margin-top: -12.11864%; z-index: 100; }
.section-character-01 .text { position: relative; width: 44.40678%; margin-left: 45.33898%; padding-top: 14.0678%; padding-bottom: 16.10169%; z-index: 101; }
.section-character-01 .text h3 { width: 59.35115%; }
.section-character-01 .text h4 { width: 79.96183%; margin-top: -11.0687%; }
.section-character-01 .text p { width: 84.73282%; margin-left: 15.26718%; margin-top: 1.71756%; }
.section-character-01 .text .cv { width: 30.53435%; margin-left: 15.26718%; margin-top: 2.67176%; }
.section-character-01 .chara { position: absolute; left: 0; top: 0; width: 86.18644%; margin-left: -17.54237%; margin-top: 6.77966%; z-index: 101; }
.section-character-01 .chara .real { width: 31.85841%; margin-left: 37.95477%; }
.section-character-01 .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-top: 9.53786%; }
.section-character-01 .stills > .still:nth-of-type(1) { width: 4.75%; margin-top: 6.15%; margin-left: 0%; z-index: 102; }
.section-character-01 .stills > .still:nth-of-type(2) { width: 18.95%; margin-top: 23.85%; margin-left: 11.3%; z-index: 102; }
.section-character-01 .stills > .still:nth-of-type(3) { width: 17.75%; margin-top: 10.25%; margin-left: 66.75%; z-index: 100; }
.section-character-01 .stills > .still:nth-of-type(4) { width: 3.35%; margin-top: 15.8%; margin-left: 96.65%; z-index: 100; }
.section-character-01:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; padding-top: 42.6%; top: auto; bottom: 0; margin-bottom: -1px; background: url("../images/marco/character_border_02.png") top center no-repeat; background-size: 100% auto; }
@media only screen and (max-width: 640px) { .section-character-01 .text { position: relative; width: 81.875%; margin-left: 83.59375%; padding-top: 25.9375%; padding-bottom: 44.375%; z-index: 101; }
  .section-character-01 .chara { position: absolute; left: 0; top: 0; width: 156.40625%; margin-left: -28.59375%; margin-top: 12.5%; z-index: 101; }
  .section-character-01 .text { margin: auto; padding-top: 85.9375%; padding-bottom: 14.84375%; }
  .section-character-01 .text .cv { width: 160px; } }
.cv { width: 160px; }
.cv-name img { display: block; }
.cv-btns { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-top: 10%; }
.cv-btns a { cursor: pointer; }
.cv-btns li { width: 27.5%; }
.cv-btns li + li { margin-left: 8.75%; }
.cv-btns .btn-cv { display: inline-block; width: 100%; padding-top: 101.13636%; background: url("../images/common/cv_icon.png") no-repeat; background-size: 100% auto; }
.cv-btns .btn-cv.playing { background-image: url("../images/common/cv_icon_active.png"); }
@media only screen and (max-width: 640px) { .cv { min-width: 160px; margin: auto !important; padding-top: 3.125% !important; } }
.section-character-02 { background: #f5e8e9; }
.section-character-02 .text { position: relative; width: 41.61017%; margin-left: 5.16949%; padding-top: 6.27119%; padding-bottom: 17.37288%; z-index: 101; }
.section-character-02 .text h3 { width: 80.8554%; margin-left: 13.84929%; }
.section-character-02 .text h4 { width: 54.37882%; margin-left: 45.62118%; margin-top: -1.42566%; }
.section-character-02 .text p { position: relative; width: 91.44603%; margin-left: 0%; margin-top: 3.05499%; background: url("../images/marco/aruco_body_shadow.png") no-repeat; background-size: 100% auto; }
.section-character-02 .text .cv { width: 32.58656%; margin-left: 69.04277%; margin-top: -7.94297%; }
.section-character-02 .chara { position: absolute; left: 0; top: 0; width: 104.23729%; margin-left: 2.88136%; margin-top: 0%; z-index: 101; }
.section-character-02 .chara .real { width: 56.99187%; margin-left: 43.00813%; }
.section-character-02 .chara .toon { position: absolute; left: 0; top: 0; width: 92.35772%; margin-top: 6.66667%; }
.section-character-02 .stills > .still:nth-of-type(1) { width: 18.15%; margin-top: 13.5%; margin-left: 12.5%; z-index: 100; }
.section-character-02 .stills > .still:nth-of-type(2) { width: 19.05%; margin-top: 23.5%; margin-left: 69.35%; z-index: 100; }
.section-character-02 .stills > .still:nth-of-type(3) { width: 4.7%; margin-top: 16.05%; margin-left: 95.3%; z-index: 100; }
.section-character-02:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; padding-top: 44.2%; top: auto; bottom: 0; background: url("../images/marco/character_border_03.png") top center no-repeat; background-size: 100% auto; z-index: 1; }
@media only screen and (max-width: 640px) { .section-character-02 .text { position: relative; width: 76.71875%; margin-left: 0%; padding-top: 11.5625%; padding-bottom: 32.03125%; z-index: 101; }
  .section-character-02 .chara { position: absolute; left: 0; top: 0; width: 190.625%; margin-left: -71.875%; margin-top: 0%; z-index: 101; }
  .section-character-02 .text { margin: auto; padding-top: 78.125%; padding-bottom: 16.01563%; }
  .section-character-02 .text p { background: none; } }
.section-character-03 { background: white; padding-top: 5px; margin-top: -5px; }
.section-character-03 .text { position: relative; width: 47.88136%; margin-left: 49.0678%; padding-top: 6.27119%; padding-bottom: 15.9322%; z-index: 101; }
.section-character-03 .text h3 { width: 100%; margin-left: 0%; }
.section-character-03 .text h4 { width: 40%; margin-left: 39.29204%; margin-top: -17.52212%; }
.section-character-03 .text p { width: 54.51327%; margin-left: 18.58407%; margin-top: 7.61062%; }
.section-character-03 .text .cv { width: 28.31858%; margin-left: 6.37168%; margin-top: 1.59292%; }
.section-character-03 .chara { position: absolute; left: 0; top: 0; width: 79.32203%; margin-left: 7.28814%; margin-top: -1.27119%; z-index: 101; }
.section-character-03 .chara .real { width: 55.02137%; margin-left: 0%; }
.section-character-03 .chara .toon { position: absolute; left: 0; top: 0; width: 93.69658%; margin-left: 6.30342%; margin-top: 7.47863%; }
.section-character-03 .stills > .still:nth-of-type(1) { width: 2.15%; margin-top: 10%; margin-left: 0%; z-index: 100; }
.section-character-03 .stills > .still:nth-of-type(2) { width: 17.45%; margin-top: 6.2%; margin-left: 11.75%; z-index: 100; }
.section-character-03 .stills > .still:nth-of-type(3) { width: 17.95%; margin-top: 12.7%; margin-left: 68.8%; z-index: 100; }
.section-character-03 .stills > .still:nth-of-type(4) { width: 4.95%; margin-top: 5.35%; margin-left: 95.05%; z-index: 100; }
.section-character-03:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; padding-top: 39%; top: auto; bottom: 0; background: url("../images/marco/character_border_04.png") bottom center no-repeat; background-size: 100% auto; }
@media only screen and (max-width: 640px) { .section-character-03 .text { position: relative; width: 88.28125%; margin-left: 90.46875%; padding-top: 11.5625%; padding-bottom: 29.375%; z-index: 101; }
  .section-character-03 .chara { position: absolute; left: 0; top: 0; width: 125.9375%; margin-left: 13.4375%; margin-top: -2.34375%; z-index: 101; }
  .section-character-03 .chara { margin-top: 3.125%; }
  .section-character-03 .text { margin: auto; padding-top: 70.3125%; padding-bottom: 14.6875%; } }
.section-character-04 { background: #eeedf7; }
.section-character-04 .text { position: relative; width: 36.77966%; margin-left: 11.52542%; padding-top: 7.45763%; padding-bottom: 7.28814%; z-index: 101; }
.section-character-04 .text h3 { width: 100%; margin-left: 0%; }
.section-character-04 .text h4 { width: 88.94009%; margin-left: 9.67742%; margin-top: -11.98157%; }
.section-character-04 .text p { width: 79.49309%; margin-left: 19.35484%; margin-top: 3.91705%; }
.section-character-04 .text .cv { width: 36.86636%; margin-left: 61.98157%; margin-top: -0.46083%; }
.section-character-04 .chara { position: absolute; left: 0; top: 0; width: 97.11864%; margin-left: 33.22034%; margin-top: -0.08475%; z-index: 101; }
.section-character-04 .chara .real { width: 45.54974%; margin-left: 17.97557%; }
.section-character-04 .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 10.73298%; }
.section-character-04 .stills > .still:nth-of-type(1) { width: 4.65%; margin-top: 7.75%; margin-left: 0%; z-index: 100; }
.section-character-04 .stills > .still:nth-of-type(2) { width: 17.6%; margin-top: 20%; margin-left: 12.45%; z-index: 100; }
.section-character-04 .stills > .still:nth-of-type(3) { width: 17.95%; margin-top: 4.15%; margin-left: 70.3%; z-index: 100; }
.section-character-04:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; padding-top: 41.55%; margin-bottom: -10.3%; top: auto; bottom: 0; background: url("../images/marco/character_border_05.png") bottom center no-repeat; background-size: 100% auto; z-index: 1; }
@media only screen and (max-width: 640px) { .section-character-04 .text { position: relative; width: 67.8125%; margin-left: 21.25%; padding-top: 13.75%; padding-bottom: 1.40625%; z-index: 101; }
  .section-character-04 .chara { position: absolute; left: 0; top: 0; width: 184.53125%; margin-left: 59.84375%; margin-top: -0.15625%; z-index: 101; }
  .section-character-04 .chara { margin-left: -23.4375%; margin-top: 3.125%; }
  .section-character-04 .text { margin: auto; padding-top: 85.9375%; padding-bottom: 0.70313%; } }
.section-image-02 { position: relative; top: 0; z-index: -1; }
.section-subcharacter-01 { margin-top: -5.55%; background: white url("../images/marco/subcharacter_border_01.png") bottom center no-repeat; background-size: 100% auto; }
.section-subcharacter-01:before { content: ""; position: absolute; width: 100%; left: 0; top: 0; padding-top: 8.75%; margin-top: -8.75%; background: url("../images/marco/subcharacter_border.png") top center no-repeat; background-size: 100% auto; z-index: 1; overflow: hidden; }
.section-subcharacter-01 h2 { position: absolute; left: 0; top: 0; width: 57.88136%; margin-left: 21.01695%; margin-top: -1.69492%; z-index: 100; }
.section-subcharacter-01 .onda-s { position: absolute; left: 0; top: 0; margin-left: 0%; margin-top: 14.49153%; }
.section-subcharacter-01 .onda-s .text { position: relative; width: 68.81356%; margin-left: 6.61017%; margin-top: -45.9322%; padding-bottom: 0%; z-index: 101; }
.section-subcharacter-01 .onda-s .text h3 { width: 73.39901%; margin-left: 26.60099%; }
.section-subcharacter-01 .onda-s .text h4 { width: 96.55172%; margin-left: 0%; margin-top: -12.80788%; }
.section-subcharacter-01 .onda-s .text p { width: 80.54187%; margin-left: 15.27094%; margin-top: 8.867%; }
.section-subcharacter-01 .onda-s .text .cv { width: 39.40887%; margin-left: 73.15271%; margin-top: 0.49261%; }
.section-subcharacter-01 .onda-s .chara { position: relative; width: 83.72881%; margin-left: 11.01695%; margin-top: 0%; z-index: 100; }
.section-subcharacter-01 .onda-s .chara .real { width: 51.01215%; margin-left: 31.37652%; }
.section-subcharacter-01 .onda-s .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 11.1336%; }
@media only screen and (max-width: 640px) { .section-subcharacter-01 .onda-s { position: relative; width: 92.1875%; max-width: 590px; margin: auto; padding-top: 26.71875%; }
  .section-subcharacter-01 .onda-s .text { margin: auto; margin-top: -42.34375%; } }
.section-subcharacter-01 .onda-y { margin-left: 50%; padding-top: 21.52542%; }
.section-subcharacter-01 .onda-y .text { position: relative; width: 78.98305%; margin-left: 11.86441%; margin-top: -52.54237%; padding-bottom: 3.38983%; z-index: 101; }
.section-subcharacter-01 .onda-y .text h3 { width: 63.9485%; margin-left: 16.95279%; }
.section-subcharacter-01 .onda-y .text h4 { width: 89.05579%; margin-left: 10.94421%; margin-top: -11.1588%; }
.section-subcharacter-01 .onda-y .text p { width: 74.8927%; margin-left: 0%; margin-top: 2.14592%; }
.section-subcharacter-01 .onda-y .text .cv { width: 34.33476%; margin-left: 0%; margin-top: -4.07725%; }
.section-subcharacter-01 .onda-y .chara { position: relative; width: 55.76271%; margin-left: 9.15254%; margin-top: 0%; z-index: 100; }
.section-subcharacter-01 .onda-y .chara .real { width: 55.92705%; margin-left: 30.69909%; }
.section-subcharacter-01 .onda-y .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 8.81459%; }
@media only screen and (max-width: 640px) { .section-subcharacter-01 .onda-y { width: 92.1875%; max-width: 590px; margin: auto; padding-top: 7.8125%; }
  .section-subcharacter-01 .onda-y .chara { margin-left: 16.94915%; }
  .section-subcharacter-01 .onda-y .text { margin: auto; margin-top: -52.54237%; } }
.section-subcharacter-01 .stills > .still:nth-of-type(1) { width: 15.7%; margin-top: 18.8%; margin-left: 0%; z-index: 101; }
.section-subcharacter-01 .stills > .still:nth-of-type(2) { width: 18.95%; margin-top: 5.55%; margin-left: 75.15%; z-index: 100; }
.section-subcharacter-01 .stills > .still:nth-of-type(3) { width: 5.85%; margin-top: 20.85%; margin-left: 94.15%; z-index: 100; }
.section-subcharacter-01 .stills > .still:nth-of-type(4) { width: 18.25%; margin-top: 50.55%; margin-left: 7.9%; z-index: 100; }
.section-subcharacter-01 .stills > .still:nth-of-type(5) { width: 24.05%; margin-top: 54.95%; margin-left: 70.15%; z-index: 100; }
.section-subcharacter-02 { background: white url("../images/marco/subcharacter_border_02.png") top center no-repeat; background-size: 100% auto; }
.section-subcharacter-02 .text { position: relative; width: 52.11864%; margin-left: 35.16949%; padding-top: 12.0339%; padding-bottom: 13.30508%; z-index: 101; }
.section-subcharacter-02 .text h3 { width: 30.0813%; margin-left: 20%; }
.section-subcharacter-02 .text h4 { width: 75.12195%; margin-left: 25.04065%; margin-top: -0.81301%; }
.section-subcharacter-02 .text p { width: 74.14634%; margin-left: 0%; margin-top: -4.06504%; }
.section-subcharacter-02 .text .cv { width: 26.01626%; margin-left: 43.41463%; margin-top: -7.47967%; }
.section-subcharacter-02 .text .cv .cv-name { width: 118.125%; }
.section-subcharacter-02 .chara { position: absolute; left: 0; top: 0; width: 77.71186%; margin-left: -18.38983%; margin-top: 8.13559%; z-index: 101; }
.section-subcharacter-02 .chara .real { width: 29.11668%; margin-left: 46.56489%; }
.section-subcharacter-02 .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 10.14177%; }
.section-subcharacter-02 .stills > .still:nth-of-type(1) { width: 20.5%; margin-top: 33.65%; margin-left: 0%; z-index: 100; }
.section-subcharacter-02 .stills > .still:nth-of-type(2) { width: 17.5%; margin-top: 31.5%; margin-left: 80.1%; z-index: 100; }
@media only screen and (max-width: 640px) { .section-subcharacter-02 .text { position: relative; width: 96.09375%; margin-left: 64.84375%; padding-top: 22.1875%; padding-bottom: 24.53125%; z-index: 101; }
  .section-subcharacter-02 .chara { position: absolute; left: 0; top: 0; width: 143.28125%; margin-left: -33.4375%; margin-top: 15%; z-index: 101; }
  .section-subcharacter-02 .chara { margin-top: 3.125%; }
  .section-subcharacter-02 .text { margin: auto; padding-top: 62.5%; padding-bottom: 12.26563%; } }
.section-subcharacter-03 { background: white url("../images/marco/subcharacter_border_03.png") bottom center no-repeat; background-size: 100% auto; }
.section-subcharacter-03 .tera { position: absolute; left: 0; top: 0; width: 50%; max-width: 590px; margin-left: 0%; margin-top: -0.9322%; }
.section-subcharacter-03 .tera .text { position: relative; width: 92.37288%; margin-left: 3.05085%; padding-top: 79.66102%; padding-bottom: 0%; z-index: 101; }
.section-subcharacter-03 .tera .text h3 { width: 82.38532%; margin-left: 17.61468%; }
.section-subcharacter-03 .tera .text h4 { width: 90.45872%; margin-left: 0%; margin-top: -15.59633%; }
.section-subcharacter-03 .tera .text p { width: 51.37615%; margin-left: 17.61468%; margin-top: 1.10092%; }
.section-subcharacter-03 .tera .text .cv { width: 29.3578%; margin-left: 59.81651%; margin-top: -1.46789%; }
.section-subcharacter-03 .tera .chara { position: absolute; left: 0; top: 0; width: 124.23729%; margin-left: -10.84746%; margin-top: 0%; z-index: 100; }
.section-subcharacter-03 .tera .chara .real { width: 39.01774%; margin-left: 34.92497%; }
.section-subcharacter-03 .tera .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 9.82265%; }
@media only screen and (max-width: 640px) { .section-subcharacter-03 .tera { position: relative; width: 92.1875%; max-width: 590px; margin: auto; padding-top: 0%; }
  .section-subcharacter-03 .tera .chara { margin-left: -6.77966%; }
  .section-subcharacter-03 .tera .text { margin: auto; } }
.section-subcharacter-03 .rakka { width: 50%; max-width: 590px; margin-left: 50%; padding-top: 6.86441%; }
.section-subcharacter-03 .rakka .text { position: relative; width: 86.27119%; margin-left: 7.11864%; margin-top: -48.13559%; padding-bottom: 14.40678%; z-index: 101; }
.section-subcharacter-03 .rakka .text h3 { width: 100%; margin-left: 0%; }
.section-subcharacter-03 .rakka .text h4 { width: 77.21022%; margin-left: 22.59332%; margin-top: -12.9666%; }
.section-subcharacter-03 .rakka .text p { width: 63.2613%; margin-left: 5.50098%; margin-top: 5.89391%; }
.section-subcharacter-03 .rakka .text .cv { width: 31.43418%; margin-left: 5.50098%; margin-top: 1.57171%; }
.section-subcharacter-03 .rakka .chara { position: relative; width: 52.54237%; margin-left: 18.30508%; margin-top: 0%; z-index: 100; }
.section-subcharacter-03 .rakka .chara .real { width: 67.41935%; margin-left: 7.09677%; }
.section-subcharacter-03 .rakka .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 23.22581%; }
@media only screen and (max-width: 640px) { .section-subcharacter-03 .rakka { width: 92.1875%; max-width: 590px; margin: auto; padding-top: 12.65625%; }
  .section-subcharacter-03 .rakka .chara { margin-left: 28.81356%; }
  .section-subcharacter-03 .rakka .text { margin: auto; margin-top: -48.13559%; } }
.section-subcharacter-03 .stills > .still:nth-of-type(1) { width: 2.65%; margin-top: 17.75%; margin-left: 97.35%; z-index: 100; }
.section-subcharacter-03 .stills > .still:nth-of-type(2) { width: 11.1%; margin-top: 43.3%; margin-left: 88.9%; z-index: 100; }
.section-subcharacter-04 { background: #f2f4f4 url("../images/marco/subcharacter_border_04.png") top center no-repeat; background-size: 100% auto; }
.section-subcharacter-04 .text { position: relative; width: 37.11864%; margin-left: 19.91525%; padding-top: 12.37288%; padding-bottom: 12.11864%; z-index: 101; }
.section-subcharacter-04 .text h3 { width: 76.48402%; margin-left: 23.51598%; }
.section-subcharacter-04 .text h4 { width: 75.11416%; margin-left: 0%; margin-top: -4.3379%; }
.section-subcharacter-04 .text p { width: 45.6621%; margin-left: 39.72603%; margin-top: -2.05479%; }
.section-subcharacter-04 .text .cv { width: 36.52968%; margin-left: 23.05936%; margin-top: 1.14155%; }
.section-subcharacter-04 .chara { position: absolute; left: 0; top: 0; width: 36.44068%; margin-left: 54.74576%; margin-top: 8.05085%; z-index: 101; }
.section-subcharacter-04 .chara .real { width: 73.95349%; margin-left: 0%; }
.section-subcharacter-04 .chara .toon { position: absolute; left: 0; top: 0; width: 84.88372%; margin-left: 15.11628%; margin-top: 9.53488%; }
.section-subcharacter-04 .stills > .still:nth-of-type(1) { width: 17.45%; margin-top: 0%; margin-left: 11.3%; z-index: 100; }
.section-subcharacter-04 .stills > .still:nth-of-type(2) { width: 22.25%; margin-top: 32.15%; margin-left: 72.45%; z-index: 100; }
.section-subcharacter-04 .stills > .still:nth-of-type(3) { width: 11.15%; margin-top: 27.05%; margin-left: 0%; z-index: 100; }
@media only screen and (max-width: 640px) { .section-subcharacter-04 .text { position: relative; width: 68.4375%; margin-left: 36.71875%; padding-top: 22.8125%; padding-bottom: 22.34375%; z-index: 101; }
  .section-subcharacter-04 .chara { position: absolute; left: 0; top: 0; width: 69.84375%; margin-left: 100.9375%; margin-top: 14.84375%; z-index: 101; }
  .section-subcharacter-04 .chara { margin-left: 23.4375%; margin-top: 0%; }
  .section-subcharacter-04 .text { margin: auto; padding-top: 62.5%; padding-bottom: 11.17188%; } }
.section-subcharacter-05 { background: white url("../images/marco/subcharacter_border_05.png") top center no-repeat; background-size: 100% auto; }
.section-subcharacter-05 .panda { position: absolute; left: 0; top: 0; width: 50%; max-width: 590px; margin-left: 0%; margin-top: 0%; }
.section-subcharacter-05 .panda .text { position: relative; width: 83.05085%; margin-left: 1.69492%; padding-top: 56.10169%; padding-bottom: 0%; z-index: 101; }
.section-subcharacter-05 .panda .text h3 { width: 90.20408%; margin-left: 0%; }
.section-subcharacter-05 .panda .text h4 { width: 91.63265%; margin-left: 8.36735%; margin-top: -9.18367%; }
.section-subcharacter-05 .panda .text p { width: 87.34694%; margin-left: 5.10204%; margin-top: -1.63265%; }
.section-subcharacter-05 .panda .text .cv { width: 32.65306%; margin-left: 66.53061%; margin-top: -5.30612%; }
.section-subcharacter-05 .panda .chara { position: absolute; left: 0; top: 0; width: 121.86441%; margin-left: -4.57627%; margin-top: 0%; z-index: 100; }
.section-subcharacter-05 .panda .chara .real { width: 53.54659%; margin-left: 25.17385%; }
.section-subcharacter-05 .panda .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 5.14604%; }
@media only screen and (max-width: 640px) { .section-subcharacter-05 .panda { position: relative; width: 92.1875%; max-width: 590px; margin: auto; padding-top: 0%; }
  .section-subcharacter-05 .panda .text { margin: auto; } }
.section-subcharacter-05 .shicho { width: 50%; max-width: 590px; margin-left: 50%; padding-top: 8.72881%; }
.section-subcharacter-05 .shicho .text { position: relative; width: 90%; margin-left: 4.23729%; margin-top: -44.91525%; padding-bottom: 20.84746%; z-index: 101; line-height: 0; }
.section-subcharacter-05 .shicho .text h3 { width: 35.4049%; margin-left: 55.17891%; margin-top: 0; }
.section-subcharacter-05 .shicho .text h4 { width: 90.5838%; margin-left: 0%; margin-top: -4.33145%; }
.section-subcharacter-05 .shicho .text p { width: 73.82298%; margin-left: 26.17702%; margin-top: 3.38983%; }
.section-subcharacter-05 .shicho .text .cv { width: 30.13183%; margin-left: 7.72128%; margin-top: 3.76648%; }
.section-subcharacter-05 .shicho .chara { position: relative; width: 107.11864%; margin-left: -10%; margin-top: 0%; z-index: 100; }
.section-subcharacter-05 .shicho .chara .real { width: 55.22152%; margin-left: 15.50633%; }
.section-subcharacter-05 .shicho .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 7.43671%; }
@media only screen and (max-width: 640px) { .section-subcharacter-05 .shicho { width: 92.1875%; max-width: 590px; margin: auto; padding-top: 19.21875%; }
  .section-subcharacter-05 .shicho .chara { margin-left: 16.94915%; }
  .section-subcharacter-05 .shicho .text { margin: auto; margin-top: -44.91525%; } }
.section-subcharacter-05 .stills > .still:nth-of-type(1) { width: 21.05%; margin-top: 44.55%; margin-left: 3.1%; z-index: 100; }
.section-subcharacter-05 .stills > .still:nth-of-type(2) { width: 16.85%; margin-top: 39.25%; margin-left: 83.15%; z-index: 100; }
.section-subcharacter-06 { background: white; }
.section-subcharacter-06 .text { position: relative; width: 39.83051%; margin-left: 53.81356%; padding-top: 5.16949%; padding-bottom: 4.57627%; z-index: 101; }
.section-subcharacter-06 .text h3 { width: 59.3617%; margin-left: 0%; }
.section-subcharacter-06 .text h4 { position: relative; width: 41.91489%; margin-left: 53.82979%; margin-top: -30%; z-index: -1; }
.section-subcharacter-06 .text p { width: 59.57447%; margin-left: 40.42553%; margin-top: 1.06383%; }
.section-subcharacter-06 .text .cv { width: 34.04255%; margin-left: 10.6383%; margin-top: -9.14894%; }
.section-subcharacter-06 .chara { position: absolute; left: 0; top: 0; width: 41.01695%; margin-left: 10.67797%; margin-top: 7.0339%; z-index: 101; }
.section-subcharacter-06 .chara .real { width: 91.94215%; margin-left: 5.57851%; margin-top: 1.8595%; }
.section-subcharacter-06 .chara .toon { position: absolute; left: 0; top: 0; width: 100%; margin-left: 0%; margin-top: 0%; }
.section-subcharacter-06 .stills > .still:nth-of-type(1) { width: 5.75%; margin-top: 8.9%; margin-left: 0%; z-index: 100; }
@media only screen and (max-width: 640px) { .section-subcharacter-06 .text { position: relative; width: 73.4375%; margin-left: 99.21875%; padding-top: 9.53125%; padding-bottom: 8.4375%; z-index: 101; }
  .section-subcharacter-06 .chara { position: absolute; left: 0; top: 0; width: 69.53125%; margin-left: 24.0625%; margin-top: 14.375%; z-index: 101; }
  .section-subcharacter-06 .chara { margin-left: 15.625%; margin-top: 0%; }
  .section-subcharacter-06 .text { margin: auto; padding-top: 57.8125%; padding-bottom: 4.21875%; } }
.section-subcharacter-08 { background: white; }
.section-subcharacter-08 .text { position: relative; width: 25.42373%; margin-left: 21.10169%; padding-top: 6.10169%; padding-bottom: 12.71186%; z-index: 101; }
.section-subcharacter-08 .text h3 { width: 100%; margin-left: 0%; }
.section-subcharacter-08 .text p { width: 97.66667%; margin-left: 1.33333%; margin-top: 1%; }
.section-subcharacter-08 .text .cv { width: 53.33333%; margin-left: 1.33333%; margin-top: 13.33333%; }
.section-subcharacter-08 .chara { position: absolute; left: 0; top: 0; width: 54.49153%; margin-left: 39.66102%; margin-top: 0%; z-index: 101; }
.section-subcharacter-08 .chara .real { width: 100.7776%; margin-left: 0%; margin-top: 0%; }
.section-subcharacter-08 .chara .toon { position: absolute; left: 0; top: 0; width: 100.7776%; margin-left: 0%; margin-top: 0%; }
.section-subcharacter-08 .stills > .still:nth-of-type(1) { width: 16.5%; margin-top: 11.05%; margin-left: 10.05%; z-index: 100; }
.section-subcharacter-08 .stills > .still:nth-of-type(2) { width: 10.65%; margin-top: -0.6%; margin-left: 89.35%; z-index: 100; }
.section-subcharacter-08 .stills > .still:nth-of-type(3) { width: 20.85%; margin-top: 25.7%; margin-left: 79.15%; z-index: 100; }
@media only screen and (max-width: 640px) { .section-subcharacter-08 .text { position: relative; width: 46.875%; margin: auto; padding-top: 70.3125%; padding-bottom: 11.71875%; z-index: 101; }
  .section-subcharacter-08 .chara { position: absolute; left: 0; top: 0; width: 100.46875%; margin-left: 0%; margin-top: 0%; z-index: 101; } }
.section-subcharacter-07 { background: #f2f4f4 url("../images/marco/subcharacter_border_06.png") top center no-repeat; background-size: 100% auto; }
.section-subcharacter-07 .asta { position: absolute; left: 0; top: 0; width: 50%; max-width: 590px; margin-left: 0%; margin-top: 4.23729%; }
.section-subcharacter-07 .asta .text { position: absolute; left: 0; top: 0; width: 72.0339%; margin-left: 0.50847%; margin-top: 6.61017%; padding-bottom: 0%; z-index: 101; }
.section-subcharacter-07 .asta .text h3 { width: 93.41176%; margin-left: 6.58824%; }
.section-subcharacter-07 .asta .text p { width: 66.58824%; margin-left: 0%; margin-top: -7.05882%; }
.section-subcharacter-07 .asta .cv { position: relative; z-index: 101; width: 27.11864%; margin-left: 56.94915%; margin-top: 11.52542%; }
.section-subcharacter-07 .asta .chara { position: relative; width: 90.50847%; margin-left: 5.76271%; margin-top: 0%; z-index: 100; }
.section-subcharacter-07 .asta .chara img { width: 100%; margin-left: 0%; }
@media only screen and (max-width: 640px) { .section-subcharacter-07 .asta { position: relative; width: 92.1875%; max-width: 590px; margin: auto; padding-top: 7.8125%; } }
.section-subcharacter-07 .el { width: 50%; max-width: 590px; margin-left: 50%; padding-top: 0%; }
.section-subcharacter-07 .el .text { position: relative; width: 90%; margin-left: 4.23729%; margin-top: -52.20339%; padding-bottom: 3.72881%; z-index: 101; line-height: 0; }
.section-subcharacter-07 .el .text h3 { width: 100%; margin-left: 0%; margin-top: 0; }
.section-subcharacter-07 .el .text h4 { width: 73.44633%; margin-left: 24.48211%; margin-top: -16.38418%; }
.section-subcharacter-07 .el .text p { width: 76.45951%; margin-left: 8.47458%; margin-top: 3.57815%; }
.section-subcharacter-07 .el .text .cv { width: 30.13183%; margin-left: 8.47458%; margin-top: -1.69492%; }
.section-subcharacter-07 .el .chara { position: relative; width: 75.59322%; margin-left: 2.37288%; padding-top: 22.54237%; z-index: 100; }
.section-subcharacter-07 .el .chara img { width: 100%; margin-left: 0%; }
@media only screen and (max-width: 640px) { .section-subcharacter-07 .el { width: 92.1875%; max-width: 590px; margin: auto; padding-top: 0%; }
  .section-subcharacter-07 .el .chara { margin-left: 13.55932%; }
  .section-subcharacter-07 .el .text { margin: auto; margin-top: -52.20339%; } }
.section-subcharacter-07 .stills > .still:nth-of-type(1) { width: 19.6%; margin-top: 32.55%; margin-left: 0%; z-index: 100; }
.section-subcharacter-07 .stills > .still:nth-of-type(2) { width: 4.5%; margin-top: 20.95%; margin-left: 95.5%; z-index: 100; }
.section-subcharacter-07:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; padding-top: 24.95%; margin-bottom: -13.85%; top: auto; bottom: 0; background: url("../images/marco/subcharacter_border_07.png") bottom center no-repeat; background-size: 100% auto; }
.section-movie { position: relative; background: #121546 url("../images/marco/bg_galaxy.png") center center; margin-top: -10.55%; }
@media only screen and (max-width: 1280px) { .section-movie { background-size: 50% auto; } }
.section-movie:before { content: ""; position: absolute; width: 100%; left: 0; top: 0; padding-top: 13.05%; margin-top: -13.05%; background: url("../images/marco/movie_border_01.png") center center no-repeat; background-size: 101% auto; z-index: 1; overflow: hidden; }
.section-movie .box-movie h2 { position: relative; width: 27.37288%; margin-left: 1.94915%; padding-top: 6.61017%; }
.section-movie .box-movie .player { position: relative; width: 82.28814%; margin: auto; margin-top: -5.50847%; }
.section-movie .box-movie iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.section-movie .box-gallery h2 { position: relative; width: 38.98305%; margin-top: 10%; margin-left: 60.50847%; margin-bottom: -2.0339%; }
.section-movie #gallery-images { position: relative; width: 100%; }
@-webkit-keyframes gallery-anime-bg-15 { 0% { background-position: 0 0; }
  100% { background-position: -2000px 0; } }
@keyframes gallery-anime-bg-15 { 0% { background-position: 0 0; }
  100% { background-position: -2000px 0; } }
@-webkit-keyframes gallery-anime-bg-30 { 0% { background-position: 0 0; }
  100% { background-position: -2128px 0; } }
@keyframes gallery-anime-bg-30 { 0% { background-position: 0 0; }
  100% { background-position: -2128px 0; } }
@-webkit-keyframes gallery-anime-bg-45 { 0% { background-position: 0 0; }
  100% { background-position: -2280px 0; } }
@keyframes gallery-anime-bg-45 { 0% { background-position: 0 0; }
  100% { background-position: -2280px 0; } }
@-webkit-keyframes gallery-anime-bg-60 { 0% { background-position: 0 0; }
  100% { background-position: -2432px 0; } }
@keyframes gallery-anime-bg-60 { 0% { background-position: 0 0; }
  100% { background-position: -2432px 0; } }
.section-movie .gallery-bg { width: 100%; background-repeat: repeat-x; background-size: auto 100%; background-position: 0 top; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.section-movie .gallery-bg-top .gallery-bg-60, .section-movie .gallery-bg-top .gallery-bg-30 { -webkit-animation-direction: reverse; animation-direction: reverse; }
.section-movie .gallery-bg-bottom .gallery-bg-45, .section-movie .gallery-bg-bottom .gallery-bg-15 { -webkit-animation-direction: reverse; animation-direction: reverse; }
.section-movie .gallery-bg-15 { padding-top: 24px; background-image: url("../images/gallery/gallery_bg_15.jpg"); opacity: 0.15; -webkit-animation-name: gallery-anime-bg-15; animation-name: gallery-anime-bg-15; -webkit-animation-duration: 123.35526s; animation-duration: 123.35526s; }
.section-movie .gallery-bg-30 { padding-top: 42px; background-image: url("../images/gallery/gallery_bg_30.jpg"); opacity: 0.30; -webkit-animation-name: gallery-anime-bg-30; animation-name: gallery-anime-bg-30; -webkit-animation-duration: 131.25s; animation-duration: 131.25s; }
.section-movie .gallery-bg-45 { padding-top: 64px; background-image: url("../images/gallery/gallery_bg_45.jpg"); opacity: 0.45; -webkit-animation-name: gallery-anime-bg-45; animation-name: gallery-anime-bg-45; -webkit-animation-duration: 140.625s; animation-duration: 140.625s; }
.section-movie .gallery-bg-60 { padding-top: 86px; background-image: url("../images/gallery/gallery_bg_60.jpg"); opacity: 0.60; -webkit-animation-name: gallery-anime-bg-60; animation-name: gallery-anime-bg-60; -webkit-animation-duration: 150s; animation-duration: 150s; }
.section-movie .gallery-lines { position: relative; width: 100%; z-index: 10000; -webkit-box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.9); box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.9); }
.section-movie .carousel { position: relative; width: 2080px; max-width: 2080px; overflow: hidden; line-height: 0; }
.section-movie .carousel li { position: relative; width: 12.5%; top: 0; left: 0; margin: 0; padding: 0; cursor: pointer; }
.section-movie .carousel li:before { content: ""; position: absolute; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 6px white; z-index: 1; -webkit-transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.section-movie .carousel li:after { content: ""; position: absolute; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 4px #e84454; z-index: 2; -webkit-transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.section-movie .carousel li:hover:before, .section-movie .carousel li:hover:after { opacity: 1; }
.section-movie .carousel li img { position: relative; display: block; z-index: 0; }
.section-movie .carousel li:nth-child(2) { position: absolute; left: 12.5%; }
.section-movie .carousel li:nth-child(3) { position: absolute; left: 25%; }
.section-movie .carousel li:nth-child(4) { position: absolute; left: 37.5%; }
.section-movie .carousel li:nth-child(5) { position: absolute; left: 50%; }
.section-movie .carousel li:nth-child(6) { position: absolute; left: 62.5%; }
.section-movie .carousel li:nth-child(7) { position: absolute; left: 75%; }
.section-movie .carousel li:nth-child(8) { position: absolute; left: 87.5%; }
.section-movie .carousel li:nth-child(9) { position: absolute; left: 100%; }
.section-movie .carousel li:nth-child(10) { position: absolute; left: 112.5%; }
@media only screen and (max-width: 640px) { .section-movie .gallery-bg-15 { padding-top: 3.75%; }
  .section-movie .gallery-bg-30 { padding-top: 6.5625%; }
  .section-movie .gallery-bg-45 { padding-top: 10%; }
  .section-movie .gallery-bg-60 { padding-top: 13.4375%; }
  .section-movie #gallery-images:before, .section-movie #gallery-images:after { padding-top: 33.75vw; }
  .section-movie .gallery-lines { -webkit-box-shadow: 0 0 2.34375vw 2.34375vw black; box-shadow: 0 0 2.34375vw 2.34375vw black; }
  .section-movie .carousel { width: 325vw; } }
.section-movie .box-staff h2 { position: relative; width: 20.25424%; margin: auto; margin-top: 10.76271%; }
.section-movie .box-staff p { width: 48.55932%; margin-left: 23.64407%; margin-top: 3.89831%; }
.section-movie .box-spec h2 { position: relative; width: 17.28814%; margin: auto; margin-top: 12.62712%; }
.section-movie .box-spec .body { margin-top: 4.15254%; padding-bottom: 2.28814%; overflow: hidden; }
.section-movie .box-spec .body p { float: left; }
.section-movie .box-spec .body p:nth-child(1) { width: 26.52542%; margin-left: 18.05085%; }
.section-movie .box-spec .body p:nth-child(2) { width: 34.83051%; margin-left: 6.69492%; }
.section-movie:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; padding-top: 8.2%; margin-bottom: -8.1%; top: auto; bottom: 0; background: url("../images/marco/movie_border_02.png") center center no-repeat; background-size: 100% auto; }
@media only screen and (max-width: 640px) { .section-movie .box-staff p { width: 89.53125%; margin-left: 43.59375%; margin: auto; margin-top: 7.1875%; }
  .section-movie .box-spec .body { margin-top: 7.65625%; padding-bottom: 4.21875%; overflow: hidden; }
  .section-movie .box-spec .body p { float: none; }
  .section-movie .box-spec .body p:nth-child(1) { width: 48.90625%; margin: auto; }
  .section-movie .box-spec .body p:nth-child(2) { width: 64.21875%; margin: auto; margin-top: 7.65625%; } }
@-webkit-keyframes star-anime1 { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@keyframes star-anime1 { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-webkit-keyframes star-anime2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes star-anime2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes star-anime3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
  100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
@keyframes star-anime3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
  100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
#fx-stars { display: block; position: absolute; width: 2000px; height: 100%; top: 0; left: 50%; margin-left: -1000px; overflow: hidden; pointer-events: none; z-index: 9999; }
#fx-stars span { position: absolute; display: inline-block; }
#fx-stars span:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; background-repeat: no-repeat; background-size: 100% auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#fx-stars .star1 { width: 2.25%; }
#fx-stars .star1:after { padding-top: 100%; background-image: url("../images/marco/star1.svg"); -webkit-animation: star-anime2 6s linear 0s infinite; animation: star-anime2 6s linear 0s infinite; }
#fx-stars .star2 { width: 1.75%; }
#fx-stars .star2:after { padding-top: 100%; background-image: url("../images/marco/star2.svg"); }
#fx-stars .star3 { width: 0.95%; }
#fx-stars .star3:after { padding-top: 136.84211%; background-image: url("../images/marco/star3.svg"); }
#fx-stars .star4 { width: 1.8%; }
#fx-stars .star4:after { padding-top: 100%; background-image: url("../images/marco/star4.svg"); -webkit-animation: star-anime2 6s linear 0s infinite; animation: star-anime2 6s linear 0s infinite; }
#fx-stars .star5 { width: 1.35%; }
#fx-stars .star5:after { padding-top: 100%; background-image: url("../images/marco/star5.svg"); -webkit-animation: star-anime3 6s linear 0s infinite; animation: star-anime3 6s linear 0s infinite; }
#stars1 { position: absolute; width: 100%; height: 100%; padding-top: 300vh; top: 0; left: 0; }
#stars2 { position: absolute; width: 100%; height: 100%; padding-top: 300vh; top: 0; left: 0; }
#stars3 { position: absolute; width: 100%; height: 100%; padding-top: 300vh; top: 0; left: 0; }
@media only screen and (max-width: 1280px) { #fx-stars { width: 156.25vw; margin-left: -78.125vw; } }
.btn { position: relative; display: inline-block; background: #2977d9; -webkit-transition: all 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); line-height: 1; cursor: pointer; }
.btn .label { -webkit-transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.btn:hover { opacity: 1; background: #0d4080; }
.btn:hover .label { opacity: 0.5; }
#modal-movie { position: fixed; visibility: hidden; opacity: 0; left: 0; top: 0%; width: 100%; height: 100%; z-index: 100001; -webkit-transition: visibility 0s 0.5s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; transition: visibility 0s 0.5s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; }
#modal-movie .container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: 100vh; max-width: 1280px; margin: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#modal-movie .bottom { margin-top: 2.75%; }
.modal-movie-active #modal-movie { visibility: visible; opacity: 1; -webkit-transition: visibility 0s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; transition: visibility 0s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; }
#modal-gallery { position: fixed; visibility: hidden; opacity: 0; left: 0; top: 0%; width: 100%; height: 100%; z-index: 100001; overflow: auto; -webkit-transition: visibility 0s 0.5s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; transition: visibility 0s 0.5s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; }
#modal-gallery .container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: 100vh; max-width: 2000px; margin: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#modal-gallery .container .wrap { position: relative; width: 100%; max-height: 608px; padding: 44px 0; overflow: hidden; }
#modal-gallery .container .btn-next, #modal-gallery .container .btn-prev, #modal-gallery .container .btn-close { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 61px; z-index: 10; cursor: pointer; }
#modal-gallery .container .btn-next:hover, #modal-gallery .container .btn-prev:hover, #modal-gallery .container .btn-close:hover { opacity: 0.5; }
#modal-gallery .container .btn-next, #modal-gallery .container .btn-prev { height: 61px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#modal-gallery .container .btn-next img, #modal-gallery .container .btn-prev img { width: 27.86885%; }
#modal-gallery .container .btn-next { left: 50%; margin-left: 540px; }
#modal-gallery .container .btn-prev { right: 50%; margin-right: 540px; }
#modal-gallery .container .btn-close { top: 0; left: 50%; margin-left: 540px; }
#modal-gallery .container .btn-close img { width: 36.06557%; }
@media only screen and (max-width: 1202px) { #modal-gallery .container .btn-next { left: auto; margin-left: 0; right: 0; }
  #modal-gallery .container .btn-prev { right: auto; margin-right: 0; left: 0; }
  #modal-gallery .container .btn-close { top: 0; left: auto; margin-left: 0; right: 0; } }
.gallery-carousel { position: relative; width: 100%; max-height: 608px; line-height: 0; }
.gallery-carousel li { position: relative; left: 0; top: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 61px; }
.gallery-carousel li img { display: block; margin: auto; }
.gallery-carousel li:nth-child(n+2) { display: none; position: absolute; }
.modal-gallery-active #modal-gallery { visibility: visible; opacity: 1; -webkit-transition: visibility 0s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; transition: visibility 0s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; }
@media only screen and (max-width: 640px) { #modal-gallery .container .wrap { padding: 6.875% 0; }
  #modal-gallery .container .btn-next, #modal-gallery .container .btn-prev, #modal-gallery .container .btn-close { width: 9.53125%; }
  .gallery-carousel li { padding: 0 9.53125%; } }
#modal-bg { position: fixed; visibility: hidden; opacity: 0; left: 0; top: 0%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 100000; -webkit-transition: visibility 0s 0.5s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; transition: visibility 0s 0.5s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; }
.modal-active #modal-bg { visibility: visible; opacity: 1; -webkit-transition: visibility 0s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; transition: visibility 0s, opacity 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s; }
@-webkit-keyframes twink-anime { 0% { background-position: 0 0; }
  100% { background-position: -10000px 5000px; } }
@keyframes twink-anime { 0% { background-position: 0 0; }
  100% { background-position: -10000px 5000px; } }
@-webkit-keyframes twink-anime2 { 0% { background-position: 0 0; }
  100% { background-position: 20000px -10000px; } }
@keyframes twink-anime2 { 0% { background-position: 0 0; }
  100% { background-position: 20000px -10000px; } }
@-webkit-keyframes galaxy-anime { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes galaxy-anime { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
#galaxy-bg { position: none; left: 0; top: 0; width: 100%; height: 100%; max-width: 2000px; margin: auto; z-index: -1; background: white; overflow: hidden; background: #121646;  }