/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
button,
svg {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: middle;
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav,
ul,
li {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  text-decoration: none;
  color: inherit;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: rgba(0, 0, 0, 0);
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

img {
  vertical-align: middle;
}
@font-face {
  font-family: "Noto Sans CJK jp";
  src: url("../fonts/NotoSansCJKjp-Bold.woff2") format("woff2"), url("../fonts/NotoSansCJKjp-Bold.woff") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: "Noto Sans CJK jp";
  src: url("../fonts/NotoSansCJKjp-Regular.woff2") format("woff2"), url("../fonts/NotoSansCJKjp-Regular.woff") format("woff");
  font-weight: normal;
}

@font-face {
  font-family: "Noto Serif JP";
  src: url("../fonts/NotoSerifJP-Bold.woff2") format("woff2"), url("../fonts/NotoSerifJP-Bold.woff") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: "RobotoMono";
  src: url("../fonts/RobotoMono-Bold.woff2") format("woff2"), url("../fonts/RobotoMono-Bold.woff") format("woff");
  font-weight: bold;
}

::-moz-selection {
  color: #a12c1c;
  background: #00253e;
  text-shadow: none;
}

::selection {
  color: #a12c1c;
  background: #00253e;
  text-shadow: none;
}

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  font-family: "Noto Sans CJK jp";
  color: #ffffff;
}

body {
  width: 100%;
  height: 100%;
  background-image: url(../images/bg.png);
  background-size: 14.71354vw 16.79688vw;
}

@media screen and (min-width: 769px) {
  body {
    background-size: 56px 64px;
  }
}

main {
  position: relative;
}

@media screen and (max-width: 768px) {
  .pc_only {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .sp_only {
    display: none !important;
  }
}

.font_red {
  color: red !important;
}

.bold {
  font-weight: bold !important;
}

section {
  margin: 0 auto;
  padding: 10.41667vw 0 10.41667vw;
  max-width: 768px;
  overflow: hidden;
  background-color: #00253e;
  background-size: cover;
  position: relative;
}

@media screen and (min-width: 769px) {
  section {
    padding: 4.22535vh 0 5.6338vh;
    max-width: 54.08451vh;
  }
}

section .anchor {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 1px;
  left: 0;
  z-index: -1;
}

@media screen and (min-width: 769px) {
  section .anchor {
    top: 8.31579vw;
  }
}

@media screen and (min-width: 950px) {
  section .anchor {
    top: -79px;
  }
}

section .content {
  position: relative;
  z-index: 2;
}

section .bg_gradation {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

@media screen and (min-width: 769px) {
  section .bg_gradation {
    width: 768px;
  }
}

.inner {
  margin: 0 auto;
  width: calc(100% - 10.41667vw);
  max-width: 732px;
}

@media screen and (min-width: 769px) {
  .inner {
    width: calc(100% - 80px);
    max-width: 688px;
  }
}

.underline {
  text-decoration: underline;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.underline:hover {
  -webkit-text-decoration-color: rgba(28, 53, 70, 0);
          text-decoration-color: rgba(28, 53, 70, 0);
}

.section_title {
  width: 100%;
}

.section_title img {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .section_title img {
    margin: 0 auto;
    width: 384px;
    display: block;
  }
}

.ss_wrap {
  width: 100%;
  overflow: hidden;
}

.ss_wrap .ss {
  position: relative;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: event_infinity-loop_sp 30s infinite linear both;
          animation: event_infinity-loop_sp 30s infinite linear both;
}

@media screen and (min-width: 450px) {
  .ss_wrap .ss {
    height: 160px;
    -webkit-animation: event_infinity-loop_tab 60s infinite linear both;
            animation: event_infinity-loop_tab 60s infinite linear both;
  }
}

@-webkit-keyframes event_infinity-loop_sp {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-852px);
            transform: translateX(-852px);
  }
}

@keyframes event_infinity-loop_sp {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-852px);
            transform: translateX(-852px);
  }
}

@-webkit-keyframes event_infinity-loop_tab {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-1704px);
            transform: translateX(-1704px);
  }
}

@keyframes event_infinity-loop_tab {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-1704px);
            transform: translateX(-1704px);
  }
}

.ss_img {
  height: 100%;
}

