@charset "UTF-8";
#loading { position: fixed; width: 100%; height: 100%; background: #000; z-index: 10010; }
#loading .load { width: 120px; height: 166px; display: block; }
#loading .load .obj { margin-top: -40px; position: relative; width: 120px; height: 120px; overflow: hidden; }
#loading .load .obj img { position: absolute; left: 0px; top: 0px; }
#loading .load p { margin-top: 28px; }
#loading .load p img { margin-right: -14px; }

#loading .load, #movie, #sound_select { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; text-align: center; }

#movie { width: 925px; height: 580px; z-index: 10004; }
#movie #btn_skip { text-align: right; margin-bottom: 20px; }
#movie #btn_movie_close { display: block; text-align: left; text-indent: -99999px; overflow: hidden; position: relative; width: 42px; height: 36px; overflow: hidden; padding: 0; margin: 0 0 20px auto; display: none; }
#movie #btn_movie_close a { display: block; width: 42px; height: 36px; overflow: hidden; }
#movie #btn_movie_close a:before, #movie #btn_movie_close a:after { content: ''; position: absolute; width: 54px; height: 4px; background: #fff; left: -6px; top: 16px; }
#movie #btn_movie_close a:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#movie #btn_movie_close a:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#sound_select { display: none; z-index: 10002; width: 220px; height: 210px; }
#sound_select dl dt { margin-bottom: 36px; }
#sound_select dl dd { background: url(/vrmmo-project/assets/images/pc/top/text_sound2.png) no-repeat center 10px; }
#sound_select dl dd ul { text-align: center; letter-spacing: -0.4em; }
#sound_select dl dd ul li { display: inline-block; }
#sound_select dl dd ul li + li { margin-left: 110px; }
#sound_select dl dd ul li a { padding: 10px; }

#overlay { position: fixed; width: 100%; height: 100%; background: #000; z-index: 10000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); opacity: 0.85; }

#header_top { position: relative; background: #000000; }
#header_top .mainvisual { position: relative; width: 100%; height: 750px; background: url(/vrmmo-project/assets/images/pc/top/main_visual.jpg) no-repeat top center; }
#header_top .mainvisual img { margin: 0; }
#header_top .mainvisual .layer1 { position: absolute; width: 2000px; left: 50%; top: 0px; margin-left: -1001px; }
#header_top .mainvisual .layer2 { position: absolute; left: 50%; top: 23px; margin-left: -734px; }
#header_top .mainvisual .layer3 { position: absolute; width: 2000px; left: 50%; top: 0px; margin-left: -1001px; }
#header_top .mainvisual .layer4 { position: absolute; left: 50%; top: 224px; margin-left: -265px; }
#header_top .mainvisual .layer5 { position: absolute; width: 2000px; left: 50%; top: 0px; margin-left: -1001px; }
#header_top .logo { top: 110px; left: 50%; margin-left: -2px; }
#header_top .text1 {position: absolute; left: 50%; margin-left: 25px; width: 265px; text-align: center;}
#header_top .text1-right { position: absolute; left: 50%; margin-left: 293px; width: 224px; text-align: center;}
#header_top .text2, #header_top #btn_movie, #header_top #btn_englishpage { position: absolute; left: 50%; margin-left: 15px; width: 550px; text-align: center; }
#header_top .text1 { top: 365px; }
#header_top .text1-right { top: 376px; }
#header_top .text2 { top: 442px; }
#header_top #btn_movie { top: 504px; }
#header_top #btn_englishpage { top: 582px;}
#header_top #btn_movie a ,#header_top #btn_englishpage a { position: relative; }
#header_top #btn_movie a:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: url(/vrmmo-project/assets/images/pc/top/btn_movie_on.png) no-repeat left top; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: all 200ms; -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; }
#header_top #btn_movie a:hover:after ,#header_top #btn_englishpage a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
#header_top .logo_ibm { right: 20px; top: 20px; }
#header_top .copy { right: 6px; bottom: 84px; }