.h3_area {
  height: 11.71875vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (min-width: 769px) {
  .h3_area {
    height: 45px;
  }
}

.h3_area img {
  height: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.h3_area .h3_rep_area {
  padding-top: 2.86458vw;
  height: 100%;
  position: relative;
}

@media screen and (min-width: 769px) {
  .h3_area .h3_rep_area {
    padding-top: 11px;
  }
}

.h3_area .h3_rep_area img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.h3_area .h3_rep_area h3 {
  font-size: 5.20833vw;
  line-height: 1;
  font-weight: bold;
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  .h3_area .h3_rep_area h3 {
    font-size: 20px;
  }
}

.note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.undeline {
  text-decoration: underline;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  cursor: pointer;
}

.undeline:hover {
  -webkit-text-decoration-color: rgba(255, 255, 255, 0);
          text-decoration-color: rgba(255, 255, 255, 0);
}

.lilo-accordion {
  width: 100%;
  margin-top: 5.20833vw;
}

@media screen and (min-width: 769px) {
  .lilo-accordion {
    margin-top: 2.8169vh;
  }
}

.lilo-accordion .lilo-accordion-control {
  width: 100%;
  background-color: #1c3546;
}

.lilo-accordion .lilo-accordion-control .accordion-control-inner {
  width: 100%;
  padding: 3.90625vw 2.60417vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 769px) {
  .lilo-accordion .lilo-accordion-control .accordion-control-inner {
    padding: 2.11268vh 1.40845vh;
  }
}

.lilo-accordion .lilo-accordion-control .accordion-control-inner p {
  font-size: 3.64583vw !important;
  line-height: 1.5 !important;
  font-weight: bold !important;
}

@media screen and (min-width: 769px) {
  .lilo-accordion .lilo-accordion-control .accordion-control-inner p {
    font-size: 1.97183vh !important;
  }
}

.lilo-accordion .lilo-accordion-control .arrow {
  width: 2.86458vw;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media screen and (min-width: 769px) {
  .lilo-accordion .lilo-accordion-control .arrow {
    width: 1.5493vh;
  }
}

.lilo-accordion .lilo-accordion-control.active .arrow {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.lilo-accordion .lilo-accordion-content {
  padding: 3.90625vw 2.60417vw;
  background-color: #000000;
}

@media screen and (min-width: 769px) {
  .lilo-accordion .lilo-accordion-content {
    padding: 2.11268vh 1.40845vh;
  }
}

.lilo-accordion .lilo-accordion-content p {
  font-size: 3.64583vw !important;
  line-height: 6.25vw !important;
  font-weight: normal !important;
}

@media screen and (min-width: 769px) {
  .lilo-accordion .lilo-accordion-content p {
    font-size: 1.97183vh !important;
    line-height: 3.38028vh !important;
  }
}

#mv {
  padding: 0;
}

#mv .mv_area {
  width: 100%;
}

#mv .mv_area div,
#mv .mv_area a {
  width: 100%;
  display: block;
}

#mv .mv_area div img,
#mv .mv_area a img {
  width: 100%;
  pointer-events: none;
}

#introduction {
  background-image: url(../images/bg_img.png);
  background-repeat: repeat;
  background-size: 2.08333vw;
}

@media screen and (min-width: 769px) {
  #introduction {
    background-size: 1.12676vh;
  }
}

#introduction .top_catch {
  width: 100%;
}

#introduction .desc {
  margin-top: 3.90625vw;
  font-size: 4.16667vw;
  line-height: 6.51042vw;
}

@media screen and (min-width: 769px) {
  #introduction .desc {
    margin-top: 2.11268vh;
    font-size: 2.25352vh;
    line-height: 3.52113vh;
  }
}

#introduction .top_desc {
  margin-top: 9.11458vw;
}

@media screen and (min-width: 769px) {
  #introduction .top_desc {
    margin-top: 4.92958vh;
  }
}

#introduction .story {
  margin-top: 3.90625vw;
  padding-top: 78.125vw;
  position: relative;
}

@media screen and (min-width: 769px) {
  #introduction .story {
    margin-top: 2.11268vh;
    padding-top: 42.25352vh;
  }
}

#introduction .story .bg_belt {
  width: 300%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-30deg);
          transform: translate(-50%, -50%) rotate(-30deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  background-color: #0b4268;
  z-index: 1;
}

@media screen and (min-width: 769px) {
  #introduction .story .bg_belt {
    height: 18.30986vh;
    top: 21.83099vh;
  }
}

#introduction .story .kirito {
  width: 146.35417vw;
  position: absolute;
  top: 0;
  left: 41%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
}

@media screen and (min-width: 769px) {
  #introduction .story .kirito {
    width: 79.15493vh;
  }
}

#introduction .story .story_desc_area {
  position: relative;
  z-index: 10;
}

#introduction .story .story_desc_area .story_desc_area_inner {
  padding: 18.22917vw 7.8125vw 6.51042vw;
  background-color: #000000;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area .story_desc_area_inner {
    padding: 9.85915vh 4.22535vh 3.52113vh;
  }
}

#introduction .story .story_desc_area .story_desc_area_inner .title_story {
  width: 76.82292vw;
  position: absolute;
  top: -9.11458vw;
  left: 52%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area .story_desc_area_inner .title_story {
    width: 41.5493vh;
    top: -4.92958vh;
  }
}

#introduction .story .story_desc_area .story_desc_area_inner .decoration {
  width: 5.46875vw;
  position: absolute;
  z-index: 1;
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area .story_desc_area_inner .decoration {
    width: 2.95775vh;
  }
}

#introduction .story .story_desc_area .story_desc_area_inner .top_left {
  top: 1.30208vw;
  left: 1.30208vw;
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area .story_desc_area_inner .top_left {
    top: 0.70423vh;
    left: 0.70423vh;
  }
}

#introduction .story .story_desc_area .story_desc_area_inner .top_right {
  top: 1.30208vw;
  right: 1.30208vw;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area .story_desc_area_inner .top_right {
    top: 0.70423vh;
    right: 0.70423vh;
  }
}

#introduction .story .story_desc_area .story_desc_area_inner .bottom_right {
  bottom: 1.30208vw;
  right: 1.30208vw;
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area .story_desc_area_inner .bottom_right {
    bottom: 0.70423vh;
    right: 0.70423vh;
  }
}

#introduction .story .story_desc_area .story_desc_area_inner .bottom_left {
  bottom: 1.30208vw;
  left: 1.30208vw;
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1);
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area .story_desc_area_inner .bottom_left {
    bottom: 0.70423vh;
    left: 0.70423vh;
  }
}

#introduction .story .story_desc_area .story_desc_area_inner .story_desc p {
  margin-top: 5.20833vw;
  font-size: 4.16667vw;
  line-height: 6.51042vw;
  font-weight: bold;
  color: #2b92c2;
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area .story_desc_area_inner .story_desc p {
    margin-top: 2.8169vh;
    font-size: 2.25352vh;
    line-height: 3.52113vh;
  }
}

#introduction .story .story_desc_area .story_desc_area_inner .story_desc p:first-child {
  margin-top: 0;
}

#introduction .story .story_desc_area::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 1.30208vw;
  left: 1.30208vw;
  border: solid 0.26042vw #2b92c2;
  z-index: -1;
}

@media screen and (min-width: 769px) {
  #introduction .story .story_desc_area::after {
    top: 0.70423vh;
    left: 0.70423vh;
    border: solid 0.14085vh #2b92c2;
  }
}

#introduction .nazo_btn_area {
  margin-top: 11.71875vw;
  width: 100%;
  position: relative;
}

@media screen and (min-width: 769px) {
  #introduction .nazo_btn_area {
    margin-top: 6.33803vh;
  }
}

#introduction .nazo_btn_area .nazo_btn {
  width: 100%;
  display: block;
  position: relative;
  z-index: 10;
}

#introduction .nazo_btn_area .nazo_btn_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 1.30208vw;
  left: 1.30208vw;
  background-color: #a12c1c;
}

@media screen and (min-width: 769px) {
  #introduction .nazo_btn_area .nazo_btn_bg {
    top: 0.70423vh;
    left: 0.70423vh;
  }
}

#mission {
  background-image: url(../images/bg_img.png);
  background-repeat: repeat;
  background-size: 2.08333vw;
}

@media screen and (min-width: 769px) {
  #mission {
    background-size: 1.12676vh;
  }
}

#mission .mission_img {
  width: 100%;
}

#mission .links {
  width: 100%;
}

#mission .links .answer {
  width: 100%;
}