#header_top { overflow: hidden; }
#header_top .mainvisual .layer1 { visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
#header_top .mainvisual .layer2 { visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); -moz-transition: all 1800ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: all 1800ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all 1800ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 1800ms cubic-bezier(0.23, 1, 0.32, 1); }
#header_top .mainvisual .layer3 { visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: all 5000ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: all 5000ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all 5000ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 5000ms cubic-bezier(0.23, 1, 0.32, 1); }
#header_top .mainvisual .layer4 { visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: all 1800ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: all 1800ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all 1800ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 1800ms cubic-bezier(0.23, 1, 0.32, 1); }
#header_top .logo, #header_top .text1, #header_top .logo, #header_top .text1-right, #header_top .text2, #header_top #btn_movie, #btn_englishpage { visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transform: translateY(40px); transform: translateY(40px); -moz-transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1); }

#header_top .text1 .wrap1, #header_top .text1-right .wrap1 { position: relative; }
#header_top .text1 .wrap1, #header_top .text1-right .wrap1, #header_top .text1 .wrap2, #header_top .text1-right .wrap2 { display: inline-block; }
#header_top .text1 span:before, #header_top .text1 span:after, #header_top .text1-right span:before, #header_top .text1-right span:after { content: ''; position: absolute; background: #fff; }
#header_top .text1 span:before, #header_top .text1-right span:before { width: 0px; height: 2px; }
#header_top .text1 span:after, #header_top .text1-right span:after { width: 2px; height: 0px; }
#header_top .text1 .wrap1:before, #header_top .text1-right .wrap1:before { top: 5px; left: 5px; }
#header_top .text1 .wrap1:after, #header_top .text1-right .wrap1:after { top: 5px; right: 5px; }
#header_top .text1 .wrap2:before, #header_top .text1-right .wrap2:before { bottom: 5px; right: 5px; }
#header_top .text1 .wrap2:after, #header_top .text1-right .wrap2:after { bottom: 5px; left: 5px; }
#header_top .logo_ibm, #header_top .copy { visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: all 1200ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: all 1200ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: all 1200ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 1200ms cubic-bezier(0.23, 1, 0.32, 1); }
#header_top.start .mainvisual .layer1, #header_top.start .mainvisual .layer2, #header_top.start .mainvisual .layer3, #header_top.start .mainvisual .layer4, #header_top.start .mainvisual .layer5 { visibility: visible; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
#header_top.start .logo, #header_top.start .text1, #header_top.start .text1-right, #header_top.start .text2, #header_top.start #btn_movie, #header_top.start #btn_englishpage, #header_top.start .logo_ibm, #header_top.start .copy { visibility: visible; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
#header_top.start .mainvisual .layer2 { -moz-transition-delay: 0ms; -o-transition-delay: 0ms; -webkit-transition-delay: 0ms; transition-delay: 0ms; }
#header_top.start .mainvisual .layer3 { -moz-transition-delay: 400ms; -o-transition-delay: 400ms; -webkit-transition-delay: 400ms; transition-delay: 400ms; }
#header_top.start .mainvisual .layer4 { -moz-transition-delay: 400ms; -o-transition-delay: 400ms; -webkit-transition-delay: 400ms; transition-delay: 400ms; -moz-animation: header_cogu 2s ease 400ms infinite alternate; -webkit-animation: header_cogu 2s ease 400ms infinite alternate; animation: header_cogu 2s ease 400ms infinite alternate; }
#header_top.start .logo { -moz-transition-delay: 480ms; -o-transition-delay: 480ms; -webkit-transition-delay: 480ms; transition-delay: 480ms; }
#header_top.start .text1, #header_top.start .text1-right { -moz-transition-delay: 960ms; -o-transition-delay: 960ms; -webkit-transition-delay: 960ms; transition-delay: 960ms; }
#header_top.start .text1 .wrap1:before { -moz-animation: header_text_line1 4s ease 1040ms infinite; -webkit-animation: header_text_line1 4s ease 1040ms infinite; animation: header_text_line1 4s ease 1040ms infinite; }
#header_top.start .text1 .wrap1:after { -moz-animation: header_text_line2 4s ease 1040ms infinite; -webkit-animation: header_text_line2 4s ease 1040ms infinite; animation: header_text_line2 4s ease 1040ms infinite; }
#header_top.start .text1 .wrap2:before { -moz-animation: header_text_line3 4s ease 1040ms infinite; -webkit-animation: header_text_line3 4s ease 1040ms infinite; animation: header_text_line3 4s ease 1040ms infinite; }
#header_top.start .text1 .wrap2:after { -moz-animation: header_text_line4 4s ease 1040ms infinite; -webkit-animation: header_text_line4 4s ease 1040ms infinite; animation: header_text_line4 4s ease 1040ms infinite; }
#header_top.start .text2 { -moz-transition-delay: 1120ms; -o-transition-delay: 1120ms; -webkit-transition-delay: 1120ms; transition-delay: 1120ms; }
#header_top.start #btn_movie, #header_top.start #btn_englishpage { -moz-transition-delay: 1520ms; -o-transition-delay: 1520ms; -webkit-transition-delay: 1520ms; transition-delay: 1520ms; }
#header_top.start .logo_ibm, #header_top.start .copy { -moz-transition-delay: 2000ms; -o-transition-delay: 2000ms; -webkit-transition-delay: 2000ms; transition-delay: 2000ms; }

@-moz-keyframes header_cogu { from { -moz-transform: translateY(10px); transform: translateY(10px); }
  to { -moz-transform: translateY(0px); transform: translateY(0px); } }
@-webkit-keyframes header_cogu { from { -webkit-transform: translateY(10px); transform: translateY(10px); }
  to { -webkit-transform: translateY(0px); transform: translateY(0px); } }
@keyframes header_cogu { from { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); }
  to { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } }
@-moz-keyframes header_text_line1 { 0% { width: 0px; left: 5px; right: inherit; }
  18% { width: 255px; left: 5px; right: inherit; }
  18.1% { width: 255px; left: inherit; right: 5px; }
  80% { width: 255px; left: inherit; right: 5px; }
  98% { width: 0px; left: inherit; right: 5px; }
  100% { width: 0px; left: inherit; right: 5px; } }
@-webkit-keyframes header_text_line1 { 0% { width: 0px; left: 5px; right: inherit; }
  18% { width: 255px; left: 5px; right: inherit; }
  18.1% { width: 255px; left: inherit; right: 5px; }
  80% { width: 255px; left: inherit; right: 5px; }
  98% { width: 0px; left: inherit; right: 5px; }
  100% { width: 0px; left: inherit; right: 5px; } }
@keyframes header_text_line1 { 0% { width: 0px; left: 5px; right: inherit; }
  18% { width: 255px; left: 5px; right: inherit; }
  18.1% { width: 255px; left: inherit; right: 5px; }
  80% { width: 255px; left: inherit; right: 5px; }
  98% { width: 0px; left: inherit; right: 5px; }
  100% { width: 0px; left: inherit; right: 5px; } }
@-moz-keyframes header_text_line2 { 0% { height: 0px; top: 5px; bottom: inherit; }
  18% { height: 54px; top: 5px; bottom: inherit; }
  18.1% { height: 54px; top: inherit; bottom: 5px; }
  80% { height: 54px; top: inherit; bottom: 5px; }
  98% { height: 0px; top: inherit; bottom: 5px; }
  100% { height: 0px; top: inherit; bottom: 5px; } }
@-webkit-keyframes header_text_line2 { 0% { height: 0px; top: 5px; bottom: inherit; }
  18% { height: 54px; top: 5px; bottom: inherit; }
  18.1% { height: 54px; top: inherit; bottom: 5px; }
  80% { height: 54px; top: inherit; bottom: 5px; }
  98% { height: 0px; top: inherit; bottom: 5px; }
  100% { height: 0px; top: inherit; bottom: 5px; } }
@keyframes header_text_line2 { 0% { height: 0px; top: 5px; bottom: inherit; }
  18% { height: 54px; top: 5px; bottom: inherit; }
  18.1% { height: 54px; top: inherit; bottom: 5px; }
  80% { height: 54px; top: inherit; bottom: 5px; }
  98% { height: 0px; top: inherit; bottom: 5px; }
  100% { height: 0px; top: inherit; bottom: 5px; } }