#mission .links .answer input {
  padding: 0 5.20833vw;
  margin-top: 7.8125vw;
  width: 100%;
  height: 15.625vw;
  font-size: 5.20833vw;
  line-height: 15.625vw;
  font-family: "Noto Sans CJK jp";
  font-weight: bold;
  color: #000000;
  border: none;
  border-radius: 0;
  outline: none;
}

#mission .links .answer input::-webkit-input-placeholder {
  color: #cccccc;
}

#mission .links .answer input:-ms-input-placeholder {
  color: #cccccc;
}

#mission .links .answer input::-ms-input-placeholder {
  color: #cccccc;
}

#mission .links .answer input::placeholder {
  color: #cccccc;
}

@media screen and (min-width: 769px) {
  #mission .links .answer input {
    padding: 0 2.8169vh;
    margin-top: 4.22535vh;
    height: 8.4507vh;
    font-size: 2.8169vh;
    line-height: 8.4507vh;
  }
}

#mission .links .answer .send_btn_area {
  width: 100%;
  margin-top: 2.60417vw;
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  #mission .links .answer .send_btn_area {
    margin-top: 1.40845vh;
  }
}

#mission .links .answer .send_btn_area img {
  width: 100%;
  position: relative;
  cursor: pointer;
  z-index: 1;
}

#mission .links .answer .send_btn_area .send_btn_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 1.30208vw;
  left: 1.30208vw;
  background-color: #a12c1c;
  z-index: -1;
}

@media screen and (min-width: 769px) {
  #mission .links .answer .send_btn_area .send_btn_bg {
    top: 0.70423vh;
    left: 0.70423vh;
  }
}

#mission .accordion {
  margin-top: 7.8125vw;
}

@media screen and (min-width: 769px) {
  #mission .accordion {
    margin-top: 4.22535vh;
  }
}

#mission .accordion .lilo-accordion-control {
  margin-top: 5.20833vw;
}

@media screen and (min-width: 769px) {
  #mission .accordion .lilo-accordion-control {
    margin-top: 2.8169vh;
  }
}

#mission .accordion .lilo-accordion-control:first-child {
  margin-top: 0;
}

#clear_desc {
  background-image: url(../images/bg_img.png);
  background-repeat: repeat;
  background-size: 2.08333vw;
}

@media screen and (min-width: 769px) {
  #clear_desc {
    background-size: 1.12676vh;
  }
}

#clear_desc .claer_desc {
  margin: 0 auto;
  width: 88.93229vw;
  display: block;
}

@media screen and (min-width: 769px) {
  #clear_desc .claer_desc {
    width: 48.09859vh;
  }
}

.clear_img {
  margin: 0 auto;
  width: 100vw;
  display: block;
}

@media screen and (min-width: 769px) {
  .clear_img {
    width: 54.08451vh;
  }
}

.clear_img img {
  width: 100%;
}

#clear_content {
  padding-bottom: 32.55208vw;
  background-image: url(../images/bg_img.png);
  background-repeat: repeat;
  background-size: 2.08333vw;
  position: relative;
  z-index: 10;
  overflow: visible;
}

@media screen and (min-width: 769px) {
  #clear_content {
    padding-bottom: 17.60563vh;
    background-size: 1.12676vh;
  }
}

#clear_content .share_desc {
  width: 100%;
}

#clear_content .sns_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 9.11458vw;
}

@media screen and (min-width: 769px) {
  #clear_content .sns_area {
    margin-top: 4.92958vh;
  }
}

#clear_content .sns_area .sns_btn_area {
  width: calc(33% - 1.69271vw);
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  #clear_content .sns_area .sns_btn_area {
    width: calc(33% - 0.91549vh);
  }
}

#clear_content .sns_area .sns_btn_area img {
  width: 100%;
  position: relative;
  cursor: pointer;
  z-index: 1;
}