@-moz-keyframes header_text_line3 { 0% { width: 0px; left: inherit; right: 5px; }
  18% { width: 255px; left: inherit; right: 5px; }
  18.1% { width: 255px; left: 5px; right: inherit; }
  80% { width: 255px; left: 5px; right: inherit; }
  98% { width: 0px; left: 5px; right: inherit; }
  100% { width: 0px; left: 5px; right: inherit; } }
@-webkit-keyframes header_text_line3 { 0% { width: 0px; left: inherit; right: 5px; }
  18% { width: 255px; left: inherit; right: 5px; }
  18.1% { width: 255px; left: 5px; right: inherit; }
  80% { width: 255px; left: 5px; right: inherit; }
  98% { width: 0px; left: 5px; right: inherit; }
  100% { width: 0px; left: 5px; right: inherit; } }
@keyframes header_text_line3 { 0% { width: 0px; left: inherit; right: 5px; }
  18% { width: 255px; left: inherit; right: 5px; }
  18.1% { width: 255px; left: 5px; right: inherit; }
  80% { width: 255px; left: 5px; right: inherit; }
  98% { width: 0px; left: 5px; right: inherit; }
  100% { width: 0px; left: 5px; right: inherit; } }
@-moz-keyframes header_text_line4 { 0% { height: 0px; top: inherit; bottom: 5px; }
  18% { height: 54px; top: inherit; bottom: 5px; }
  18.1% { height: 54px; top: 5px; bottom: inherit; }
  80% { height: 54px; top: 5px; bottom: inherit; }
  98% { height: 0px; top: 5px; bottom: inherit; }
  100% { height: 0px; top: 5px; bottom: inherit; } }
@-webkit-keyframes header_text_line4 { 0% { height: 0px; top: inherit; bottom: 5px; }
  18% { height: 54px; top: inherit; bottom: 5px; }
  18.1% { height: 54px; top: 5px; bottom: inherit; }
  80% { height: 54px; top: 5px; bottom: inherit; }
  98% { height: 0px; top: 5px; bottom: inherit; }
  100% { height: 0px; top: 5px; bottom: inherit; } }
@keyframes header_text_line4 { 0% { height: 0px; top: inherit; bottom: 5px; }
  18% { height: 54px; top: inherit; bottom: 5px; }
  18.1% { height: 54px; top: 5px; bottom: inherit; }
  80% { height: 54px; top: 5px; bottom: inherit; }
  98% { height: 0px; top: 5px; bottom: inherit; }
  100% { height: 0px; top: 5px; bottom: inherit; } }
#top_nav { margin-top: -73px; background: url(/vrmmo-project/assets/images/pc/nav/nav_bg.png) repeat-x top center; }
#top_nav .scroll { position: absolute; left: 50%; top: -36px; width: 152px; height: 36px; margin-left: -76px; }
#top_nav .scroll a { position: relative; display: block; text-align: left; text-indent: -99999px; overflow: hidden; width: 152px; height: 36px; background: url(/vrmmo-project/assets/images/pc/nav/nav_scroll.png) no-repeat center; }
#top_nav .scroll a:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: url(/vrmmo-project/assets/images/pc/nav/nav_scroll_arrow.png) no-repeat center top; -moz-transition: all 350ms; -o-transition: all 350ms; -webkit-transition: all 350ms; transition: all 350ms; }
#top_nav .scroll a:hover:before { background-position: center bottom; }

#fix_nav { position: fixed; top: 0px; left: 0px; width: 100%; height: 92px; background: url(/vrmmo-project/assets/images/pc/nav/navfix_bg.png) repeat-x top center; -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -webkit-transform: translateY(-100px); transform: translateY(-100px); -moz-transition: all 350ms; -o-transition: all 350ms; -webkit-transition: all 350ms; transition: all 350ms; }
#fix_nav.open { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }

#top_nav { border-bottom: 1px solid #616364; }