#clear_content .story_desc_area {
  margin-top: 32.55208vw;
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area {
    margin-top: 17.60563vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner {
  padding: 18.22917vw 7.8125vw 6.51042vw;
  background-color: #000000;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area .story_desc_area_inner {
    padding: 9.85915vh 4.22535vh 3.52113vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner .kirito_icon {
  width: 39.0625vw;
  position: absolute;
  top: -22.13542vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area .story_desc_area_inner .kirito_icon {
    width: 21.12676vh;
    top: -11.97183vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner .decoration {
  width: 5.46875vw;
  position: absolute;
  z-index: 1;
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area .story_desc_area_inner .decoration {
    width: 2.95775vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner .top_left {
  top: 1.30208vw;
  left: 1.30208vw;
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area .story_desc_area_inner .top_left {
    top: 0.70423vh;
    left: 0.70423vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner .top_right {
  top: 1.30208vw;
  right: 1.30208vw;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area .story_desc_area_inner .top_right {
    top: 0.70423vh;
    right: 0.70423vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner .bottom_right {
  bottom: 1.30208vw;
  right: 1.30208vw;
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area .story_desc_area_inner .bottom_right {
    bottom: 0.70423vh;
    right: 0.70423vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner .bottom_left {
  bottom: 1.30208vw;
  left: 1.30208vw;
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1);
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area .story_desc_area_inner .bottom_left {
    bottom: 0.70423vh;
    left: 0.70423vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner .story_desc p {
  margin-top: 5.20833vw;
  font-size: 4.16667vw;
  line-height: 6.51042vw;
  font-weight: bold;
  color: #2b92c2;
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area .story_desc_area_inner .story_desc p {
    margin-top: 2.8169vh;
    font-size: 2.25352vh;
    line-height: 3.52113vh;
  }
}

#clear_content .story_desc_area .story_desc_area_inner .story_desc p:first-child {
  margin-top: 0;
}

#clear_content .story_desc_area::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 1.30208vw;
  left: 1.30208vw;
  border: solid 0.26042vw #2b92c2;
  z-index: -1;
}

@media screen and (min-width: 769px) {
  #clear_content .story_desc_area::after {
    top: 0.70423vh;
    left: 0.70423vh;
    border: solid 0.14085vh #2b92c2;
  }
}

#clear_content .more {
  width: 91.27604vw;
  position: absolute;
  bottom: -16.92708vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 10;
}

@media screen and (min-width: 769px) {
  #clear_content .more {
    width: 49.3662vh;
    bottom: -9.15493vh;
  }
}

#event_info {
  padding-top: 22.13542vw;
  width: 100%;
  position: relative;
  background-image: url(../images/bg_clear.png);
  background-size: 14.71354vw 16.79688vw;
}

@media screen and (min-width: 769px) {
  #event_info {
    padding-top: 11.97183vh;
    background-size: 7.95775vh 9.08451vh;
  }
}

#event_info .more_catch {
  width: 100%;
}

#event_info .mv_pc {
  margin: 10.41667vw auto 0;
  width: 100%;
  max-width: 100vw;
}

@media screen and (min-width: 769px) {
  #event_info .mv_pc {
    margin: 5.6338vh auto 0;
    max-width: 54.08451vh;
  }
}

#event_info .more_event {
  margin-top: 10.41667vw;
  width: 100%;
}

@media screen and (min-width: 769px) {
  #event_info .more_event {
    margin-top: 5.6338vh;
  }
}

#event_info .modal_btn_area {
  margin: 7.8125vw auto 0;
  width: 100%;
  position: relative;
}

@media screen and (min-width: 769px) {
  #event_info .modal_btn_area {
    margin: 4.22535vh auto 0;
  }
}

#event_info .modal_btn_area .cm_modal_btn {
  width: 100%;
  display: block;
  position: relative;
  z-index: 10;
}

#event_info .modal_btn_area img {
  width: 100%;
  pointer-events: none;
}

#event_info .modal_btn_area .modal_btn_bg {
  position: absolute;
  bottom: -1.30208vw;
  right: -1.30208vw;
  z-index: 1;
}

@media screen and (min-width: 769px) {
  #event_info .modal_btn_area .modal_btn_bg {
    bottom: -0.70423vh;
    right: -0.70423vh;
  }
}

#event_info .title_story {
  margin-top: 9.11458vw;
  width: 100%;
}

@media screen and (min-width: 769px) {
  #event_info .title_story {
    margin-top: 4.92958vh;
  }
}

#event_info .story_desc {
  margin-top: 6.51042vw;
  width: 100%;
}

@media screen and (min-width: 769px) {
  #event_info .story_desc {
    margin-top: 3.52113vh;
  }
}

#event_info .story_desc p {
  margin-top: 4.6875vw;
  font-size: 3.64583vw;
  line-height: 7.03125vw;
  text-shadow: 0px 3px 8px #000;
}