#top_nav .social, #fix_nav .social { right: 118px; }
#top_nav .sound, #fix_nav .sound { position: absolute; right: 2px; top: 28px; overflow: hidden; *zoom: 1; padding-left: 20px; border-left: 1px solid #fff; }
#top_nav .sound dt, #top_nav .sound dd, #top_nav .sound li, #fix_nav .sound dt, #fix_nav .sound dd, #fix_nav .sound li { float: left; height: 21px; }
#top_nav .sound dt img, #top_nav .sound dd img, #top_nav .sound li img, #fix_nav .sound dt img, #fix_nav .sound dd img, #fix_nav .sound li img { vertical-align: top; }
#top_nav .sound li, #fix_nav .sound li { margin-left: 13px; display: none; }
#top_nav .sound a, #fix_nav .sound a { display: block; line-height: 0; height: 21px; }
#top_nav .sound .active, #fix_nav .sound .active { display: block; }

#contents { position: relative; background: url(/vrmmo-project/assets/images/pc/top/bg_main.png) repeat-y center top; }
#contents h2 { margin-bottom: 40px; text-align: center; }
#contents h3 { text-align: center; }

.message-container { width: 100%; height: 2025px; position: relative; }
.message-container #glitchBgList { position: absolute; z-index: 0; width: 2000px; height: 1304px; margin-left: -1000px; left: 50%; }
.message-container #glitchBgList ul { position: relative; width: 2000px; height: 1304px; }
.message-container #glitchBgList ul li { position: absolute; top: 0; left: 0; }
.message-container #canvasBg { position: absolute; z-index: 0; bottom: 0px; }
.message-container #prologue { background: transparent; padding: 0; }
.message-container #prologue .inner { height: 972px; }
.message-container #prologue .inner h2 { display: none; }
.message-container #prologue .inner .text { display: none; }
.message-container #prologue .inner .read { margin-top: 652px; }

#special { padding: 80px 0 20px; font-size: 16px; font-size: 1.14286rem; background : -webkit-gradient(linear, left top, left bottom, from(rgba(0,122,195,0.5)), to(rgba(104,108,221,0.5))); background : -webkit-linear-gradient(left, rgba(0,122,195,0.5), rgba(104,108,221,0.5)); background : linear-gradient(to right, rgba(0,122,195,0.5), rgba(104,108,221,0.5)); }
#special .mugendai { padding: 0 0 15px; text-align:center; }
#special .mugendai a { color: #9ff; }
#special .previous { width: 100%; min-height: 370px; box-sizing: border-box; overflow:hidden; }
#special .previous .post { width: 306px; box-sizing: border-box; padding: 20px 0; }
#special .previous .post-box { float: left; margin-right: 21px; }
#special .previous .post-box:last-child { margin-right: 0px; }
#special .previous .post .clm { width: 306px; height: auto; position: relative; overflow: visible; }
#special .previous .post .clm a{ width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index:1; }
#special .previous .post .clm .clm-img { width: 100%; height: auto; }
#special .previous .post .clm .clm-num { position: absolute; top: 0; left: 0; width: 50px; height: 50px; line-height: 50px; font-size: 1.66em; color: #fff; text-align: center; font-weight: bold; background : -webkit-gradient(linear, left top, left bottom, from(rgba(0,122,195,1)), to(rgba(104,108,221,1))); background : -webkit-linear-gradient(left, rgba(0,122,195,1), rgba(104,108,221,1)); background : linear-gradient(to right, rgba(0,122,195,1), rgba(104,108,221,1)); }
#special .previous .post .clm .mugendai-logo { position: absolute; top: 0; right: 0; width: 50px; height: 50px; }
#special .previous .post .summary { width: 306px; height: auto; position: relative; padding: 0; box-sizing: border-box; background-color: #000; }
#special .previous .post .summary a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#special .previous .post .summary h3 { padding: 10px; line-height:1.25em; text-align:left; font-weight: bold; color: #fff; min-height:5em; }
#special .previous .post .summary .entry-date { padding: 0 10px 10px 0; color: #fff; font-size: 0.84em; text-align: right; font-family: Century Gothic, sans-serif; }
#special .previous .post .comming { width: 306px; height: 330px; background-color: rgba(255,255,255,0.33); }
#special .previous .post .comming p { color: #fff; text-align: center; padding: 150px 0; }
#special .prevline { width: 100%; height: 13px; border:none; background-image: url(/vrmmo-project/assets/images/pc/top/line_quadruple.png); background-repeat: repeat-x; background-position: bottom left; clear: both; }