@media screen and (min-width: 769px) {
  #event_info .story_desc p {
    margin-top: 2.53521vh;
    font-size: 1.97183vh;
    line-height: 3.80282vh;
  }
}

#event_info .story_desc p:first-child {
  margin-top: 0;
}

#event_info .bnr_sao_nazo {
  margin-top: 7.8125vw;
  width: 100%;
  display: block;
}

@media screen and (min-width: 769px) {
  #event_info .bnr_sao_nazo {
    margin-top: 4.22535vh;
  }
}

#event_info .bnr_sao_nazo img {
  width: 100%;
}

#retry {
  background-image: url(../images/bg_img.png);
  background-repeat: repeat;
  background-size: 2.08333vw;
}

@media screen and (min-width: 769px) {
  #retry {
    background-size: 1.12676vh;
  }
}

#retry .retry_btn {
  width: 100%;
  position: relative;
  display: block;
  z-index: 10;
}

#retry .retry_btn img {
  width: 100%;
}

#retry .retry_btn .retry_btn_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 1.30208vw;
  left: 1.30208vw;
  background-color: #14719d;
  z-index: -1;
}

@media screen and (min-width: 769px) {
  #retry .retry_btn .retry_btn_bg {
    top: 0.70423vh;
    left: 0.70423vh;
  }
}

footer {
  padding: 10.41667vw 0;
  background-color: #00253e;
}

@media screen and (min-width: 769px) {
  footer {
    padding: 5.6338vh 0;
    margin: 0 auto;
    width: 54.08451vh;
  }
}

footer .logo_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

footer .logo_area .logo_sao {
  width: 72.13542vw;
  display: block;
}

@media screen and (min-width: 769px) {
  footer .logo_area .logo_sao {
    width: 39.01408vh;
  }
}

footer .logo_area .logo_sao img {
  width: 100%;
}

footer .logo_area .logo_area_bottom {
  margin-top: 7.8125vw;
  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;
}

@media screen and (min-width: 769px) {
  footer .logo_area .logo_area_bottom {
    margin-top: 4.22535vh;
  }
}

footer .logo_area .logo_area_bottom .logo_scrap {
  margin-left: 10.41667vw;
  width: 25.39062vw;
  display: block;
}

@media screen and (min-width: 769px) {
  footer .logo_area .logo_area_bottom .logo_scrap {
    margin-left: 5.6338vh;
    width: 13.73239vh;
  }
}

footer .logo_area .logo_area_bottom .logo_scrap img {
  width: 100%;
}

footer .logo_area .logo_area_bottom .logo_bne {
  width: 18.61979vw;
  display: block;
}

@media screen and (min-width: 769px) {
  footer .logo_area .logo_area_bottom .logo_bne {
    width: 10.07042vh;
  }
}

footer .logo_area .logo_area_bottom .logo_bne img {
  width: 100%;
}

footer .footer_banner {
  margin-top: 7.8125vw;
}

@media screen and (min-width: 769px) {
  footer .footer_banner {
    margin-top: 4.22535vh;
  }
}

footer .footer_banner a {
  margin-top: 3.90625vw;
  width: 100%;
  display: block;
}

@media screen and (min-width: 769px) {
  footer .footer_banner a {
    margin-top: 2.11268vh;
  }
}

footer .footer_banner a:first-child {
  margin-top: 0;
}

footer .footer_banner a img {
  width: 100%;
}

footer .copyright {
  margin-top: 7.8125vw;
  font-size: 2.60417vw;
  line-height: 5.20833vw;
  color: #ffffff;
  text-align: center;
}

@media screen and (min-width: 769px) {
  footer .copyright {
    margin-top: 4.22535vh;
    font-size: 1.40845vh;
    line-height: 2.8169vh;
  }
}

footer .logo_yodaka {
  margin-left: 0.65104vw;
  width: 25.39062vw;
}

@media screen and (min-width: 769px) {
  footer .logo_yodaka {
    margin-left: 0.35211vh;
    width: 13.73239vh;
  }
}

#nav_bg_sp {
  width: 100%;
  height: 33.85417vw;
  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;
  background-color: #000000;
}

#nav_bg_sp .navi_logo {
  width: 47.78646vw;
}

#nav_bg_sp .navi_logo img {
  width: 100%;
}

@media screen and (min-width: 769px) {
  #nav_bg_sp {
    display: none;
  }
}

#nav_bg_sp.active {
  opacity: 1;
  pointer-events: auto;
}

#nav_list {
  width: 100%;
  height: 100%;
  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;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000000;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 800;
}

@media screen and (min-width: 769px) {
  #nav_list {
    padding: 0 4.21053vw;
    height: 8.42105vw;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (min-width: 950px) {
  #nav_list {
    padding: 0 40px;
    height: 80px;
  }
}

#nav_list .navi_logo {
  width: 14.94737vw;
}

#nav_list .navi_logo img {
  width: 100%;
}

@media screen and (min-width: 950px) {
  #nav_list .navi_logo {
    width: 142px;
  }
}

#nav_list .nav_list_area {
  padding: 2.60417vw;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  #nav_list .nav_list_area {
    padding: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

#nav_list .nav_list_area li {
  margin-top: 6.51042vw;
}

@media screen and (min-width: 769px) {
  #nav_list .nav_list_area li {
    margin-top: 0;
    margin-left: 1.57895vw;
  }
}

@media screen and (min-width: 950px) {
  #nav_list .nav_list_area li {
    margin-left: 15px;
  }
}

#nav_list .nav_list_area li:first-child {
  margin-top: 0;
}

#nav_list .nav_list_area li a {
  position: relative;
  font-size: 5.20833vw;
  line-height: 1;
  font-weight: bold;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media screen and (min-width: 769px) {
  #nav_list .nav_list_area li a {
    font-size: 1.68421vw;
  }
  #nav_list .nav_list_area li a:hover {
    color: #a12c1c;
  }
}

@media screen and (min-width: 950px) {
  #nav_list .nav_list_area li a {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) {
  #nav_list .nav_list_area li a::after {
    content: "";
    width: 100%;
    position: absolute;
    bottom: -0.63158vw;
    left: 0;
    border-bottom: solid 0.21053vw #a12c1c;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  #nav_list .nav_list_area li a:hover::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@media screen and (min-width: 950px) {
  #nav_list .nav_list_area li a::after {
    bottom: -6px;
    border-bottom: solid 2px #a12c1c;
  }
}

#nav_list .nav_list_area li p {
  position: relative;
  font-size: 5.20833vw;
  line-height: 1;
  font-weight: bold;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media screen and (min-width: 769px) {
  #nav_list .nav_list_area li p {
    font-size: 1.68421vw;
  }
}

@media screen and (min-width: 950px) {
  #nav_list .nav_list_area li p {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) {
  #nav_list .nav_list_area li a.current {
    color: #a12c1c;
  }
  #nav_list .nav_list_area li a.current::after {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

#nav_list.active {
  opacity: 1;
  pointer-events: auto;
}

#menu_btn,
#close_btn {
  width: 15.625vw;
  position: fixed;
  top: 2.60417vw;
  right: 2.60417vw;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 900;
}

@media screen and (min-width: 769px) {
  #menu_btn,
  #close_btn {
    width: 60px;
    top: 30px;
    right: 30px;
  }
}

#menu_btn img,
#close_btn img {
  width: 100%;
}

#menu_btn .menu_img,
#close_btn .menu_img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#menu_btn .menu_img.inactive,
#close_btn .menu_img.inactive {
  opacity: 0;
}

#menu_btn.active {
  pointer-events: auto;
  opacity: 1;
}

#menu_btn.faq_menu_btn {
  pointer-events: auto;
  opacity: 1;
}

#close_btn.active {
  pointer-events: auto;
  opacity: 1;
}

#side_navi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: fixed;
  bottom: 2.60417vw;
  right: 2.60417vw;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 700;
}

@media screen and (min-width: 769px) {
  #side_navi {
    bottom: 40px;
    right: 40px;
  }
}

#side_navi .sns_link {
  margin-top: 1.30208vw;
  width: 10.41667vw;
  pointer-events: auto;
}

@media screen and (min-width: 769px) {
  #side_navi .sns_link {
    margin-top: 5px;
    width: 50px;
  }
}

#side_navi .sns_link img {
  width: 100%;
}

#side_navi #ticket_link {
  margin-top: 2.60417vw;
  width: 30.59896vw;
  pointer-events: auto;
}