#introduction { text-align: center; padding: 80px 0 50px; }
#introduction h3 { margin-bottom: 34px; }

#prologue { text-align: center; background: #fff; padding: 140px 0; }
#prologue .read { margin-top: -110px; }
#prologue .read a { position: relative; }
#prologue .read a:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: url(/vrmmo-project/assets/images/pc/top/btn_read_on.png) no-repeat left top; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: all 200ms; -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; }
#prologue .read a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }

#outline { padding: 140px 0; font-size: 16px; font-size: 1.14286rem; }
#outline .unit:before, #outline .unit:after { content: ''; position: absolute; width: 11px; }
#outline .unit:before { right: -11px; top: 30px; height: 183px; background: url(/vrmmo-project/assets/images/pc/top/outline_img1.png) no-repeat right top; }
#outline .unit:after { left: -11px; bottom: 28px; height: 116px; background: url(/vrmmo-project/assets/images/pc/top/outline_img2.png) no-repeat left bottom; }
#outline .entry a:after { background: url(/vrmmo-project/assets/images/pc/top/btn_entry_on.png) no-repeat left top; }

#about { padding: 140px 0 0; }
#about h3 { margin-bottom: 30px; }
#about p { margin: 0 118px; }

#about .sao { padding: 140px 0; font-size: 16px; font-size: 1.14286rem; }
#about .sao .unit:before, #outline .unit:after { content: ''; position: absolute; width: 11px; }
#about .sao .unit:before { right: -11px; top: 30px; height: 183px; background: url(/vrmmo-project/assets/images/pc/top/outline_img1.png) no-repeat right top; }
#about .sao .unit:after { left: -11px; bottom: 28px; height: 116px; background: url(/vrmmo-project/assets/images/pc/top/outline_img2.png) no-repeat left bottom; }

#credit { margin-bottom: 70px; }
#credit .unit { display: inline-block; vertical-align: top; width: 460px; }
#credit .unit + .unit { margin-left: 35px; }
#credit .unit + .unit dl { width: 50%; float: left; }
#credit .unit + .unit dl dd { padding-left: 5em; }
#credit .unit + .unit .unit2 { width: 100%; margin-top: 4em; padding-top: 10px; border-top: 1px solid #fff; }
#credit .unit + .unit .unit2 dd { padding-left: 9em !important; }
#credit .unit h3 { margin-bottom: 10px; line-height: 40px; text-align: center; font-size: 20px; font-size: 1.42857rem; border-bottom: 1px solid #fff; }
#credit .unit dl { padding-bottom: 4px; }
#credit .unit dl dt { float: left; }
#credit .unit dl dd { padding-left: 8em; }

#logos { margin: 50px 0 60px; }
#logos ul { text-align: center; letter-spacing: -0.4em; }
#logos ul li { display: inline-block; margin: 0 20px; letter-spacing: 0px; }
#logos ul li a { vertical-align: middle; -moz-transition: all 200ms; -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
#logos ul li a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; }

.para_bg { overflow: hidden; position: relative; z-index: 1000; background: #fff; }
.para_bg:before, .para_bg:after { content: ''; position: absolute; left: 0px; height: 0px; width: 100%; -moz-box-shadow: black 0px 0px 0px 1px; -webkit-box-shadow: black 0px 0px 0px 1px; box-shadow: black 0px 0px 0px 1px; z-index: 2; }
.para_bg:before { top: 0px; }
.para_bg:after { bottom: 0px; }
.para_bg .para_inner { position: absolute; left: 50%; margin-left: -1000px; width: 2000px; z-index: 1; }

#line1 { margin: 250px -100px -50px; height: 214px; -moz-transform: rotate(-6.7deg); -ms-transform: rotate(-6.7deg); -webkit-transform: rotate(-6.7deg); transform: rotate(-6.7deg); }
#line1 .para_inner { -moz-transform: rotate(6.7deg) translateY(-200px); -ms-transform: rotate(6.7deg) translateY(-200px); -webkit-transform: rotate(6.7deg) translateY(-200px); transform: rotate(6.7deg) translateY(-200px); }

#line2 { margin: -118px -100px -50px; height: 214px; -moz-transform: rotate(7.4deg); -ms-transform: rotate(7.4deg); -webkit-transform: rotate(7.4deg); transform: rotate(7.4deg); }
#line2 .para_inner { -moz-transform: rotate(-7.4deg) translateY(-200px); -ms-transform: rotate(-7.4deg) translateY(-200px); -webkit-transform: rotate(-7.4deg) translateY(-200px); transform: rotate(-7.4deg) translateY(-200px); }

#bg_asuna, #bg_kirito { position: absolute; left: 50%; bottom: -426px; z-index: 0; overflow: hidden; }
#bg_asuna img, #bg_kirito img { position: absolute; left: 0px; top: 0px; }

#bg_asuna { margin-left: -740px; width: 450px; height: 1400px; }

#bg_kirito { margin-left: 330px; width: 450px; height: 1400px; }

#prologue_text { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 8000; background: #fff; color: #000; visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
#prologue_text #scrollbox { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; position: relative; width: 100%; height: 100%; }
#prologue_text #scrollbox .viewport { height: 100%; overflow: hidden; position: relative; z-index: 50; }
#prologue_text #scrollbox .overview { list-style: none; position: absolute; left: 0; top: 0; width: 100%; }
#prologue_text #scrollbox .scrollbar { background: #7f7f7f; position: absolute; right: 12px; top: 15px; height: 714px; width: 2px; z-index: 100; }
#prologue_text #scrollbox .track { height: 100%; width: 11px; position: relative; margin-left: -5px; }
#prologue_text #scrollbox .thumb { background: #000000; height: 20px; width: 11px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0; }
#prologue_text #scrollbox .thumb .end { overflow: hidden; height: 0px; width: 0px; }
#prologue_text #scrollbox .disable { display: none; }
#prologue_text #scrollbox .noSelect { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
#prologue_text .inner { padding: 150px 0; position: initial; }
#prologue_text h2 { margin-bottom: 80px; text-align: center; }
#prologue_text p { padding: 0 66px; font-size: 20px; font-size: 1.42857rem; line-height: 2.2em; font-family: "游明朝","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","ＭＳ 明朝",serif; }
#prologue_text .close_top { position: absolute; right: 120px; top: 58px; width: 42px; height: 36px; padding: 0; }
#prologue_text .close_top a { display: block; text-align: left; text-indent: -99999px; overflow: hidden; display: block; width: 42px; height: 36px; position: relative; overflow: hidden; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms; }
#prologue_text .close_top a:before, #prologue_text .close_top a:after { content: ''; position: absolute; width: 54px; height: 4px; background: #000; left: -6px; top: 16px; }
#prologue_text .close_top a:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#prologue_text .close_top a:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#prologue_text .close_top a:hover { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#prologue_text .close_bottom { margin: 120px auto 0; text-align: center; }
#prologue_text .close_bottom a { position: relative; }
#prologue_text .close_bottom a:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: url(/vrmmo-project/assets/images/pc/top/btn_close_on.png) no-repeat left top; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: all 200ms; -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; }
#prologue_text .close_bottom a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }


#epilogue { text-align: center; padding: 20px 0; position:relative; background:#FFFFFF url(../../images/pc/canvas_bg/txt_epilog.png) no-repeat right center; }
#epilogue:before{ content:""; display:block; position:absolute; top:-127px; background:url(../../images/pc/canvas_bg/noiz_top.png) repeat-x center top; height: 127px; width: 100%; }
#epilogue:after{ content:""; display:block; position:absolute; bottom:-127px; background:url(../../images/pc/canvas_bg/noiz_bottom.png) repeat-x center top; height: 127px; width: 100%; }
#epilogue .read { margin-top: -110px; }
#epilogue .read a { position: relative; }
#epilogue .read a:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: url(/vrmmo-project/assets/images/pc/top/btn_read_on.png) no-repeat left top; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: all 200ms; -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; }
#epilogue .read a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }

#epilogue_text { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 8000; background: #fff; color: #000; visibility: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
#epilogue_text #scrollbox2 { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; position: relative; width: 100%; height: 100%; }
#epilogue_text #scrollbox2 .viewport { height: 100%; overflow: hidden; position: relative; z-index: 50; }
#epilogue_text #scrollbox2 .overview { list-style: none; position: absolute; left: 0; top: 0; width: 100%; }
#epilogue_text #scrollbox2 .scrollbar { background: #7f7f7f; position: absolute; right: 12px; top: 15px; height: 714px; width: 2px; z-index: 100; }
#epilogue_text #scrollbox2 .track { height: 100%; width: 11px; position: relative; margin-left: -5px; }
#epilogue_text #scrollbox2 .thumb { background: #000000; height: 20px; width: 11px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0; }
#epilogue_text #scrollbox2 .thumb .end { overflow: hidden; height: 0px; width: 0px; }
#epilogue_text #scrollbox2 .disable { display: none; }
#epilogue_text #scrollbox2 .noSelect { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
#epilogue_text .inner { padding: 150px 0; position: initial; }
#epilogue_text h2 { margin-bottom: 80px; text-align: center; }
#epilogue_text p { padding: 0 66px; font-size: 20px; font-size: 1.42857rem; line-height: 2.2em; font-family: "游明朝","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","ＭＳ 明朝",serif; }
#epilogue_text .close_top { position: absolute; right: 120px; top: 58px; width: 42px; height: 36px; padding: 0; }
#epilogue_text .close_top a { display: block; text-align: left; text-indent: -99999px; overflow: hidden; display: block; width: 42px; height: 36px; position: relative; overflow: hidden; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms; }
#epilogue_text .close_top a:before, #epilogue_text .close_top a:after { content: ''; position: absolute; width: 54px; height: 4px; background: #000; left: -6px; top: 16px; }
#epilogue_text .close_top a:before { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#epilogue_text .close_top a:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#epilogue_text .close_top a:hover { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#epilogue_text .close_bottom { margin: 120px auto 0; text-align: center; }
#epilogue_text .close_bottom a { position: relative; }
#epilogue_text .close_bottom a:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: url(/vrmmo-project/assets/images/pc/top/btn_close_on.png) no-repeat left top; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: all 200ms; -o-transition: all 200ms; -webkit-transition: all 200ms; transition: all 200ms; }
#epilogue_text .close_bottom a:hover:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }

#photo { padding: 0 0 140px; margin-top:-50px; background-image:url(../../images/pc/top/photo_bg_event.png), url(../../images/pc/top/photo_bg_photo.png); background-repeat:no-repeat; background-position:center left, center right;}
#photo .swipebox_li{ text-align:center; margin:30px auto;}
#photo .swipebox_li li{width:200px; margin:10px; display:inline-block;}
#photo .swipebox_li li img{width:100%; height:auto;}
#voice  { padding: 50px 0 140px; }
#voice .twitter_box{width:520px; margin:0 auto;}
#about .movie_block{ width:770px; margin:20px auto;}
#about p.block_right{ width:380px; margin:0 0 0 390px;}
#about .block_left{ width:360px; float:left;}
#about .about_ibm{ background-color:#00222f; padding:25px; text-align:center;}
#about .about_ibm .ibm_logo{ margin:20px auto;}
#about .about_ibm p{ width:770px; margin:0 auto;}
#outline.section .unit{ width:750px; font-size:14px;}
#outline h3{ margin:20px auto;}
#outline .chara_kirito{ position:relative; padding-bottom:50px;}
#outline .chara_kirito h4{margin-left:-42px;}
#outline .chara_kirito p{margin:20px 0 0 140px; text-align:left;}
#outline .image_kirito{ position:absolute; top:-58px; left:0;}
#outline .chara_asuna{ position:relative; padding-bottom:80px;}
#outline .chara_asuna p{margin:20px 130px 20px 0; text-align:right;}
#outline .chara_asuna h4{margin-right:-42px; text-align:right;}
#outline .image_asuna{ position:absolute; bottom:10px; right:0;}