@media screen and (min-width: 769px) {
  #side_navi #ticket_link {
    margin-top: 20px;
    width: 236px;
  }
}

#side_navi #ticket_link img {
  width: 100%;
}

#side_navi.active {
  opacity: 1;
}

.modal {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  align-items: center;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.modal .modal_close_btn {
  width: 15.625vw;
  position: absolute;
  top: 2.60417vw;
  right: 2.60417vw;
  cursor: pointer;
  z-index: 20;
}

@media screen and (min-width: 769px) {
  .modal .modal_close_btn {
    width: 60px;
    position: absolute;
    top: 30px;
    right: 30px;
  }
}

.modal .modal_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  pointer-events: auto;
  z-index: 1;
}

.modal .modal_content_area {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  background-color: #001727;
  z-index: 10;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area {
    width: 768px;
    height: auto;
    max-height: calc(100% - 100px);
  }
}

.modal .modal_content_area .top_view {
  width: 100%;
  position: relative;
}

.modal .modal_content_area .top_view img {
  width: 100%;
}

.modal .modal_content_area .top_view .cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.modal .modal_content_area .inner {
  padding: 10.41667vw 0;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .inner {
    padding: 40px 0;
  }
}

.modal .modal_content_area .inner p {
  margin-top: 2.60417vw;
  font-size: 3.64583vw;
  line-height: 7.29167vw;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .inner p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 32px;
  }
}

.modal .modal_content_area .inner p:first-child {
  margin-top: 0;
}

.modal .modal_content_area .inner p span {
  color: #a12c1c;
  font-weight: bold;
  vertical-align: top;
}

.modal .modal_content_area .inner .heading {
  margin-top: 10.41667vw;
  width: 100%;
  padding: 1.5625vw 2.60417vw;
  background-color: #0b4268;
  font-size: 5.20833vw;
  line-height: 1.6;
  font-weight: bold;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .inner .heading {
    margin-top: 40px;
    padding: 10px 15px;
    font-size: 20px;
  }
}

.modal .modal_content_area .inner .heading span {
  font-size: 3.125vw;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .inner .heading span {
    font-size: 12px;
  }
}

.modal .modal_content_area .inner .understand_top_desc {
  margin-top: 10.41667vw;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .inner .understand_top_desc {
    margin-top: 40px;
  }
}

.modal .modal_content_area .movie {
  margin-top: 2.60417vw;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .movie {
    margin-top: 20px;
  }
}

.modal .modal_content_area .top_desc {
  margin-top: 10.41667vw;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .top_desc {
    margin-top: 40px;
  }
}

.modal .modal_content_area .title {
  height: 20.83333vw;
  padding: 0 5.20833vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #2b92c2;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .title {
    height: 80px;
    padding: 0 20px;
  }
}

.modal .modal_content_area .title h2 {
  width: 65.10417vw;
  font-size: 5.20833vw;
  line-height: 6.51042vw;
  font-weight: bold;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .title h2 {
    width: 500px;
    font-size: 20px;
    line-height: 30px;
  }
}

.modal .modal_content_area .twitter_link {
  margin-top: 10.41667vw;
  width: 100%;
  height: 15.625vw;
  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;
  background-color: #1da1f2;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .twitter_link {
    margin: 40px auto 0;
    width: 344px;
    height: 60px;
  }
}

.modal .modal_content_area .twitter_link p {
  font-size: 5.20833vw;
  line-height: 1;
  font-weight: bold;
}

@media screen and (min-width: 769px) {
  .modal .modal_content_area .twitter_link p {
    font-size: 20px;
  }
}

.modal .bg_transparent {
  background-color: rgba(0, 23, 39, 0);
}

.modal .centering {
  height: auto;
}

.modal .ng_text {
  text-align: center;
  font-size: 4.16667vw;
  line-height: 9.11458vw;
  font-weight: normal;
  color: #ffffff;
}

@media screen and (min-width: 769px) {
  .modal .ng_text {
    font-size: 2.25352vh;
    line-height: 4.92958vh;
  }
}

.modal .movie {
  padding-top: 56.25%;
  width: 100%;
  position: relative;
  z-index: 10;
}

.modal .movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.modal .goods_img {
  width: 100%;
  position: relative;
  z-index: 10;
}

.modal.active {
  z-index: 990;
  opacity: 1;
}
/*# sourceMappingURL=style.css.map */