@charset "UTF-8";
#contents {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  letter-spacing: -0.01em;
  line-height: 1;
  box-sizing: border-box;
  font-weight: normal;
  line-height: normal;
  color: #000;
  font-size: 14px; }
  #contents * {
    box-sizing: border-box; }
    #contents *:before {
      box-sizing: border-box; }
    #contents *:after {
      box-sizing: border-box; }
    #contents * div,
    #contents * dl,
    #contents * dt,
    #contents * dd,
    #contents * ul,
    #contents * ol,
    #contents * li,
    #contents * h1,
    #contents * h2,
    #contents * h3,
    #contents * h4,
    #contents * h5,
    #contents * h6,
    #contents * pre,
    #contents * code,
    #contents * form,
    #contents * fieldset,
    #contents * legend,
    #contents * input,
    #contents * textarea,
    #contents * p,
    #contents * blockquote,
    #contents * th,
    #contents * td {
      font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      -webkit-text-size-adjust: 100%; }
  #contents fieldset,
  #contents img {
    border: 0;
    vertical-align: top; }
  #contents address,
  #contents caption,
  #contents cite,
  #contents code,
  #contents dfn,
  #contents th,
  #contents var {
    font-style: normal;
    font-weight: normal; }
  #contents li {
    list-style: none; }
  #contents caption,
  #contents th {
    text-align: left; }
  #contents q:before,
  #contents q:after {
    content: ""; }
  #contents input,
  #contents textarea,
  #contents select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit; }
  #contents input,
  #contents textarea,
  #contents select {
    *font-size: 100%; }
  #contents a,
  #contents a:link,
  #contents a:active,
  #contents a:visited {
    color: #333;
    text-decoration: none; }

#contents {
  /* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bs%3A%5B%7BT%3A%22t%22%2Ce%3A%22b%22%2Cd%3A1200%2CD%3A0%2Cf%3A%7Bx%3A0%2Cy%3A0%7D%2Ct%3A%7Bx%3A0%2Cy%3A-60%7D%2Cs%3A1%2Cb%3A0%7D%2C%7BT%3A%22t%22%2Ce%3A%22B%22%2Cd%3A3000%2CD%3A600%2Cf%3A%7Bx%3A0%2Cy%3A0%7D%2Ct%3A%7Bx%3A0%2Cy%3A650%7D%2Cs%3A1%2Cb%3A1%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1600%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A0.7%2Cy%3A0.7%7D%2Cs%3A1%2Cb%3A1%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A600%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A0.2%2Cy%3A0.2%7D%2Cs%3A1%2Cb%3A1%7D%5D%7D */ }
  #contents #contents {
    max-width: 100%;
    padding-bottom: 0; }
  #contents #contents .contents_inner {
    width: 950px;
    margin: 0 auto;
    padding-top: 64px;
    overflow: hidden; }
  #contents #contents .contents_inner {
    width: 100% !important;
    padding: 0px;
    padding-top: 0.5rem;
    overflow: auto !important;
    position: relative; }
    @media screen and (orientation: landscape) {
      #contents #contents .contents_inner.contents_tablet {
        /* landscape-specific styles */
        max-width: 100vw !important;
        width: 100vw !important; } }
    @media screen and (max-width: 768px) {
      #contents #contents .contents_inner {
        padding-top: 0rem; } }
  #contents .sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0; }
  #contents .quiz {
    width: 100%;
    height: 42rem;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    touch-action: manipulation;
    z-index: 2;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box; }
    #contents .quiz:after {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
      z-index: -1;
      content: url("/network/bousai/images/icon/quiz_btn_pause.png") url("/network/bousai/images/icon/quiz_btn_play.png") url("/network/bousai/images/icon/quiz_btn_pause.png") url("/network/bousai/images/icon/quiz_btn_forward.png") url("/network/bousai/images/icon/quiz_icon_item.png") url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_down_high.png"); }
    #contents .quiz *,
    #contents .quiz *::after,
    #contents .quiz *::before {
      box-sizing: inherit;
      margin: 0;
      padding: 0; }
    #contents .quiz input[type="text"],
    #contents .quiz input[type="button"] {
      -webkit-appearance: none; }
    #contents .quiz img {
      max-width: 100%;
      min-height: 1%; }
    @media screen and (max-width: 1024px) {
      #contents .quiz {
        width: 100%; } }
    @media screen and (max-width: 768px) {
      #contents .quiz {
        height: 100vw;
        min-height: 43.75rem; } }
    @media screen and (max-width: 580px) {
      #contents .quiz {
        max-height: 41.6875rem;
        height: 100vh;
        min-height: auto; } }
    #contents .quiz.lp {
      height: 31.25rem; }
    #contents .quiz_noscript {
      position: absolute;
      top: 1rem;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      z-index: 3;
      font-size: 1rem;
      line-height: 1.4;
      background-color: rgba(255, 255, 255, 0.95);
      padding: 0.5rem 1rem;
      border: 0.125rem solid #ff0224;
      border-radius: 0.5rem; }
      @media screen and (max-width: 768px) {
        #contents .quiz_noscript {
          font-size: 0.8125rem;
          width: 90%;
          max-width: none; } }
      #contents .quiz_noscript .quiz_close_notice {
        font-size: 1rem;
        display: block;
        margin-left: auto;
        margin-right: 0;
        border: none;
        background-color: transparent; }
        #contents .quiz_noscript .quiz_close_notice:before {
          content: "✕";
          display: inline-block;
          margin-right: 0.5rem; }
        #contents .quiz_noscript .quiz_close_notice:hover {
          cursor: pointer;
          text-decoration: underline; }
      #contents .quiz_noscript.noscript_hidden {
        visibility: hidden; }
      #contents .quiz_noscript > a {
        color: #001e7c;
        text-decoration: underline; }
        #contents .quiz_noscript > a:hover {
          color: #517dbe; }
    #contents .quiz_header {
      width: 0;
      height: 0;
      text-indent: -5000px;
      font-size: 0.0625rem;
      color: transparent; }
    #contents .quiz_page_container {
      width: 100%;
      z-index: 1;
      height: auto;
      position: absolute; }
      @media screen and (max-width: 1024px) {
        #contents .quiz_page_container {
          width: 100%; } }
    #contents .quiz_page {
      width: 100%;
      margin-bottom: 2px;
      height: 42rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow-y: hidden;
      overflow-x: hidden;
      overflow: hidden; }
      @media screen and (max-width: 768px) {
        #contents .quiz_page {
          height: 100vw;
          min-height: 43.75rem;
          background-size: contain, cover; } }
      @media screen and (max-width: 580px) {
        #contents .quiz_page {
          max-height: 41.6875rem;
          height: 100vh;
          min-height: auto; } }
      #contents .quiz_page_inner {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow-y: hidden;
        overflow-x: hidden;
        padding-bottom: 8.75rem; }
        @media screen and (max-width: 768px) {
          #contents .quiz_page_inner {
            padding-bottom: 6.25rem; } }
      #contents .quiz_page:after {
        position: absolute;
        bottom: 0;
        left: 0;
        background-image: url("/network/bousai/images/bg/quiz_bg_tv_pc.png");
        background-repeat: no-repeat;
        background-size: 100% 8.75rem;
        width: 100%;
        height: 8.75rem;
        display: block;
        content: ""; }
        @media screen and (max-width: 768px) {
          #contents .quiz_page:after {
            height: 6.25rem;
            background-image: url("/network/bousai/images/bg/quiz_bg_tv_sp_high.png");
            background-size: 100% 6.25rem; } }
    #contents .quiz_pageUpper_inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f8e997;
      background-image: url("/network/bousai/images/bg/quiz_studio_foreground2.png"), url("/network/bousai/images/bg/quiz_bg_town2.png"), url("/network/bousai/images/bg/quiz_bg_sky.png");
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-position: center bottom 50%, center 2.5rem, center top;
      background-size: 120%, cover, 100% 8%, cover; }
      #contents .quiz_pageUpper_inner:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url("/network/bousai/images/bg/quiz_studio_foreground_gadget.png");
        background-repeat: no-repeat;
        background-position: left 30% bottom 60%;
        background-size: 87.5rem; }
        @media screen and (min-width: 1300px) {
          #contents .quiz_pageUpper_inner:before {
            background-size: 90.625rem;
            background-position: center bottom 60%; } }
      @media screen and (min-width: 1300px) {
        #contents .quiz_pageUpper_inner {
          background-size: 87.5rem 42rem, cover, 100% 8%;
          background-position: center bottom -10rem, center 2.5rem, center top; } }
      @media screen and (max-width: 1024px) {
        #contents .quiz_pageUpper_inner {
          background-size: 140%, cover, 100% 8%;
          background-position: center bottom -7.5rem, center 2.5rem, center top; } }
      @media screen and (max-width: 768px) {
        #contents .quiz_pageUpper_inner {
          background-position: center bottom -40%, center 2.5rem, center top; } }
      @media screen and (max-width: 580px) {
        #contents .quiz_pageUpper_inner {
          background-position: center bottom -25%, center 2.5rem, center top; } }
      @media screen and (max-width: 420px) {
        #contents .quiz_pageUpper_inner {
          background-position: center bottom -12%, center 2.5rem, center top; } }
      #contents .quiz_pageUpper_inner.withVoice_inner, #contents .quiz_pageUpper_inner.start_inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8e997;
        background-image: url("/network/bousai/images/bg/quiz_studio_foreground2.png"), url("/network/bousai/images/bg/quiz_bg_town2.png"), linear-gradient(90deg, #aed7ef 0%, white 39.33%, #f9fafc 48.54%, #e8edf3 61.04%, #cbd7e5 75.41%, #a4b9d1 91.06%, #8aa5c4 100%);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: center bottom 50%, center 2.5rem, center;
        background-size: 120%, cover, cover; }
        @media screen and (min-width: 1300px) {
          #contents .quiz_pageUpper_inner.withVoice_inner, #contents .quiz_pageUpper_inner.start_inner {
            background-size: 87.5rem 42rem, cover, cover;
            background-position: center bottom -10rem, center 2.5rem, center; } }
        @media screen and (max-width: 1024px) {
          #contents .quiz_pageUpper_inner.withVoice_inner, #contents .quiz_pageUpper_inner.start_inner {
            background-size: 140%, cover, cover;
            background-position: center bottom -7.5rem, center 2.5rem, center; } }
        @media screen and (max-width: 768px) {
          #contents .quiz_pageUpper_inner.withVoice_inner, #contents .quiz_pageUpper_inner.start_inner {
            background-position: center bottom -40%, center 2.5rem, center; } }
        @media screen and (max-width: 580px) {
          #contents .quiz_pageUpper_inner.withVoice_inner, #contents .quiz_pageUpper_inner.start_inner {
            background-position: center bottom -25%, center 2.5rem, center; } }
        @media screen and (max-width: 420px) {
          #contents .quiz_pageUpper_inner.withVoice_inner, #contents .quiz_pageUpper_inner.start_inner {
            background-position: center bottom -12%, center 2.5rem, center; } }
      #contents .quiz_pageUpper_inner.lecture_inner {
        background-color: #d6eef0;
        background-image: url("/network/bousai/images/bg/quiz_bg_town2.png");
        background-repeat: no-repeat;
        background-position: center 2.5rem;
        background-size: cover;
        overflow: hidden; }
        #contents .quiz_pageUpper_inner.lecture_inner:before {
          content: "";
          background: none; }
      #contents .quiz_pageUpper_inner.question_inner {
        background-color: #f3f8e4;
        overflow: hidden; }
    #contents .quiz_overlay_container {
      width: 100%;
      height: auto;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0; }
    #contents .quiz_margin {
      width: 100%;
      height: 8.75rem;
      bottom: 0; }
  #contents .page_overlay {
    background-color: rgba(0, 0, 0, 0.5); }
  #contents .page_hidden {
    visibility: visible; }
  #contents .page_modal {
    background-color: rgba(0, 0, 0, 0.5); }
    #contents .page_modal#mitem {
      background: url("/network/bousai/images/bg/quiz_bg_radiant.png") no-repeat;
      background-position: center;
      background-size: cover; }
    #contents .page_modal#mget1, #contents .page_modal#mget2, #contents .page_modal#mget3, #contents .page_modal#mget4, #contents .page_modal#mget5, #contents .page_modal#mget6 {
      background-image: url("/network/bousai/images/bg/quiz_bg_spot2.jpg");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 43.125rem 33.125rem;
      background-color: #1a1a1a; }
      @media screen and (min-width: 1300px) {
        #contents .page_modal#mget1, #contents .page_modal#mget2, #contents .page_modal#mget3, #contents .page_modal#mget4, #contents .page_modal#mget5, #contents .page_modal#mget6 {
          background-size: 50rem 33.125rem; } }
      @media screen and (max-width: 1024px) {
        #contents .page_modal#mget1, #contents .page_modal#mget2, #contents .page_modal#mget3, #contents .page_modal#mget4, #contents .page_modal#mget5, #contents .page_modal#mget6 {
          background-position: top 3.125rem center; } }
      @media screen and (max-width: 768px) {
        #contents .page_modal#mget1, #contents .page_modal#mget2, #contents .page_modal#mget3, #contents .page_modal#mget4, #contents .page_modal#mget5, #contents .page_modal#mget6 {
          background-position: top 2.5rem center;
          background-size: 100% calc(100% - 100px); } }
  #contents .page_over {
    position: absolute;
    width: 100%;
    height: 120%;
    top: 0;
    left: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.5);
    background: radial-gradient(ellipse at 55% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.1) 100%);
    visibility: hidden;
    opacity: 0; }
    #contents .page_over.photo {
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s linear 0s; }
      #contents .page_over.photo.active {
        z-index: 110;
        height: 100%;
        transition: opacity 0.2s linear 0s; }
        #contents .page_over.photo.active:hover {
          cursor: pointer; }
    #contents .page_over.wait {
      background: rgba(0, 0, 0, 0.8);
      background: rgba(255, 255, 255, 0.85);
      background: radial-gradient(circle at center 42%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.97) 35%, rgba(254, 254, 254, 0.8) 40%, rgba(150, 150, 150, 0.8) 75%, rgba(0, 0, 0, 0.8) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s linear 0s; }
      @media screen and (max-width: 768px) {
        #contents .page_over.wait {
          background: radial-gradient(circle, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.97) 30%, rgba(254, 254, 254, 0.8) 50%, rgba(150, 150, 150, 0.8) 85%, black 100%); } }
      #contents .page_over.wait.active {
        z-index: 110;
        height: 100%;
        transition: opacity 0.2s linear 0s; }
    #contents .page_over.active {
      visibility: visible;
      opacity: 1;
      z-index: 2; }
  #contents .page_start .page_over, #contents .page_end .page_over {
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    z-index: 2;
    visibility: visible;
    height: 100%; }
  #contents .page_start .page_over {
    background: transparent; }
  #contents .initial_hidden {
    visibility: hidden; }
  #contents .question {
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 1.5rem 3.125rem; }
    @media screen and (max-width: 1024px) {
      #contents .question {
        width: 100%;
        padding: 0 0 3.125rem; } }
    @media screen and (max-width: 768px) {
      #contents .question {
        flex-direction: column;
        align-items: center;
        padding: 0 0 3.90625vw; } }
    @media screen and (max-width: 580px) {
      #contents .question {
        padding-bottom: 0;
        justify-content: flex-start; } }
    #contents .question_monitor {
      z-index: 0;
      width: 46.875rem;
      height: 27.25rem;
      background: url("/network/bousai/images/bg/quiz_bg_monitor_question_pc.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: relative;
      padding: 3.375rem 1.5rem 1.125rem; }
      @media screen and (max-width: 1024px) {
        #contents .question_monitor {
          width: 73.24219vw;
          background-size: 100% 100%;
          padding: 5.27344vw 2.34375vw 1.75781vw; } }
      @media screen and (max-width: 768px) {
        #contents .question_monitor {
          width: 95vw;
          padding-top: 5.20833vw; } }
      @media screen and (max-width: 580px) {
        #contents .question_monitor {
          width: 100vw;
          height: 70%;
          padding-bottom: 0.5rem; } }
      @media screen and (max-width: 420px) {
        #contents .question_monitor {
          padding-top: 7vw;
          height: 65%; } }
    #contents .question_master {
      position: absolute;
      width: 10.75rem;
      height: 22.9375rem;
      top: 1.25rem;
      left: 1.25rem;
      z-index: 0; }
      #contents .question_master_inner {
        position: relative; }
        #contents .question_master_inner > img {
          position: absolute;
          top: 0;
          left: 0; }
        #contents .question_master_inner .master_smile {
          -webkit-animation: smile 13s linear infinite;
                  animation: smile 13s linear infinite; }
        #contents .question_master_inner .master_blink {
          -webkit-animation: master_blink 13s linear infinite;
                  animation: master_blink 13s linear infinite; }
      @media screen and (max-width: 1024px) {
        #contents .question_master {
          width: 16.79688vw;
          height: 35.83984vw; } }
      @media screen and (max-width: 768px) {
        #contents .question_master {
          width: 20.83333vw;
          height: 46.875vw; } }
      @media screen and (max-width: 580px) {
        #contents .question_master {
          width: 23.4375vw;
          top: 35%;
          transform: translateY(-50%);
          left: 0.625rem; } }
    #contents .question_problem {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      height: 50%; }
      #contents .question_problem_text {
        background-color: rgba(255, 255, 255, 0.9);
        width: 32rem;
        height: 11.375rem;
        border: 2px solid #000;
        position: relative;
        padding: 1.5rem 1.125rem 1.125rem; }
        @media screen and (max-width: 1024px) {
          #contents .question_problem_text {
            width: 50vw;
            padding: 2.34375vw 1.75781vw 1.75781vw; } }
        @media screen and (max-width: 960px) {
          #contents .question_problem_text {
            padding-top: 1.5rem; } }
        @media screen and (max-width: 768px) {
          #contents .question_problem_text {
            height: 40%;
            width: 75%;
            height: 34vw;
            letter-spacing: -0.02em; } }
        @media screen and (max-width: 580px) {
          #contents .question_problem_text {
            padding-top: 4%;
            height: 100%; } }
        @media screen and (max-width: 420px) {
          #contents .question_problem_text {
            padding-top: 6%; } }
        #contents .question_problem_text > p {
          line-height: 1.4;
          font-size: 1.5625rem;
          font-weight: bold; }
          @media screen and (max-width: 1024px) {
            #contents .question_problem_text > p {
              font-size: 1.5rem; } }
          @media screen and (max-width: 990px) {
            #contents .question_problem_text > p {
              font-size: 2.5vw; } }
          @media screen and (max-width: 580px) {
            #contents .question_problem_text > p {
              font-size: 1.125rem; } }
          @media screen and (max-width: 420px) {
            #contents .question_problem_text > p {
              font-size: 4vw; } }
          #contents .question_problem_text > p.small {
            font-size: 1.125rem; }
            @media screen and (max-width: 1024px) {
              #contents .question_problem_text > p.small {
                font-size: 1.9vw; } }
            @media screen and (max-width: 768px) {
              #contents .question_problem_text > p.small {
                font-size: 2.5vw; } }
            @media screen and (max-width: 580px) {
              #contents .question_problem_text > p.small {
                font-size: 3vw; } }
            @media screen and (max-width: 420px) {
              #contents .question_problem_text > p.small {
                font-size: 3.2vw; } }
      #contents .question_problem_header {
        position: absolute;
        text-indent: -5000px;
        top: -2.8125rem;
        left: 50%;
        transform: translateX(-50%);
        width: 18.75rem;
        height: 4.125rem;
        background-image: url("/network/bousai/images/question/quiz_header_pc_01_high.png");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.25rem;
        font-weight: bold; }
        #contents .question_problem_header.header_1 {
          background-image: url("/network/bousai/images/question/quiz_header_pc_01_high.png"); }
        #contents .question_problem_header.header_2 {
          background-image: url("/network/bousai/images/question/quiz_header_pc_02_high.png"); }
        #contents .question_problem_header.header_3 {
          background-image: url("/network/bousai/images/question/quiz_header_pc_03_high.png"); }
        #contents .question_problem_header.header_4 {
          background-image: url("/network/bousai/images/question/quiz_header_pc_04_high.png"); }
        #contents .question_problem_header.header_5 {
          background-image: url("/network/bousai/images/question/quiz_header_pc_05_high.png"); }
        #contents .question_problem_header.header_6 {
          background-image: url("/network/bousai/images/question/quiz_header_pc_06_high.png"); }
        @media screen and (max-width: 1024px) {
          #contents .question_problem_header {
            width: 29.29688vw;
            height: 6.44531vw;
            top: -3.90625vw; } }
        @media screen and (max-width: 580px) {
          #contents .question_problem_header {
            width: 39.0625vw;
            height: 8.59375vw;
            top: -5vw; } }
    #contents .question_choices {
      margin-top: 0.5rem;
      padding: 0rem 0.5rem;
      height: 10rem;
      z-index: 1;
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 960px) {
        #contents .question_choices {
          height: 10.625rem; } }
      @media screen and (max-width: 768px) {
        #contents .question_choices {
          padding: 0rem 0rem; } }
      @media screen and (max-width: 580px) {
        #contents .question_choices {
          height: 55%;
          max-height: 10rem; } }
      @media screen and (max-width: 420px) {
        #contents .question_choices {
          height: 45%; } }
    #contents .question_choice {
      padding-top: 0.375rem;
      padding-bottom: 0rem;
      width: calc(33% - 2px);
      transition: 0.2s ease-out;
      background-color: transparent;
      border-radius: 0.75rem;
      border: none;
      z-index: 1;
      overflow: visible; }
      @media screen and (max-width: 960px) {
        #contents .question_choice {
          height: 100%; } }
      @media screen and (max-width: 768px) {
        #contents .question_choice {
          width: calc(33% - 1px); } }
      @media screen and (max-width: 768px) {
        #contents .question_choice {
          display: flex; } }
      #contents .question_choice .choice_inner {
        display: block;
        border: solid #000;
        border-width: 3px;
        border-radius: 0.75rem; }
        @media screen and (max-width: 960px) {
          #contents .question_choice .choice_inner {
            height: 100%;
            width: 100%; }
            #contents .question_choice .choice_inner > span {
              min-height: 8.75rem; } }
        @media screen and (max-width: 580px) {
          #contents .question_choice .choice_inner {
            display: flex;
            width: 100%;
            min-height: 8.125rem; }
            #contents .question_choice .choice_inner > span {
              min-height: 7.5rem;
              width: 100%; } }
        @media screen and (max-width: 420px) {
          #contents .question_choice .choice_inner {
            min-height: 7.875rem; }
            #contents .question_choice .choice_inner > span {
              min-height: 7.25rem; } }
        @media screen and (max-width: 340px) {
          #contents .question_choice .choice_inner {
            min-height: 6.5rem; }
            #contents .question_choice .choice_inner > span {
              min-height: 5.875rem; } }
        #contents .question_choice .choice_inner > span {
          padding: 0.75rem 0.5rem 0.5625rem;
          position: relative;
          border: 2px solid #fff;
          display: flex;
          align-items: flex-end;
          height: 9.25rem;
          border-radius: 0.625rem; }
          #contents .question_choice .choice_inner > span.inner_span6 {
            align-items: center;
            justify-content: center; }
            #contents .question_choice .choice_inner > span.inner_span6 .question_choice_text {
              line-height: 1.25; }
          @media screen and (max-width: 960px) {
            #contents .question_choice .choice_inner > span {
              height: 100%; } }
          @media screen and (max-width: 580px) {
            #contents .question_choice .choice_inner > span {
              padding: 0.75rem 0.25rem 0.5625rem;
              letter-spacing: -0.02em; } }
          @media screen and (max-width: 420px) {
            #contents .question_choice .choice_inner > span {
              padding: 0.75rem 0.25rem 0.9375rem; } }
      #contents .question_choice:disabled .choice_inner > span {
        color: #000; }
      #contents .question_choice:focus:not([disabled]) {
        overflow: visible; }
        #contents .question_choice:focus:not([disabled]) .choice_inner {
          position: relative;
          box-shadow: 0px 0px 0.5rem 0.375rem #fff;
          border-color: #f58e18; }
          #contents .question_choice:focus:not([disabled]) .choice_inner > span {
            box-shadow: inset 0px 0px 0.5rem 0.25rem #fff; }
      #contents .question_choice:active:not([disabled]), #contents .question_choice:hover:not([disabled]), #contents .question_choice.selected:disabled, #contents .question_choice.selected {
        cursor: pointer;
        padding-top: 0px;
        padding-bottom: 0.375rem; }
        #contents .question_choice:active:not([disabled]) .choice_inner, #contents .question_choice:hover:not([disabled]) .choice_inner, #contents .question_choice.selected:disabled .choice_inner, #contents .question_choice.selected .choice_inner {
          border-width: 0.25rem 0.25rem 0.5625rem 0.25rem;
          border-radius: 0.75rem 0.75rem 1rem 1rem; }
          #contents .question_choice:active:not([disabled]) .choice_inner > span p, #contents .question_choice:hover:not([disabled]) .choice_inner > span p, #contents .question_choice.selected:disabled .choice_inner > span p, #contents .question_choice.selected .choice_inner > span p {
            margin-left: -1px;
            color: #ff0224; }
          #contents .question_choice:active:not([disabled]) .choice_inner > span .question_choice_number, #contents .question_choice:hover:not([disabled]) .choice_inner > span .question_choice_number, #contents .question_choice.selected:disabled .choice_inner > span .question_choice_number, #contents .question_choice.selected .choice_inner > span .question_choice_number {
            top: 0.3125rem;
            left: 0.1875rem; }
            @media screen and (max-width: 580px) {
              #contents .question_choice:active:not([disabled]) .choice_inner > span .question_choice_number, #contents .question_choice:hover:not([disabled]) .choice_inner > span .question_choice_number, #contents .question_choice.selected:disabled .choice_inner > span .question_choice_number, #contents .question_choice.selected .choice_inner > span .question_choice_number {
                top: 0.125rem;
                left: 0rem; } }
        #contents .question_choice:active:not([disabled]) .question_icon, #contents .question_choice:hover:not([disabled]) .question_icon, #contents .question_choice.selected:disabled .question_icon, #contents .question_choice.selected .question_icon {
          transform: translateX(-50%) scale(1.2);
          transform-origin: center bottom; }
      #contents .question_choice.selected:disabled .choice_inner, #contents .question_choice.selected:focus:disabled .choice_inner, #contents .question_choice.selected .choice_inner, #contents .question_choice.selected:focus .choice_inner {
        position: relative;
        box-shadow: 0px 0px 0.5rem 0.375rem #fff;
        border-color: #ff0224; }
        #contents .question_choice.selected:disabled .choice_inner > span, #contents .question_choice.selected:focus:disabled .choice_inner > span, #contents .question_choice.selected .choice_inner > span, #contents .question_choice.selected:focus .choice_inner > span {
          box-shadow: inset 0px 0px 0.5rem 0.25rem #fff; }
      #contents .question_choice.selected:disabled {
        cursor: auto; }
      #contents .question_choice_image {
        height: 6.25rem;
        width: 6.25rem;
        border-radius: 50%;
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%); }
        @media screen and (max-width: 580px) {
          #contents .question_choice_image {
            width: 24vw;
            max-width: 6.875rem !important;
            height: auto;
            top: 40%;
            transform: translateX(-50%) translateY(-50%); } }
      #contents .question_choice_text {
        font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
        text-align: left;
        z-index: 1;
        height: 3rem;
        font-size: 1.4375rem;
        font-weight: bold;
        text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
        line-height: 1.1; }
        @media screen and (max-width: 1024px) {
          #contents .question_choice_text {
            height: 4.6875vw;
            font-size: 2.24609vw; } }
        @media screen and (max-width: 768px) {
          #contents .question_choice_text {
            height: 5.86667vw;
            font-size: 2.93333vw; } }
        @media screen and (max-width: 580px) {
          #contents .question_choice_text {
            height: 6.93333vw;
            font-size: 3.46667vw; } }
      #contents .question_choice_yellow .choice_inner > span {
        background-color: #ffdd33; }
      #contents .question_choice_orange .choice_inner > span {
        background-color: #f58e18; }
      #contents .question_choice_blue .choice_inner > span {
        background-color: #00bceb; }
      #contents .question_choice_number {
        text-indent: -5000px;
        position: absolute;
        background-image: url("/network/bousai/images/icon/quiz_choice_number_3_high.png");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        z-index: 2;
        width: 2.25rem;
        height: 2.25rem;
        top: 0.375rem;
        left: 0.25rem; }
        @media screen and (max-width: 580px) {
          #contents .question_choice_number {
            width: 1.875rem;
            height: 1.875rem;
            top: 0.1875rem;
            left: 0.0625rem; } }
        #contents .question_choice_number.number_1 {
          background-image: url("/network/bousai/images/icon/quiz_choice_number_1_high.png"); }
        #contents .question_choice_number.number_2 {
          background-image: url("/network/bousai/images/icon/quiz_choice_number_2_high.png"); }
        #contents .question_choice_number.number_3 {
          background-image: url("/network/bousai/images/icon/quiz_choice_number_3_high.png"); }
    #contents .question_icon {
      opacity: 0;
      width: 5.375rem;
      height: 5.375rem;
      position: absolute;
      z-index: 3;
      bottom: 30%;
      left: 50%;
      transform: translateX(-50%); }
      #contents .question_icon.active {
        opacity: 1;
        bottom: 60%;
        transition: bottom 0.3s cubic-bezier(0.07, 0.52, 0.29, 2.2) 0.2s, opacity 0.2s linear 0.3s; }
      @media screen and (max-width: 420px) {
        #contents .question_icon {
          width: 3.75rem;
          height: 3.75rem; } }
    #contents .question_hint {
      width: 17.5rem;
      height: 100%;
      z-index: 1;
      margin-left: -1.875rem;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end; }
      @media screen and (max-width: 1024px) {
        #contents .question_hint {
          width: 25vw;
          margin-left: -2.92969vw;
          height: 97%; } }
      @media screen and (max-width: 768px) {
        #contents .question_hint {
          display: flex;
          flex-direction: row;
          justify-content: center;
          width: 80%;
          height: 10rem;
          align-items: center; } }
      @media screen and (max-width: 580px) {
        #contents .question_hint {
          height: 30%;
          width: 90%; } }
      @media screen and (max-width: 420px) {
        #contents .question_hint {
          width: 95%; } }
      #contents .question_hint_character {
        position: relative;
        margin-top: -1.25rem;
        width: 16.25rem;
        height: 16.3125rem; }
        @media screen and (max-width: 1024px) {
          #contents .question_hint_character {
            width: 25.39062vw;
            height: 25.48828vw; } }
        @media screen and (max-width: 768px) {
          #contents .question_hint_character {
            max-width: 13.75rem;
            max-height: 13.8125rem;
            width: 33.85417vw;
            height: 33.98438vw;
            position: absolute;
            bottom: 0;
            right: 10%; } }
        @media screen and (max-width: 580px) {
          #contents .question_hint_character {
            right: 0%;
            width: 40vw;
            height: 42vw; } }
        #contents .question_hint_character:after {
          content: "";
          display: block;
          background: url("/network/bousai/images/bg/quiz_desk_high.png") no-repeat;
          background-position: center;
          background-size: contain;
          background-position: bottom center;
          width: 85%;
          height: 6.25rem;
          position: absolute;
          right: 0;
          bottom: 0; }
      #contents .question_hint_header {
        position: absolute;
        top: -1.25rem;
        left: 50%;
        transform: translateX(-50%);
        text-indent: -5000px;
        width: 7.5rem;
        height: 3.375rem;
        background: url("/network/bousai/images/hint/quiz_hint_header_high.png") no-repeat;
        background-position: center;
        background-size: contain; }
        @media screen and (max-width: 1024px) {
          #contents .question_hint_header {
            width: 11.71875vw;
            height: 5.27344vw; } }
        @media screen and (max-width: 768px) {
          #contents .question_hint_header {
            top: 2%;
            left: 45%;
            width: 14.08vw;
            height: 6.82667vw; } }
        @media screen and (max-width: 580px) {
          #contents .question_hint_header {
            top: 3%;
            width: 20vw;
            height: 10vw; } }
      #contents .question_hint_text {
        opacity: 0;
        padding: 2.5rem 0.75rem 3.125rem 1.25rem;
        font-size: 1.5rem;
        color: #001e7c;
        line-height: 1.4;
        font-weight: bold;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-feature-settings: "palt";
        width: 16.125rem;
        min-height: 8rem;
        background: url("/network/bousai/images/hint/quiz_hint_bubble_high.png") no-repeat;
        background-position: center;
        background-size: 100% 100%;
        transform: scale(0.6);
        transition: all 0.2s cubic-bezier(0, 0.46, 0.43, 1.74) 0s; }
        #contents .question_hint_text > p {
          line-height: 1.4; }
        #contents .question_hint_text.small {
          font-size: 1.375rem; }
        @media screen and (max-width: 1024px) {
          #contents .question_hint_text {
            width: 25.19531vw;
            height: auto;
            font-size: 2.44141vw;
            padding: 3.90625vw 1.17188vw 4.88281vw 1.95312vw; }
            #contents .question_hint_text.small {
              font-size: 2.2vw; } }
        @media screen and (max-width: 768px) {
          #contents .question_hint_text {
            margin-top: -1.875rem;
            background: url("/network/bousai/images/hint/quiz_hint_bubble_sp_high.png") no-repeat;
            background-position: center;
            background-size: 100% 100%;
            width: 38.4vw;
            height: auto;
            font-size: 3.41333vw;
            padding: 10% 9% 8% 6%;
            font-size: 2.6vw;
            position: absolute;
            left: 0;
            top: 0; }
            #contents .question_hint_text.small {
              font-size: 2.6vw; } }
        @media screen and (max-width: 580px) {
          #contents .question_hint_text {
            width: 50vw;
            font-size: 3.5vw;
            background-size: 100% 100%;
            padding: 12% 10% 8% 6%;
            height: auto; }
            #contents .question_hint_text.small {
              font-size: 3vw; } }
        @media screen and (max-width: 420px) {
          #contents .question_hint_text {
            width: 55vw;
            font-size: 4vw; }
            #contents .question_hint_text.small {
              font-size: 3.9vw; } }
        #contents .question_hint_text.active {
          transform: scale(1);
          opacity: 1;
          transition: all 0.2s cubic-bezier(0, 0.46, 0.43, 1.74) 0s; }
          #contents .question_hint_text.active .question_hint_header {
            visibility: visible; }
      #contents .question_hint_comment {
        font-size: 2.375rem;
        color: #ff0224;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1.875rem 3rem;
        line-height: 1.1;
        text-align: center;
        font-feature-settings: "palt"; }
        #contents .question_hint_comment > span,
        #contents .question_hint_comment p {
          width: 100%;
          line-height: 1.1; }
        #contents .question_hint_comment.teaser {
          display: none;
          font-size: 1.875rem;
          text-align: left;
          padding: 3.125rem 3rem 2.5rem 3.75rem; }
          #contents .question_hint_comment.teaser.active {
            position: absolute;
            padding: 3.125rem 3rem 2.5rem 3.75rem;
            top: 0.625rem;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start; }
        @media screen and (max-width: 1024px) {
          #contents .question_hint_comment.teaser {
            padding: 3%;
            font-size: 2.8vw; }
            #contents .question_hint_comment.teaser.active {
              padding: 15% 23% 25% 23%;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: auto;
              bottom: 45%;
              left: 0; } }
        @media screen and (max-width: 768px) {
          #contents .question_hint_comment.teaser {
            padding: 3%;
            font-size: 3.2vw; }
            #contents .question_hint_comment.teaser.active {
              padding: 3% 8% 3% 10%;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0;
              left: 30%;
              width: 44%;
              height: 12.5rem; } }
        @media screen and (max-width: 580px) {
          #contents .question_hint_comment.teaser {
            font-size: 4vw; }
            #contents .question_hint_comment.teaser.active {
              padding: 3% 9% 3% 12%;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: 0;
              left: 30%;
              width: 50%;
              height: 30vw;
              bottom: auto;
              margin-top: -10vw; } }
        @media screen and (max-width: 420px) {
          #contents .question_hint_comment.teaser {
            font-size: 6vw; }
            #contents .question_hint_comment.teaser.active {
              padding: 2% 10% 3% 13%;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              width: 62%;
              height: 40vw;
              top: 0;
              left: 35%;
              bottom: auto; } }
        #contents .question_hint_comment .correctAnswer {
          font-feature-settings: "palt";
          font-weight: bold;
          margin-top: 0.25rem;
          font-size: 1.5625rem;
          color: #fff;
          border-radius: 0.5rem;
          padding: 0.25rem 0.375rem 0.375rem;
          background-color: #ff0224;
          border: 0.125rem solid #fff; }
          #contents .question_hint_comment .correctAnswer .correctNumber {
            font-size: 120%;
            display: inline-block;
            margin-left: 0.1875rem;
            margin-right: 0.1875rem; }
        @media screen and (max-width: 1024px) {
          #contents .question_hint_comment {
            font-size: 3.90625vw;
            padding: 2.92969vw 3.25521vw; }
            #contents .question_hint_comment .correctAnswer {
              font-size: 1.95312vw; } }
        @media screen and (max-width: 768px) {
          #contents .question_hint_comment {
            margin-top: -3.125rem;
            padding: 1.5rem 2.4rem 1rem;
            font-size: 1.75rem; }
            #contents .question_hint_comment .correctAnswer {
              font-size: 1.25rem; } }
        @media screen and (max-width: 420px) {
          #contents .question_hint_comment {
            padding: 1.8vw 2.88vw;
            font-size: 1.5rem; }
            #contents .question_hint_comment .correctAnswer {
              font-size: 1.125rem; } }
        #contents .question_hint_comment_false {
          width: 18.75rem;
          height: 14rem;
          margin-left: -1.25rem;
          background: url("/network/bousai/images/bg/quiz_bubble_false_high.png") no-repeat;
          background-position: center;
          background-size: contain; }
          @media screen and (max-width: 1024px) {
            #contents .question_hint_comment_false {
              width: 29.29688vw;
              height: 21.875vw; } }
          @media screen and (max-width: 768px) {
            #contents .question_hint_comment_false {
              background-image: url("/network/bousai/images/bg/quiz_bubble_false_sp_high.png");
              width: 15rem;
              height: 11.2rem;
              position: absolute;
              left: 30%;
              transform: translateX(-50%); }
              #contents .question_hint_comment_false > span {
                display: block;
                padding-left: 0.625rem; } }
          @media screen and (max-width: 580px) {
            #contents .question_hint_comment_false {
              left: 35%;
              padding: 6vw 6vw 3vw;
              width: 55%;
              height: 11.25rem;
              background-size: 100% 100%;
              font-size: 6vw; } }
          @media screen and (max-width: 420px) {
            #contents .question_hint_comment_false {
              height: 10.25rem; } }
        #contents .question_hint_comment_correct {
          width: 18.75rem;
          height: 16.75rem;
          margin-left: -1.25rem;
          position: absolute;
          top: 0%;
          left: 0;
          background: url("/network/bousai/images/bg/quiz_bubble_correct_high.png") no-repeat;
          background-position: center;
          background-size: contain; }
          @media screen and (max-width: 1024px) {
            #contents .question_hint_comment_correct {
              max-width: 17.5rem;
              width: 27.34375vw;
              height: 24.42708vw;
              top: auto;
              bottom: 45%;
              font-size: 3.7vw;
              margin-left: -0.625rem; } }
          @media screen and (max-width: 768px) {
            #contents .question_hint_comment_correct {
              background-image: url("/network/bousai/images/bg/quiz_bubble_correct_sp_high.png");
              width: 15rem;
              height: 11.2rem;
              left: 30%;
              transform: translateX(-50%);
              font-size: 4.2vw;
              top: auto;
              bottom: 15%; }
              #contents .question_hint_comment_correct > span {
                display: block;
                padding-left: 0.625rem; } }
          @media screen and (max-width: 580px) {
            #contents .question_hint_comment_correct {
              font-size: 6vw;
              padding: 10% 10% 6% 10%;
              width: 65%; }
              #contents .question_hint_comment_correct > span {
                padding-left: 0; } }
          @media screen and (max-width: 420px) {
            #contents .question_hint_comment_correct {
              font-size: 7.2vw;
              padding: 10% 6% 6% 6%;
              left: 35%; } }
  #contents .page_noJs .question_hint_text {
    opacity: 1;
    transform: scale(1); }
  #contents .page_noJs .question_icon {
    opacity: 1;
    bottom: 60%; }
  #contents .page_noJs .question_choice:hover {
    text-decoration: none; }
  @media screen and (max-width: 1024px) {
    #contents .contents_tablet .question_problem_text > p.small {
      font-size: 1.85vw; } }
  @media screen and (max-width: 600px) {
    #contents .contents_tablet .question_problem_text > p.small {
      font-size: 2.2vw; } }
  @media screen and (max-width: 580px) {
    #contents .contents_tablet .question_problem_text > p.small {
      font-size: 2.2vw; } }
  @media (height: 768px) and (width: 1024px) and (orientation: landscape) {
    #contents .contents_tablet .question_problem_text > p.small {
      font-size: 19px; } }
  @media (height: 1024px) and (width: 768px) and (orientation: portrait) {
    #contents .contents_tablet .question_problem_text > p.small {
      font-size: 18px; } }
  #contents .contents_ipad .question_problem_text > p.small {
    font-size: 18px; }
    @media screen and (max-width: 1024px) {
      #contents .contents_ipad .question_problem_text > p.small {
        font-size: 18px; } }
    @media screen and (max-width: 768px) {
      #contents .contents_ipad .question_problem_text > p.small {
        font-size: 18px; } }
    @media (height: 768px) and (width: 1024px) and (orientation: landscape) {
      #contents .contents_ipad .question_problem_text > p.small {
        font-size: 18px; } }
  #contents .lp {
    background-color: #fffed3;
    padding-bottom: 12.5rem; }
    @media screen and (max-width: 580px) {
      #contents .lp {
        padding-bottom: 5rem; } }
    #contents .lp_container {
      margin-left: auto;
      margin-right: auto;
      max-width: 60rem;
      width: 100%; }
    #contents .lp img {
      max-width: 100%; }
    #contents .lp_br {
      height: 0.00625rem; }
      @media screen and (max-width: 768px) {
        #contents .lp_br {
          display: none; } }
    #contents .lp_top {
      padding: 0.5rem;
      width: 100%;
      max-width: 53.75rem;
      margin-left: auto;
      margin-right: auto;
      position: relative; }
      @media screen and (max-width: 420px) {
        #contents .lp_top {
          padding: 0; } }
      #contents .lp_top .btn_lp_start {
        position: absolute;
        top: 56%;
        left: 60%;
        width: 28%;
        height: auto;
        background-color: transparent;
        border: none;
        transform: translateX(-50%) translateY(-50%);
        z-index: 2; }
        #contents .lp_top .btn_lp_start > img {
          width: 100%;
          max-width: 100%;
          height: auto; }
        #contents .lp_top .btn_lp_start:hover {
          cursor: pointer;
          opacity: 0.8; }
        @media screen and (max-width: 420px) {
          #contents .lp_top .btn_lp_start {
            width: 65%;
            top: 42%;
            left: 53%; } }
    #contents .lp_banner {
      border: 0.5rem solid #f8e997;
      border-radius: 0.25rem; }
      #contents .lp_banner.banner_sp {
        display: none;
        border: none; }
      @media screen and (max-width: 420px) {
        #contents .lp_banner.banner_sp {
          display: block; }
        #contents .lp_banner.banner_pc {
          display: none; } }
    #contents .lp_header {
      text-indent: -5000px;
      position: absolute;
      top: 28%;
      left: 60%;
      width: 60%;
      height: 38%;
      background-image: url("/network/bousai/images/logo/quiz_main_logo_title_high.png");
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 1;
      transform: translateY(-50%) translateX(-50%); }
      @media screen and (max-width: 420px) {
        #contents .lp_header {
          top: 30%;
          width: 90%;
          left: 53%; } }
    #contents .lp_lower {
      display: flex;
      margin-top: 3.75rem;
      max-width: 53.75rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      margin-right: auto;
      margin-left: auto;
      justify-content: space-between;
      align-items: flex-start; }
      @media screen and (max-width: 768px) {
        #contents .lp_lower {
          flex-direction: column;
          justify-content: flex-start;
          align-items: stretch;
          margin-left: auto;
          margin-right: auto; } }
    #contents .lp_link_container {
      background-color: #fff;
      border: 0.25rem solid rgba(81, 125, 190, 0.8);
      border-radius: 0.5rem;
      position: relative;
      padding: 1.5rem 3%;
      padding-top: 3.125rem;
      background-color: #fffee7; }
      @media screen and (max-width: 768px) {
        #contents .lp_link_container {
          margin-bottom: 3.125rem; } }
      @media screen and (max-width: 580px) {
        #contents .lp_link_container {
          border-width: 0.1875rem; } }
      #contents .lp_link_container.links_container {
        width: 28%; }
        @media screen and (max-width: 768px) {
          #contents .lp_link_container.links_container {
            width: 100%; } }
        @media screen and (max-width: 580px) {
          #contents .lp_link_container.links_container {
            padding-bottom: 0.5rem; } }
      #contents .lp_link_container.movies_container {
        width: 68%; }
        @media screen and (max-width: 768px) {
          #contents .lp_link_container.movies_container {
            width: 100%; } }
        @media screen and (max-width: 580px) {
          #contents .lp_link_container.movies_container {
            padding-bottom: 0.5rem; } }
    #contents .lp_link_header {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      background-color: #fafd9d;
      font-weight: bold;
      font-size: 1.25rem;
      width: 12.5rem;
      padding: 0.75rem 2.5rem;
      color: #517dbe;
      border-radius: 1.625rem;
      border: 0.25rem solid rgba(81, 125, 190, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1; }
      @media screen and (max-width: 768px) {
        #contents .lp_link_header {
          border-width: 0.1875rem; } }
    @media screen and (max-width: 768px) {
      #contents .lp_movie_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; } }
    @media screen and (max-width: 580px) {
      #contents .lp_movie_list {
        display: block; } }
    #contents .lp_movie_title {
      font-size: 1.25rem;
      font-weight: bold;
      line-height: 1.4;
      color: #517dbe;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
      transition: all 0.3s; }
      @media screen and (max-width: 1024px) {
        #contents .lp_movie_title {
          font-size: 1.25rem; } }
      @media screen and (max-width: 580px) {
        #contents .lp_movie_title {
          font-size: 1.0625rem;
          margin-top: 1rem;
          margin-bottom: 0.375rem; } }
      @media screen and (max-width: 420px) {
        #contents .lp_movie_title {
          font-size: 1rem; } }
    #contents .lp_movie_subtitle {
      font-size: 1rem;
      line-height: 1.6; }
      @media screen and (max-width: 580px) {
        #contents .lp_movie_subtitle {
          font-size: 0.875rem; } }
      @media screen and (max-width: 420px) {
        #contents .lp_movie_subtitle {
          font-size: 0.875rem; } }
    #contents .lp_movie_summary {
      padding-right: 1rem;
      padding-left: 1rem; }
      @media screen and (max-width: 420px) {
        #contents .lp_movie_summary {
          padding-right: 0.25rem;
          padding-left: 0.25rem; } }
    #contents .lp_movie_item {
      margin-bottom: 1.5rem;
      width: 100%;
      border-radius: 0.625rem;
      border: 0.1875rem solid #e6e6e6;
      padding: 0.375rem;
      background-color: #fff;
      box-shadow: 0.125rem 0.125rem 0.25rem 0rem rgba(221, 221, 221, 0.5);
      transition: all 0.3s; }
      @media screen and (max-width: 768px) {
        #contents .lp_movie_item {
          width: 48%;
          margin-bottom: 0; } }
      @media screen and (max-width: 580px) {
        #contents .lp_movie_item {
          margin-bottom: 1.5rem;
          width: 90%;
          margin-left: auto;
          margin-right: auto; } }
      @media screen and (max-width: 420px) {
        #contents .lp_movie_item {
          width: 96%; } }
      #contents .lp_movie_item:hover {
        cursor: pointer;
        border: 0.1875rem solid #ec9c4e; }
        #contents .lp_movie_item:hover .lp_movie_button {
          background-color: #ec9c4e; }
        #contents .lp_movie_item:hover .lp_movie_title {
          color: #ec9c4e; }
      #contents .lp_movie_item > a {
        position: relative;
        display: block;
        padding-bottom: 3rem;
        height: 100%; }
        #contents .lp_movie_item > a:hover {
          text-decoration: none; }
          #contents .lp_movie_item > a:hover .lp_movie_title {
            text-decoration: none; }
    #contents .lp_movie_button {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      border-radius: 1rem;
      font-size: 1rem;
      color: #fff;
      font-weight: bold;
      line-height: 1;
      background-color: #517dbe;
      right: 0.5rem;
      bottom: 0.5rem;
      padding: 0.375rem 2.375rem 0.375rem 1.25rem;
      min-width: 8.75rem;
      background-image: url("/network/bousai/images/bousai/bousai_icon_play.png");
      background-repeat: no-repeat;
      background-position: right 1rem top 0.4375rem;
      background-size: 0.75rem;
      transition: background-color 0.3s; }
      @media screen and (max-width: 580px) {
        #contents .lp_movie_button {
          bottom: 0.25rem; } }
    #contents .lp_movie_banner {
      width: 100% !important;
      height: auto !important; }
      @media screen and (max-width: 1024px) {
        #contents .lp_movie_banner {
          width: 12.5rem; } }
    @media screen and (max-width: 768px) {
      #contents .lp_link_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center; } }
    #contents .lp_link_img {
      border-radius: 0.1875rem;
      width: 100%; }
    @media screen and (max-width: 768px) {
      #contents .lp_link_item {
        width: 23%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 0; } }
    @media screen and (max-width: 580px) {
      #contents .lp_link_item {
        width: 48%;
        margin-bottom: 0.5rem; } }
    #contents .lp_link_item > a {
      overflow: hidden;
      border: 0.1875rem solid #e6e6e6;
      box-shadow: 0.125rem 0.125rem 0.25rem 0rem rgba(221, 221, 221, 0.5);
      border-radius: 0.6875rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      transition: all 0.3s; }
      @media screen and (max-width: 768px) {
        #contents .lp_link_item > a {
          margin-bottom: 0; } }
      @media screen and (max-width: 580px) {
        #contents .lp_link_item > a {
          margin-bottom: 1rem; } }
      #contents .lp_link_item > a:hover, #contents .lp_link_item > a:focus {
        border-color: #ec9c4e;
        color: #517dbe;
        text-decoration: none; }
        #contents .lp_link_item > a:hover .lp_link_title, #contents .lp_link_item > a:focus .lp_link_title {
          color: #517dbe;
          text-decoration: none; }
    #contents .lp_link_item.hiiku > a {
      background-color: #f4eede;
      border-color: #d8c490; }
      #contents .lp_link_item.hiiku > a:hover, #contents .lp_link_item.hiiku > a:focus {
        border-color: #ec9c4e; }
    #contents .lp_link_item.sonae > a {
      background-color: #fff;
      border-color: #2ea7e0; }
      #contents .lp_link_item.sonae > a:hover, #contents .lp_link_item.sonae > a:focus {
        border-color: #ec9c4e; }
    #contents .lp_link_item.noborder > a {
      position: relative;
      border: none;
      border-radius: 0.5rem;
      box-shadow: 2px 2px 4px 0px rgba(221, 221, 221, 0.5), inset 0px 0px 0px 3px transparent;
      overflow: hidden; }
      @media screen and (max-width: 580px) {
        #contents .lp_link_item.noborder > a {
          border-radius: 0.6875rem; } }
      #contents .lp_link_item.noborder > a:after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2.5px solid transparent;
        transition: border-color 0.3s;
        border-radius: 0.5625rem; }
      #contents .lp_link_item.noborder > a:hover, #contents .lp_link_item.noborder > a:focus {
        border-color: #ec9c4e;
        color: #517dbe;
        text-decoration: none; }
        #contents .lp_link_item.noborder > a:hover:after, #contents .lp_link_item.noborder > a:focus:after {
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 100%;
          border: 2.5px solid #ec9c4e;
          z-index: 3; }
        #contents .lp_link_item.noborder > a:hover .lp_link_title, #contents .lp_link_item.noborder > a:focus .lp_link_title {
          color: #517dbe;
          text-decoration: none; }
    #contents .lp_link_banner {
      text-indent: -5000px;
      width: 3.75rem;
      height: 3.75rem;
      background-color: #999;
      margin-right: 0.375rem; }
  #contents .lecture {
    position: relative;
    overflow: hidden;
    z-index: 0;
    max-width: 66.25rem;
    width: 100%;
    height: 100%; }
    #contents .lecture_character {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      max-width: 16.25rem;
      width: 30%;
      z-index: 2;
      margin-left: 2%;
      left: 0;
      bottom: 0; }
      #contents .lecture_character > img.announcer {
        width: 70%;
        margin-bottom: -1.875rem; }
      #contents .lecture_character > img.master {
        width: 70%;
        margin-bottom: -1.25rem; }
      #contents .lecture_character > img.mamoru {
        width: 95%;
        margin-left: -10%; }
      @media screen and (max-width: 1024px) {
        #contents .lecture_character {
          width: 21.48438vw;
          height: 28.79079vw; }
          #contents .lecture_character > img.mamoru {
            width: 100%; } }
      @media screen and (max-width: 768px) {
        #contents .lecture_character {
          width: 25%;
          min-width: 11.25rem;
          min-height: 12.5rem;
          justify-content: center; }
          #contents .lecture_character > img.master {
            width: 55%;
            margin-bottom: 0rem; } }
      @media screen and (max-width: 580px) {
        #contents .lecture_character {
          width: 40vw;
          height: 60vw;
          max-width: 11.25rem;
          min-width: auto;
          min-height: auto; }
          #contents .lecture_character > img.announcer {
            width: 70%;
            margin-left: 3vw;
            margin-bottom: -3.125rem; }
          #contents .lecture_character > img.mamoru {
            width: 100%;
            margin-left: -5vw; }
          #contents .lecture_character > img.master {
            width: 52%;
            margin-left: 0;
            margin-bottom: 0rem; } }
      @media screen and (max-width: 420px) {
        #contents .lecture_character {
          justify-content: center;
          max-width: 9.6875rem; }
          #contents .lecture_character > img.mamoru {
            width: 100%; } }
    #contents .lecture_title {
      z-index: 4;
      position: absolute; }
      #contents .lecture_title > img {
        height: 1.25rem; }
      #contents .lecture_title_pc {
        margin-top: 0.25rem;
        margin-left: 0.25rem; }
        @media screen and (max-width: 1024px) {
          #contents .lecture_title_pc {
            margin-left: 0; } }
      #contents .lecture_title_sp {
        left: auto;
        right: 1.25rem;
        display: none; }
      @media screen and (max-width: 1024px) {
        #contents .lecture_title {
          margin-left: 0; }
          #contents .lecture_title > img {
            height: 2vw;
            width: auto; } }
      @media screen and (max-width: 768px) {
        #contents .lecture_title > img {
          height: 2.5rem;
          width: auto; }
        #contents .lecture_title_pc {
          display: none; }
        #contents .lecture_title_sp {
          display: block;
          top: 0.375rem;
          right: 2vw; } }
    #contents .lecture_desk {
      position: absolute;
      width: 13.75rem;
      height: 5rem;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%); }
      @media screen and (max-width: 1024px) {
        #contents .lecture_desk {
          width: 21.48438vw;
          height: 7.67754vw; } }
      @media screen and (max-width: 768px) {
        #contents .lecture_desk {
          width: 90%;
          height: 9vw; } }
      @media screen and (max-width: 580px) {
        #contents .lecture_desk {
          width: 35vw;
          height: 10vw; } }
    #contents .lecture_wipe {
      opacity: 0;
      z-index: 0;
      position: relative;
      width: 11.875rem;
      height: 7.5rem;
      border-radius: 0.75rem;
      border: 0.25rem solid #f58e18;
      box-shadow: 0rem 0rem 0rem 0.125rem #fff, inset 0rem 0rem 0rem 0.0625rem #fff;
      position: absolute;
      bottom: 1rem;
      right: -12.5rem;
      background-color: #fef4e8;
      overflow: hidden;
      transition: all 0.3s;
      transition-timing-function: cubic-bezier(0.24, 0.07, 0.02, 1.9);
      transform: scale(0.2);
      transform-origin: bottom right;
      transition-delay: 0.7s;
      text-align: center; }
      #contents .lecture_wipe.active {
        z-index: 10;
        opacity: 1;
        transform: scale(1);
        transition-timing-function: cubic-bezier(0.24, 0.07, 0.02, 1.9);
        transition-delay: 0s; }
      @media screen and (max-width: 1024px) {
        #contents .lecture_wipe {
          right: -9vw;
          width: 18.55469vw;
          height: 11.71875vw; } }
      @media screen and (max-width: 768px) {
        #contents .lecture_wipe {
          border-width: 0.1875rem;
          right: 30vw;
          bottom: 10%;
          display: flex;
          justify-content: center; }
          #contents .lecture_wipe img {
            max-width: 110%;
            width: 110%; } }
      @media screen and (max-width: 580px) {
        #contents .lecture_wipe {
          width: 22vw;
          height: 15vw;
          right: 20%;
          transform: translateX(50%); } }
      @media screen and (max-width: 420px) {
        #contents .lecture_wipe {
          width: 25vw;
          height: 17vw;
          right: 20%;
          border-width: 0.125rem;
          transform: translateX(50%); } }
    #contents .lecture_container {
      position: relative;
      width: 38.125rem;
      margin-left: auto;
      margin-right: auto;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: center; }
      @media screen and (max-width: 1024px) {
        #contents .lecture_container {
          width: 80.07812vw;
          height: 100%;
          align-items: flex-start; } }
      @media screen and (max-width: 768px) {
        #contents .lecture_container {
          border: 1px solid #000;
          margin-top: 2%;
          width: 160%;
          margin-left: -30%;
          border-radius: 50% 50% 0 0;
          overflow: hidden;
          height: 100%;
          border: 0.25rem solid #ffdd33;
          box-shadow: 0 0 0 0.125rem #fff; } }
      @media screen and (max-width: 580px) {
        #contents .lecture_container {
          border: 1px solid #000;
          margin-top: 4%;
          width: 160%;
          margin-left: -30%;
          border-radius: 50% 50% 0 0;
          overflow: hidden;
          height: 100%;
          border: 0.25rem solid #ffdd33;
          box-shadow: 0 0 0 0.125rem #fff; } }
    #contents .lecture_bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 51.25rem;
      height: 51.25rem;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.8);
      border: 0.25rem solid #ffdd33; }
      @media screen and (max-width: 768px) {
        #contents .lecture_bg {
          width: 140vw;
          height: 140vw;
          transform: translateX(-50%) translateY(-50%); } }
      @media screen and (max-width: 580px) {
        #contents .lecture_bg {
          width: 200vw;
          height: 200vw;
          transform: translateX(-50%) translateY(-50%); } }
    #contents .lecture_contents {
      position: relative;
      z-index: 0;
      width: 34.375rem;
      height: 27.5rem;
      margin-bottom: 5.625rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-direction: column;
      overflow: hidden;
      z-index: 1;
      padding-left: 0.75rem; }
      #contents .lecture_contents .speaker {
        position: absolute;
        z-index: -1; }
      @media screen and (min-width: 1300px) {
        #contents .lecture_contents {
          width: 36.25rem; } }
      @media screen and (max-width: 1024px) {
        #contents .lecture_contents {
          width: 55vw;
          margin-bottom: 8.78906vw;
          height: 80%;
          margin-bottom: 0; } }
      @media screen and (max-width: 960px) {
        #contents .lecture_contents {
          height: 80%; } }
      @media screen and (max-width: 768px) {
        #contents .lecture_contents {
          width: 50%;
          height: 62%;
          margin-bottom: 0; } }
      @media screen and (max-width: 580px) {
        #contents .lecture_contents {
          width: 95vw;
          height: 63%;
          margin-bottom: 0; } }
      @media screen and (max-width: 420px) {
        #contents .lecture_contents {
          width: 95vw;
          height: 70%;
          margin-bottom: 0; } }
    #contents .lecture_wrapper {
      overflow: hidden;
      position: absolute;
      width: 100%;
      top: 31.25rem;
      left: 0; }
    #contents .lecture_blocks {
      width: 100%;
      padding: 0.25rem; }
      #contents .lecture_blocks.blocks_wipe {
        padding: 0; }
    #contents .lecture_block {
      display: flex;
      border: 0.25rem solid #000;
      background-color: #fff;
      border-radius: 0.75rem;
      font-size: 1.625rem;
      line-height: 1.15;
      padding: 1.125rem;
      margin-top: 0rem;
      margin-bottom: 0.75rem;
      margin-left: 1.375rem;
      position: relative;
      font-weight: bold;
      justify-content: stretch;
      border-radius: 1rem;
      box-shadow: 0 0 0 0.25rem #fff; }
      #contents .lecture_block_text {
        display: inline;
        width: 60%;
        line-height: 1.2; }
        @media screen and (max-width: 580px) {
          #contents .lecture_block_text {
            letter-spacing: -0.02em; } }
      #contents .lecture_block ul {
        counter-reset: list-number 0;
        padding-left: 1.625rem; }
        @media screen and (max-width: 580px) {
          #contents .lecture_block ul {
            padding-left: 1.125rem; } }
        #contents .lecture_block ul > li {
          list-style-type: none;
          margin-bottom: 0.375rem;
          line-height: 1.1; }
          #contents .lecture_block ul > li:before {
            counter-increment: list-number;
            content: counter(list-number) ".";
            width: 1.625rem;
            display: inline-block;
            margin-left: -1.625rem; }
            @media screen and (max-width: 580px) {
              #contents .lecture_block ul > li:before {
                width: 1.125rem;
                margin-left: -1.125rem; } }
      @media screen and (max-width: 1024px) {
        #contents .lecture_block {
          font-size: 2.53906vw;
          padding: 1.75781vw; } }
      @media screen and (max-width: 768px) {
        #contents .lecture_block {
          margin-bottom: 0.875rem;
          border: 0.1875rem solid #000;
          box-shadow: 0 0 0 0.1875rem #fff;
          padding: 2%;
          font-size: 3vw; } }
      @media screen and (max-width: 580px) {
        #contents .lecture_block {
          margin-bottom: 0.75rem;
          border: 0.175rem solid #000;
          box-shadow: 0rem 0rem 0rem 0.15625rem #fff;
          font-size: 3.5vw;
          margin-left: 0; } }
      @media screen and (max-width: 420px) {
        #contents .lecture_block {
          font-size: 4vw; } }
      #contents .lecture_block.withPhoto > span {
        width: 60%; }
        @media screen and (max-width: 768px) {
          #contents .lecture_block.withPhoto > span {
            width: 55%; } }
      #contents .lecture_block .photo {
        width: 40%;
        margin-left: 0.25rem;
        max-height: 13.75rem;
        text-align: center;
        position: relative;
        padding-top: 0.375rem;
        -o-object-fit: contain;
           object-fit: contain; }
        @media screen and (max-width: 768px) {
          #contents .lecture_block .photo {
            padding-top: 0.625rem;
            width: 45%; } }
        #contents .lecture_block .photo img {
          display: block;
          border: 0.125rem solid #ffdd33;
          width: auto;
          margin-left: auto;
          margin-right: auto;
          max-width: 100%;
          height: auto;
          max-height: 8.75rem;
          -o-object-fit: contain;
             object-fit: contain; }
          #contents .lecture_block .photo img:hover {
            cursor: pointer;
            border-width: 0.125rem;
            border-color: #f58e18; }
          #contents .lecture_block .photo img:focus {
            border-width: 0.1875rem;
            box-shadow: 0 0 0.3125rem 0.125rem #f58e18; }
        @media screen and (max-width: 768px) {
          #contents .lecture_block .photo {
            max-height: 25vh; } }
      #contents .lecture_block .caption {
        font-size: 0.875rem; }
        @media screen and (max-width: 1024px) {
          #contents .lecture_block .caption {
            font-size: 0.8125rem; } }
        @media screen and (max-width: 768px) {
          #contents .lecture_block .caption {
            font-size: 0.75rem; } }
        @media screen and (max-width: 580px) {
          #contents .lecture_block .caption {
            font-size: 0.6875rem; } }
      #contents .lecture_block_wipe {
        font-feature-settings: "palt";
        position: absolute;
        letter-spacing: 0;
        opacity: 0;
        z-index: 10;
        bottom: 2rem;
        line-height: 1;
        right: 0;
        width: 30.375rem;
        height: 5.3125rem;
        font-size: 1.5rem;
        font-weight: bold;
        padding: 1.25rem 2.1875rem 1.25rem 1.25rem;
        background: url("/network/bousai/images/bg/quiz_bg_bubble_wipe.png") no-repeat;
        background-position: center;
        background-size: contain;
        transform-origin: right bottom;
        transition: transform 0.2s cubic-bezier(0.24, 0.07, 0.02, 1.9) 0.3s, opacity 0.1s linear 0.3s;
        transform: scale(0.6); }
        #contents .lecture_block_wipe.active {
          opacity: 1;
          transform: scale(1);
          transform-origin: right bottom;
          transition: transform 0.3s cubic-bezier(0.24, 0.07, 0.02, 1.9) 0.4s, opacity 0.3s linear 0.4s; }
        @media screen and (max-width: 1024px) {
          #contents .lecture_block_wipe {
            font-size: 2.4vw;
            width: 50vw;
            bottom: 10%;
            right: 8vw;
            background-size: 100% 100%;
            height: auto; } }
        @media screen and (max-width: 768px) {
          #contents .lecture_block_wipe {
            display: flex;
            align-items: center;
            bottom: 15%;
            width: 32vw;
            height: 15vw;
            right: 30%;
            padding: 1.4vw 3vw 3vw 3vw;
            min-height: 2.5rem;
            background: url("/network/bousai/images/bg/quiz_bg_bubble_wipe_sp_high.png") no-repeat;
            background-position: center;
            background-size: 100% 100%;
            line-height: 1.2;
            font-size: 2.6vw; } }
        @media screen and (max-width: 580px) {
          #contents .lecture_block_wipe {
            height: auto;
            width: 35vw;
            min-height: 4.375rem;
            font-size: 2.8vw; } }
        @media screen and (max-width: 420px) {
          #contents .lecture_block_wipe {
            width: 43vw;
            font-size: 3.8vw;
            right: 32%;
            bottom: 16%;
            padding: 2% 2% 4% 2%; } }
      #contents .lecture_block.active {
        border: 0.25rem solid #ff0224; }
        #contents .lecture_block.active:after {
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          content: "";
          display: block;
          width: 1.625rem;
          height: 2.0625rem;
          position: absolute;
          left: -1.3125rem;
          bottom: 15%;
          background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_red_left_middle_high.png") no-repeat;
          background-position: center;
          background-size: contain; }
        @media screen and (max-width: 768px) {
          #contents .lecture_block.active {
            border-width: 0.1875rem;
            margin-bottom: 0.875rem; }
            #contents .lecture_block.active:after {
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              content: "";
              display: block;
              width: 2.0625rem;
              height: 1.375rem;
              position: absolute;
              right: auto;
              left: auto;
              top: auto;
              left: 10%;
              bottom: -1.1875rem;
              background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_red_down_high.png") no-repeat;
              background-position: center;
              background-size: contain; } }
        @media screen and (max-width: 580px) {
          #contents .lecture_block.active {
            margin-bottom: 0.75rem;
            border: 0.175rem solid #ff0224; }
            #contents .lecture_block.active:after {
              width: 1.875rem;
              height: 1rem;
              bottom: -0.875rem;
              left: 5%;
              background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_red_down_reverse_high.png") no-repeat;
              background-position: center;
              background-size: contain; } }
    #contents .lecture .photo_inner {
      position: relative;
      display: inline-block;
      max-height: 100%;
      padding-top: 0.25rem; }
    #contents .lecture .photo_enlarge {
      font-size: 0.8125rem;
      position: absolute;
      border: none;
      padding-left: 1rem;
      top: -0.875rem;
      right: -0.5rem;
      letter-spacing: 0.0625rem;
      display: block;
      width: 5.625rem;
      color: #000;
      background-color: transparent; }
      #contents .lecture .photo_enlarge:hover {
        cursor: pointer; }
      #contents .lecture .photo_enlarge:before {
        opacity: 0.7;
        content: "";
        position: absolute;
        left: 0.4375rem;
        width: 1.125rem;
        height: 100%;
        display: block;
        background: url("/network/bousai/images/icon/quiz_icon_zoom_high.png") no-repeat;
        background-position: center;
        background-size: contain;
        background-position: center; }
        @media screen and (max-width: 580px) {
          #contents .lecture .photo_enlarge:before {
            width: 0.875rem; } }
      @media screen and (max-width: 1024px) {
        #contents .lecture .photo_enlarge {
          top: -0.5rem; } }
      @media screen and (max-width: 580px) {
        #contents .lecture .photo_enlarge {
          font-size: 0.75rem;
          top: -0.375rem;
          padding-left: 8%; } }
  #contents .lecture_photo_large {
    position: relative;
    opacity: 0;
    transition: all 0.3s;
    max-width: 37.5rem;
    width: 80%;
    position: relative;
    text-align: center; }
    #contents .lecture_photo_large img {
      max-height: 31.25rem;
      width: auto;
      background-color: #fff; }
      @media screen and (max-width: 768px) {
        #contents .lecture_photo_large img {
          max-height: 21.875rem;
          -o-object-fit: contain;
             object-fit: contain; } }
    #contents .lecture_photo_large.active {
      opacity: 1; }
    #contents .lecture_photo_large .closePhoto {
      border: none;
      background-color: rgba(0, 0, 0, 0.8);
      position: absolute;
      top: -3.75rem;
      font-size: 1.25rem;
      padding: 0.5rem 0.75rem 0.5rem 2.5rem;
      display: flex;
      align-items: center;
      line-height: 1;
      right: 0;
      color: #fff;
      font-weight: bold;
      border: 0.25rem solid #fff;
      border-radius: 2.5rem;
      background-image: url("/network/bousai/images/icon/quiz_icon_close_high.png");
      background-repeat: no-repeat;
      background-position: left 0.875rem center;
      background-size: 1.25rem 1.25rem; }
      #contents .lecture_photo_large .closePhoto:hover {
        cursor: pointer; }
  #contents .page_noJs .lecture_wrapper {
    top: 0;
    padding-top: 1rem; }
    @media screen and (max-width: 768px) {
      #contents .page_noJs .lecture_wrapper {
        top: 10%; } }
  #contents .page_noJs .lecture_container {
    height: 100%; }
  #contents .page_noJs .lecture_contents {
    overflow-y: scroll;
    margin-bottom: 10%;
    height: 90%; }
    #contents .page_noJs .lecture_contents .lecture_blocks {
      position: relative; }
    #contents .page_noJs .lecture_contents .lecture_block_wipe {
      position: static;
      opacity: 1;
      transform: scale(1);
      margin-bottom: 1rem;
      right: 15%;
      top: 0;
      z-index: 3;
      width: 75%;
      margin-left: 5%; }
      @media screen and (max-width: 768px) {
        #contents .page_noJs .lecture_contents .lecture_block_wipe {
          border-width: 0.1875rem;
          background: url("/network/bousai/images/bg/quiz_bg_bubble_wipe.png") no-repeat;
          background-position: center;
          background-size: contain;
          font-size: 2.8vw;
          height: auto;
          width: 80%;
          padding: 1.25rem 2.1875rem 1.25rem 1.25rem;
          background-size: 100% 100%; } }
      @media screen and (max-width: 580px) {
        #contents .page_noJs .lecture_contents .lecture_block_wipe {
          border-width: 0.1875rem;
          background: url("/network/bousai/images/bg/quiz_bg_bubble_wipe.png") no-repeat;
          background-position: center;
          background-size: contain;
          font-size: 4vw;
          height: auto;
          width: 80%;
          margin-left: 0;
          padding: 3% 5% 3% 3%;
          background-size: 100% 100%; } }
    #contents .page_noJs .lecture_contents .lecture_wipe {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 7.5rem;
      height: 4.375rem;
      z-index: -1; }
      @media screen and (max-width: 1024px) {
        #contents .page_noJs .lecture_contents .lecture_wipe {
          width: 12vw;
          height: 8.5vw;
          border-width: 0.1875rem; } }
      @media screen and (max-width: 768px) {
        #contents .page_noJs .lecture_contents .lecture_wipe {
          width: 12vw;
          height: 8.5vw;
          border-width: 0.1875rem; } }
      @media screen and (max-width: 580px) {
        #contents .page_noJs .lecture_contents .lecture_wipe {
          width: 20vw;
          height: 15vw;
          border-width: 0.1875rem;
          bottom: auto; } }
    @media screen and (max-width: 768px) {
      #contents .page_noJs .lecture_contents {
        height: 70%; } }
    @media screen and (max-width: 768px) {
      #contents .page_noJs .lecture_contents .lecture_wrapper {
        width: 97%; } }
  #contents .page_noJs .photo > img:hover, #contents .page_noJs .photo > img:active, #contents .page_noJs .photo > img:focus {
    cursor: auto;
    border-color: #ffdd33;
    box-shadow: none; }
  #contents .modal {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    #contents .modal_body {
      width: 80%;
      height: 80%;
      border-radius: 1.25rem;
      background-color: #fff;
      border: 4px solid #000;
      padding: 2.5rem;
      font-size: 1.25rem; }
  #contents .volume_upper {
    width: 100%;
    min-height: 3.75rem;
    border-bottom: 1px solid #CCCCCC; }
    @media screen and (max-width: 768px) {
      #contents .volume_upper {
        min-height: 3.125rem; } }
  #contents .volume_header {
    font-size: 1.5rem;
    color: #CCCCCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.75rem;
    margin-top: 1.125rem; }
    @media screen and (max-width: 768px) {
      #contents .volume_header {
        font-size: 4vw; } }
    @media screen and (max-width: 580px) {
      #contents .volume_header {
        margin-bottom: 0.5rem;
        margin-top: 0.625rem; } }
    @media screen and (max-width: 420px) {
      #contents .volume_header {
        font-size: 5vw; } }
  #contents .volume_indicator {
    display: flex;
    justify-content: center;
    height: 4.375rem;
    width: 100%;
    padding: 0.875rem; }
    @media screen and (max-width: 768px) {
      #contents .volume_indicator {
        height: 3.75rem;
        padding: 0.625rem; } }
    @media screen and (max-width: 580px) {
      #contents .volume_indicator {
        height: 3.4375rem; } }
  #contents .volume_bars {
    display: flex;
    width: 6.25rem;
    margin-right: 0.625rem;
    justify-content: flex-start; }
    @media screen and (max-width: 580px) {
      #contents .volume_bars {
        width: 60%;
        margin-right: 0.625rem; } }
  #contents .volume_bar {
    background-color: #999;
    text-indent: -5000px;
    width: 1.2em;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    height: 100%;
    border-radius: 0.125rem; }
    #contents .volume_bar.on {
      background-color: #ffdd33; }
  #contents .volume_num {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.875rem;
    color: #ffdd33; }
    @media screen and (max-width: 580px) {
      #contents .volume_num {
        font-size: 1.625rem; } }
  #contents .volume_lower {
    padding: 0.875rem;
    padding-top: 0.625rem;
    position: relative; }
    @media screen and (max-width: 580px) {
      #contents .volume_lower {
        padding: 0.625rem; } }
  #contents .volume_buttons {
    position: relative;
    height: 3.375rem; }
    #contents .volume_buttons:first-child {
      margin-bottom: 0.5rem; }
    @media screen and (max-width: 768px) {
      #contents .volume_buttons {
        height: 2.8125rem; } }
  #contents .items {
    width: 45rem;
    height: 25.625rem;
    padding: 1.875rem 2.5rem 1.25rem;
    border-radius: 1.125rem;
    border: 0.25rem solid #000;
    background-color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media screen and (max-width: 1024px) {
      #contents .items {
        margin-left: 3%;
        margin-right: 3%;
        padding: 2%; } }
    @media screen and (max-width: 768px) {
      #contents .items {
        border-width: 0.1875rem;
        padding: 2%;
        padding-top: 1.5rem;
        height: 65%; } }
    @media screen and (max-width: 580px) {
      #contents .items {
        height: 75%;
        margin-top: 5%; } }
    @media screen and (max-width: 420px) {
      #contents .items {
        margin-top: 14%;
        height: 82%; } }
    #contents .items_header {
      text-indent: -5000px;
      background-image: url("/network/bousai/images/itemlist/quiz_item_header_high.png"), url("/network/bousai/images/itemlist/quiz_item_header_icon_high.png");
      background-repeat: no-repeat no-repeat;
      background-size: 8.75rem, 3.125rem;
      background-position: 68% center, 17% center;
      width: 16.25rem;
      height: 3.375rem;
      border-radius: 1.6875rem;
      background-color: #000;
      border: 0.125rem solid #fff;
      position: absolute;
      top: -8%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1.875rem;
      margin-bottom: 1.875rem;
      width: 18.75rem;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 0 0.125rem 0 0 #000; }
      @media screen and (max-width: 1024px) {
        #contents .items_header {
          width: 25.3vw;
          height: 5.27vw;
          background-size: 13.67vw, 4.88vw;
          background-position: 70% center, 13% center; } }
      @media screen and (max-width: 768px) {
        #contents .items_header {
          width: 32.89vw;
          height: 6.851vw;
          background-size: 17.771vw, 6.344vw;
          top: -6%; } }
      @media screen and (max-width: 580px) {
        #contents .items_header {
          width: 43.01vw;
          height: 8.959vw;
          background-size: 23.239vw, 8.296vw; } }
      @media screen and (max-width: 420px) {
        #contents .items_header {
          width: 50.6vw;
          height: 10.54vw;
          background-size: 27.34vw, 9.76vw; } }
    #contents .items_list {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap; }
    #contents .items_item {
      position: relative;
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      background-color: #fff;
      margin: 0.625rem; }
      @media screen and (max-width: 768px) {
        #contents .items_item {
          width: 22vw;
          height: 22vw; } }
      @media screen and (max-width: 580px) {
        #contents .items_item {
          max-width: 7.5rem;
          max-height: 7.5rem;
          width: 32vw;
          height: 32vw;
          margin: 0.375rem; } }
      #contents .items_item_image {
        width: 80%;
        margin-top: -0.875rem; }
      #contents .items_item_header {
        position: absolute;
        font-weight: bold;
        left: 0;
        top: 72%;
        font-size: 1.125rem;
        width: 100%;
        height: 2rem;
        border-radius: 0.25rem;
        background-color: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0rem 0rem 0rem 0.125rem #fff; }
        @media screen and (max-width: 768px) {
          #contents .items_item_header {
            font-size: 2.5vw;
            height: auto;
            padding: 0.25rem; } }
        @media screen and (max-width: 580px) {
          #contents .items_item_header {
            font-size: 3vw;
            height: auto;
            padding: 0.25rem 0; } }
        @media screen and (max-width: 420px) {
          #contents .items_item_header {
            font-size: 3.5vw; } }
    #contents .items_empty {
      background: url("/network/bousai/images/itemlist/quiz_item_secret_high.png") no-repeat;
      background-position: center;
      background-size: contain;
      position: absolute;
      visibility: hidden;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%; }
      #contents .items_empty.active {
        visibility: visible; }
    #contents .items_failed {
      background-image: url("/network/bousai/images/itemlist/quiz_itemget_icon_question_high.png"), url("/network/bousai/images/itemlist/quiz_item_fail_foreground2_high.png"), url("/network/bousai/images/itemlist/quiz_item_fail_bg.png");
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: 30%, 76%, contain;
      background-position: center 37%, center, center;
      position: absolute;
      visibility: hidden;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%; }
      #contents .items_failed.active {
        visibility: visible; }
      #contents .items_failed_header {
        background-color: #999;
        letter-spacing: 0.1875rem; }
    #contents .items_success {
      background: url("/network/bousai/images/itemlist/quiz_item_success_background.png") no-repeat;
      background-position: center;
      background-size: contain;
      position: absolute;
      visibility: hidden;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      #contents .items_success.active {
        visibility: visible; }
      #contents .items_success_header {
        background-color: #000; }
  #contents .quiz .logo {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    left: 0.625rem; }
    #contents .quiz .logo_main {
      max-width: 16.875rem;
      width: 20vw; }
    @media screen and (max-width: 1024px) {
      #contents .quiz .logo_main {
        width: 20vw; } }
    @media screen and (max-width: 768px) {
      #contents .quiz .logo_main {
        width: 25vw; } }
    @media screen and (max-width: 580px) {
      #contents .quiz .logo {
        left: 1%; }
        #contents .quiz .logo_main {
          width: 30vw; } }
    @media screen and (max-width: 420px) {
      #contents .quiz .logo_main {
        width: 40vw; } }
  #contents .btn {
    font-weight: bold;
    background-color: transparent;
    border: none;
    font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
    line-height: normal; }
    #contents .btn:hover:not(.btn_dummy) {
      cursor: pointer;
      text-decoration: none; }
    #contents .btn .btn_inner {
      position: relative;
      -webkit-user-select: none; }
      #contents .btn .btn_inner > span {
        padding-bottom: 2px; }
    #contents .btn.btn_dummy {
      cursor: auto; }
      #contents .btn.btn_dummy .btn_inner > span {
        background-color: #cbcbcb !important;
        color: #848484 !important; }
        #contents .btn.btn_dummy .btn_inner > span img {
          opacity: 0.5; }
        #contents .btn.btn_dummy .btn_inner > span:after {
          opacity: 0.5; }
        #contents .btn.btn_dummy .btn_inner > span:before {
          opacity: 0.5; }
    #contents .btn .btn_inner {
      display: block; }
    @media (hover: hover), (-ms-high-contrast: none) {
      #contents .btn:active:not([disabled]) .btn_inner > span:after, #contents .btn:active:not([disabled]) .btn_inner > span:before, #contents .btn:hover:not([disabled]) .btn_inner > span:after, #contents .btn:hover:not([disabled]) .btn_inner > span:before, #contents .btn:focus:not([disabled]) .btn_inner > span:after, #contents .btn:focus:not([disabled]) .btn_inner > span:before {
        opacity: 0.4; } }
    #contents .btn_blank {
      border: 2px solid #000;
      background-color: #999999;
      border-radius: 0.5rem;
      transform: translateY(0.4rem); }
      #contents .btn_blank_hint, #contents .btn_blank_volume {
        width: 4.75rem;
        height: 2.75rem;
        right: 5rem;
        top: 0;
        position: absolute; }
        @media screen and (max-width: 768px) {
          #contents .btn_blank_hint, #contents .btn_blank_volume {
            height: 2.4375rem;
            max-width: 4.75rem;
            width: 28%;
            right: 30%; } }
        @media screen and (max-width: 580px) {
          #contents .btn_blank_hint, #contents .btn_blank_volume {
            height: 2.3125rem; } }
      #contents .btn_blank_volume {
        right: 0; }
    #contents .btn_util {
      width: 4.75rem;
      font-size: 1.25rem;
      font-weight: bold;
      position: absolute; }
      #contents .btn_util_blank {
        background-color: #999999; }
      @media screen and (max-width: 768px) {
        #contents .btn_util {
          max-width: 4.75rem;
          width: 28%; } }
      @media screen and (max-width: 580px) {
        #contents .btn_util {
          font-size: 3.5vw; } }
      #contents .btn_util .btn_inner {
        border-radius: 0.5rem;
        border: 2px solid #000;
        background-color: #000;
        height: 3rem; }
        @media screen and (max-width: 768px) {
          #contents .btn_util .btn_inner {
            height: 2.6875rem; } }
        #contents .btn_util .btn_inner > span {
          transition: all 0.1s;
          height: 2.5rem;
          background-color: #fff;
          color: #001e7c;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.375rem; }
          @media screen and (max-width: 768px) {
            #contents .btn_util .btn_inner > span {
              height: 2.1875rem; } }
      #contents .btn_util:active:not([disabled]):not(.btn_dummy), #contents .btn_util:focus:not([disabled]):not(.btn_dummy), #contents .btn_util:focus {
        box-shadow: 0 0 0.1875rem 0.125rem #fff; }
        #contents .btn_util:active:not([disabled]):not(.btn_dummy) .btn_inner, #contents .btn_util:focus:not([disabled]):not(.btn_dummy) .btn_inner, #contents .btn_util:focus .btn_inner {
          box-shadow: 0 0 0.1875rem 0.125rem #fff; }
          #contents .btn_util:active:not([disabled]):not(.btn_dummy) .btn_inner > span, #contents .btn_util:focus:not([disabled]):not(.btn_dummy) .btn_inner > span, #contents .btn_util:focus .btn_inner > span {
            box-shadow: inset 0 0 0.1875rem 0.125rem #00bceb; }
      @media (hover: hover), (-ms-high-contrast: none) {
        #contents .btn_util:hover:not([disabled]):not(.btn_dummy), #contents .btn_util:focus:hover:not(.btn_dummy) {
          padding-top: 0.25rem; }
          #contents .btn_util:hover:not([disabled]):not(.btn_dummy) .btn_inner, #contents .btn_util:focus:hover:not(.btn_dummy) .btn_inner {
            height: 2.75rem; } }
    @media screen and (hover: hover) and (max-width: 768px), screen and (-ms-high-contrast: none) and (max-width: 768px) {
      #contents .btn_util:hover:not([disabled]):not(.btn_dummy) .btn_inner, #contents .btn_util:focus:hover:not(.btn_dummy) .btn_inner {
        height: 2.4375rem; } }
      @media (hover: hover), (-ms-high-contrast: none) {
            #contents .btn_util:hover:not([disabled]):not(.btn_dummy) .btn_inner > span, #contents .btn_util:focus:hover:not(.btn_dummy) .btn_inner > span {
              box-shadow: none;
              transform: translateY(0.25rem);
              height: 2.25rem;
              color: #fff;
              background-color: #001e7c; } }
      @media screen and (hover: hover) and (max-width: 768px), screen and (-ms-high-contrast: none) and (max-width: 768px) {
        #contents .btn_util:hover:not([disabled]):not(.btn_dummy) .btn_inner > span, #contents .btn_util:focus:hover:not(.btn_dummy) .btn_inner > span {
          height: 1.9375rem; } }
    #contents .btn_volume {
      right: 0;
      top: 0;
      color: #000; }
      #contents .btn_volume.animated:disabled:hover {
        cursor: auto; }
      #contents .btn_volume.animated:disabled .btn_inner > span {
        background-color: #cbcbcb !important;
        color: #848484 !important; }
        #contents .btn_volume.animated:disabled .btn_inner > span img {
          opacity: 0.5; }
        #contents .btn_volume.animated:disabled .btn_inner > span:after {
          opacity: 0.5; }
        #contents .btn_volume.animated:disabled .btn_inner > span:before {
          opacity: 0.5; }
    #contents .btn_hint {
      top: 0;
      right: 30%;
      overflow: visible;
      border-radius: 0.5rem;
      z-index: 1; }
      #contents .btn_hint.active {
        -webkit-animation: btn_glow 3.3s linear 0.5s 3;
                animation: btn_glow 3.3s linear 0.5s 3; }
    #contents .btn_item {
      background-color: transparent;
      color: #001e7c;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      line-height: 1;
      width: 5.5rem; }
      #contents .btn_item.btn_dummy {
        width: 5.5rem;
        line-height: 1; }
        @media screen and (max-width: 580px) {
          #contents .btn_item.btn_dummy {
            width: 3.75rem;
            line-height: 1; } }
      #contents .btn_item.active {
        -webkit-animation: btn_glow 3.3s linear 0.5s 3;
                animation: btn_glow 3.3s linear 0.5s 3;
        border-radius: 0.5rem; }
      @media screen and (max-width: 580px) {
        #contents .btn_item {
          width: 3.75rem;
          line-height: 1; } }
      #contents .btn_item_blank {
        border-radius: 0.5rem;
        border: 2px solid #000;
        width: 5.5rem;
        height: 4.125rem;
        background-color: #999999; }
        @media screen and (max-width: 768px) {
          #contents .btn_item_blank {
            height: 3.5rem;
            max-width: 5.5rem;
            width: 33%; } }
        @media screen and (max-width: 580px) {
          #contents .btn_item_blank {
            height: 3.125rem; } }
      #contents .btn_item .btn_inner {
        position: relative;
        border-radius: 0.5rem;
        border: 2px solid #000;
        background-color: #000;
        width: 5.5rem;
        height: 4.125rem; }
        @media screen and (max-width: 768px) {
          #contents .btn_item .btn_inner {
            height: 3.5rem; } }
        @media screen and (max-width: 580px) {
          #contents .btn_item .btn_inner {
            height: 3.125rem;
            width: 3.75rem; } }
        #contents .btn_item .btn_inner .icon_item {
          width: 45%;
          top: 0.375rem;
          max-width: 2.1875rem;
          position: absolute;
          left: 50%;
          transform: translateX(-50%); }
          @media screen and (max-width: 768px) {
            #contents .btn_item .btn_inner .icon_item {
              width: 35%;
              min-width: 1.4375rem;
              top: 0.1875rem; } }
        #contents .btn_item .btn_inner > span {
          font-size: 1rem;
          padding-bottom: 0.125rem;
          position: relative;
          font-weight: bold;
          transition: all 0.1s;
          height: 3.5rem;
          background-color: #fff;
          color: #001e7c;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 43%;
          justify-content: flex-start;
          border-radius: 0.375rem; }
          @media screen and (max-width: 768px) {
            #contents .btn_item .btn_inner > span {
              height: 2.875rem;
              padding-top: 35%;
              font-size: 0.875rem; } }
          @media screen and (max-width: 580px) {
            #contents .btn_item .btn_inner > span {
              height: 2.5rem;
              padding-top: 45%;
              font-size: 0.75rem; } }
      #contents .btn_item:focus:not([disabled]):not(.btn_dummy) .btn_inner, #contents .btn_item:active:not([disabled]):not(.btn_dummy) .btn_inner {
        box-shadow: 0 0 2px 2px #fff; }
        #contents .btn_item:focus:not([disabled]):not(.btn_dummy) .btn_inner > span, #contents .btn_item:active:not([disabled]):not(.btn_dummy) .btn_inner > span {
          box-shadow: inset 0px 0px 4px 2px #00bceb; }
      @media (hover: hover), (-ms-high-contrast: none) {
        #contents .btn_item:hover:not([disabled]):not(.btn_dummy), #contents .btn_item:hover:focus:not(.btn_dummy) {
          padding-top: 0.25rem; }
          #contents .btn_item:hover:not([disabled]):not(.btn_dummy) .btn_inner, #contents .btn_item:hover:focus:not(.btn_dummy) .btn_inner {
            height: 3.75rem; } }
    @media screen and (hover: hover) and (max-width: 768px), screen and (-ms-high-contrast: none) and (max-width: 768px) {
      #contents .btn_item:hover:not([disabled]):not(.btn_dummy) .btn_inner, #contents .btn_item:hover:focus:not(.btn_dummy) .btn_inner {
        height: 3.125rem; } }
    @media screen and (hover: hover) and (max-width: 580px), screen and (-ms-high-contrast: none) and (max-width: 580px) {
      #contents .btn_item:hover:not([disabled]):not(.btn_dummy) .btn_inner, #contents .btn_item:hover:focus:not(.btn_dummy) .btn_inner {
        height: 2.75rem; } }
      @media (hover: hover), (-ms-high-contrast: none) {
            #contents .btn_item:hover:not([disabled]):not(.btn_dummy) .btn_inner > span, #contents .btn_item:hover:focus:not(.btn_dummy) .btn_inner > span {
              transform: translateY(0.25rem);
              height: 3.25rem;
              background-color: #ffdd33; } }
      @media screen and (hover: hover) and (max-width: 768px), screen and (-ms-high-contrast: none) and (max-width: 768px) {
        #contents .btn_item:hover:not([disabled]):not(.btn_dummy) .btn_inner > span, #contents .btn_item:hover:focus:not(.btn_dummy) .btn_inner > span {
          height: 2.625rem; } }
      @media screen and (hover: hover) and (max-width: 580px), screen and (-ms-high-contrast: none) and (max-width: 580px) {
        #contents .btn_item:hover:not([disabled]):not(.btn_dummy) .btn_inner > span, #contents .btn_item:hover:focus:not(.btn_dummy) .btn_inner > span {
          height: 2.25rem; } }
    #contents .btn_answer {
      background-color: transparent;
      color: #000;
      width: calc(33% - 4px);
      font-size: 2.5rem;
      font-weight: bold; }
      @media screen and (max-width: 768px) {
        #contents .btn_answer {
          font-size: 2.1875rem; } }
      @media screen and (max-width: 768px) {
        #contents .btn_answer {
          font-size: 1.875rem; } }
      #contents .btn_answer_blank {
        border-radius: 0.5rem;
        border: 2px solid #000;
        width: calc(33% - 4px);
        background-color: #666666; }
      #contents .btn_answer .btn_inner {
        border-radius: 0.5rem;
        border: 2px solid #000;
        background-color: #000;
        height: 3.4375rem; }
        @media screen and (max-width: 768px) {
          #contents .btn_answer .btn_inner {
            height: 3.125rem; } }
        @media screen and (max-width: 580px) {
          #contents .btn_answer .btn_inner {
            height: 2.75rem; } }
        #contents .btn_answer .btn_inner > span {
          transition: all 0.1s;
          height: 2.875rem;
          background-color: #ff0224;
          color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.375rem; }
          @media screen and (max-width: 768px) {
            #contents .btn_answer .btn_inner > span {
              height: 2.5625rem; } }
          @media screen and (max-width: 580px) {
            #contents .btn_answer .btn_inner > span {
              height: 2.1875rem; } }
      #contents .btn_answer_small {
        width: calc(25% - 4px); }
      #contents .btn_answer:active:not([disabled]) .btn_inner > span, #contents .btn_answer:focus:not([disabled]) .btn_inner > span {
        color: #000;
        box-shadow: none; }
      #contents .btn_answer:hover:not([disabled]), #contents .btn_answer:focus:hover {
        padding-top: 0.25rem; }
        #contents .btn_answer:hover:not([disabled]) .btn_inner, #contents .btn_answer:focus:hover .btn_inner {
          height: 3.25rem; }
          @media screen and (max-width: 768px) {
            #contents .btn_answer:hover:not([disabled]) .btn_inner, #contents .btn_answer:focus:hover .btn_inner {
              height: 2.9375rem; } }
          @media screen and (max-width: 580px) {
            #contents .btn_answer:hover:not([disabled]) .btn_inner, #contents .btn_answer:focus:hover .btn_inner {
              height: 2.5625rem; } }
          #contents .btn_answer:hover:not([disabled]) .btn_inner > span, #contents .btn_answer:focus:hover .btn_inner > span {
            box-shadow: inset 0px 0px 8px 6px #fff;
            transform: translateY(0.25rem);
            height: 2.75rem; }
            @media screen and (max-width: 768px) {
              #contents .btn_answer:hover:not([disabled]) .btn_inner > span, #contents .btn_answer:focus:hover .btn_inner > span {
                height: 2.4375rem; } }
            @media screen and (max-width: 580px) {
              #contents .btn_answer:hover:not([disabled]) .btn_inner > span, #contents .btn_answer:focus:hover .btn_inner > span {
                height: 2.0625rem; } }
    #contents .btn_auto_forward {
      visibility: hidden; }
    #contents .btn_pause, #contents .btn_play, #contents .btn_left {
      position: absolute;
      top: 0;
      left: 0; }
    #contents .btn_pause .btn_inner > span:before, #contents .btn_play .btn_inner > span:before, #contents .btn_down .btn_inner > span:before, #contents .btn_forward .btn_inner > span:before {
      content: "";
      background: url("/network/bousai/images/icon/quiz_btn_forward.png") no-repeat;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      width: 1.125rem;
      height: 1.125rem;
      margin-right: 0.25rem;
      display: block;
      margin-top: 0.125rem; }
      @media screen and (max-width: 580px) {
        #contents .btn_pause .btn_inner > span:before, #contents .btn_play .btn_inner > span:before, #contents .btn_down .btn_inner > span:before, #contents .btn_forward .btn_inner > span:before {
          width: 3.5vw;
          height: 3.5vw;
          margin-right: 1vw; } }
    #contents .btn_pause .btn_inner > span:before {
      background: url("/network/bousai/images/icon/quiz_btn_pause.png") no-repeat;
      background-position: center;
      background-size: contain; }
    #contents .btn_play .btn_inner > span:before {
      background: url("/network/bousai/images/icon/quiz_btn_play.png") no-repeat;
      background-position: center;
      background-size: contain; }
    #contents .btn_down .btn_inner > span:before {
      background: url("/network/bousai/images/icon/quiz_btn_down.png") no-repeat;
      background-position: center;
      background-size: contain; }
    #contents .btn_up .btn_inner > span:after {
      content: "";
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      width: 1.125rem;
      height: 1.125rem;
      margin-right: 0.4rem;
      display: block;
      background: url("/network/bousai/images/icon/quiz_btn_up.png") no-repeat;
      background-position: center;
      background-size: contain; }
      @media screen and (max-width: 580px) {
        #contents .btn_up .btn_inner > span:after {
          width: 3.5vw;
          height: 3.5vw; } }
    #contents .btn_right {
      position: absolute;
      top: 0;
      right: 0; }
    #contents .btn_full {
      width: 100%;
      background-color: transparent;
      font-size: 1.5rem;
      color: #fff; }
      #contents .btn_full .btn_inner {
        border-radius: 0.5rem;
        border: 2px solid #000;
        background-color: #000;
        height: 3.4375rem; }
        #contents .btn_full .btn_inner > span {
          transition: all 0.1s;
          height: 2.875rem;
          background-color: #ff0224;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.375rem; }
        @media screen and (max-width: 768px) {
          #contents .btn_full .btn_inner {
            font-size: 1.375rem;
            height: 3.125rem; }
            #contents .btn_full .btn_inner > span {
              height: 2.5625rem; } }
        @media screen and (max-width: 580px) {
          #contents .btn_full .btn_inner {
            font-size: 1.25rem;
            height: 2.75rem; }
            #contents .btn_full .btn_inner > span {
              height: 2.1875rem; } }
      #contents .btn_full:focus:not([disabled]), #contents .btn_full:focus:active:not([disabled]) {
        padding-top: 0;
        opacity: 1; }
        #contents .btn_full:focus:not([disabled]) .btn_inner, #contents .btn_full:focus:active:not([disabled]) .btn_inner {
          height: 3.4375rem; }
          #contents .btn_full:focus:not([disabled]) .btn_inner > span, #contents .btn_full:focus:active:not([disabled]) .btn_inner > span {
            color: #fff;
            background-color: #ff0224;
            box-shadow: inset 0px 0px 8px 6px #fff;
            transform: translateY(0);
            height: 2.875rem; }
          @media screen and (max-width: 768px) {
            #contents .btn_full:focus:not([disabled]) .btn_inner, #contents .btn_full:focus:active:not([disabled]) .btn_inner {
              height: 3.125rem; }
              #contents .btn_full:focus:not([disabled]) .btn_inner > span, #contents .btn_full:focus:active:not([disabled]) .btn_inner > span {
                height: 2.5625rem; } }
          @media screen and (max-width: 580px) {
            #contents .btn_full:focus:not([disabled]) .btn_inner, #contents .btn_full:focus:active:not([disabled]) .btn_inner {
              height: 2.75rem; }
              #contents .btn_full:focus:not([disabled]) .btn_inner > span, #contents .btn_full:focus:active:not([disabled]) .btn_inner > span {
                height: 2.1875rem; } }
      #contents .btn_full:disabled.btn_nextLecture {
        opacity: 1; }
        #contents .btn_full:disabled.btn_nextLecture > .btn_inner > span {
          background-color: #ff0224;
          color: #fff; }
      @media (hover: hover), (-ms-high-contrast: none) {
        #contents .btn_full:hover:not([disabled]) {
          padding-top: 0.25rem; }
          #contents .btn_full:hover:not([disabled]) .btn_inner {
            height: 3.25rem; }
            #contents .btn_full:hover:not([disabled]) .btn_inner > span {
              box-shadow: inset 0px 0px 8px 6px #fff;
              transform: translateY(0.25rem);
              height: 2.75rem; } }
  @media screen and (hover: hover) and (max-width: 768px), screen and (-ms-high-contrast: none) and (max-width: 768px) {
    #contents .btn_full:hover:not([disabled]) .btn_inner {
      height: 2.9375rem; }
      #contents .btn_full:hover:not([disabled]) .btn_inner > span {
        height: 2.4375rem; } }
  @media screen and (hover: hover) and (max-width: 580px), screen and (-ms-high-contrast: none) and (max-width: 580px) {
    #contents .btn_full:hover:not([disabled]) .btn_inner {
      height: 2.5625rem; }
      #contents .btn_full:hover:not([disabled]) .btn_inner > span {
        height: 2.0625rem; } }
      #contents .btn_full:disabled .btn_inner > span {
        box-shadow: none; }
    #contents .btn_blue .btn_inner > span {
      background-color: #00bceb; }
    #contents .btn_blue:active:not([disabled]) .btn_inner > span, #contents .btn_blue:focus:not([disabled]) .btn_inner > span {
      box-shadow: inset 0px 0px 8px 6px #fff; }
    #contents .btn_blue:hover:not([disabled]) .btn_inner > span {
      text-shadow: 1px 1px 0 #00bceb, -1px 1px 0 #00bceb, 1px -1px 0 #00bceb, -1px -1px 0 #00bceb;
      color: #fff;
      box-shadow: inset 0px 0px 8px 6px #fff; }
    #contents .btn_yellow .btn_inner > span {
      color: #000;
      background-color: #ffdd33; }
    #contents .btn_yellow:focus:not([disabled]) .btn_inner > span, #contents .btn_yellow:active:not([disabled]) .btn_inner > span {
      box-shadow: inset 0px 0px 8px 6px #fff; }
    #contents .btn_yellow:hover:not([disabled]) .btn_inner > span {
      text-shadow: 1px 1px 0 #d9bc02, -1px 1px 0 #d9bc02, 1px -1px 0 #d9bc02, -1px -1px 0 #d9bc02;
      color: #fff;
      box-shadow: inset 0px 0px 8px 6px #fff; }
    #contents .btn_orange .btn_inner > span {
      background-color: #f58e18; }
    #contents .btn_orange:focus:not([disabled]) .btn_inner > span {
      box-shadow: inset 0px 0px 8px 6px #fff; }
    #contents .btn_orange:active:not([disabled]) .btn_inner > span, #contents .btn_orange:hover:not([disabled]) .btn_inner > span {
      text-shadow: 1px 1px 0 #f58e18, -1px 1px 0 #f58e18, 1px -1px 0 #f58e18, -1px -1px 0 #f58e18;
      color: #fff;
      box-shadow: inset 0px 0px 8px 6px #fff; }
    #contents .btn_red .btn_inner > span {
      background-color: #ff0224; }
    #contents .btn_red:active:not([disabled]) .btn_inner > span, #contents .btn_red:hover:not([disabled]) .btn_inner > span, #contents .btn_red:focus:not([disabled]) .btn_inner > span {
      text-shadow: 1px 1px 0 #ff0224, -1px 1px 0 #ff0224, 1px -1px 0 #ff0224, -1px -1px 0 #ff0224;
      color: #fff;
      box-shadow: inset 0px 0px 8px 6px #fff; }
    #contents .btn_white .btn_inner {
      color: #000 !important; }
      #contents .btn_white .btn_inner > span {
        color: #000 !important;
        background-color: #fff !important; }
    #contents .btn_white:focus:not([disabled]) .btn_inner {
      box-shadow: 0px 0px 4px 2px #fff; }
    @media (hover: hover), (-ms-high-contrast: none) {
      #contents .btn_white:active:not([disabled]) .btn_inner, #contents .btn_white:hover:not([disabled]) .btn_inner, #contents .btn_white:hover:focus .btn_inner {
        box-shadow: none; }
      #contents .btn_white:active:not([disabled]) .btn_inner > span, #contents .btn_white:hover:not([disabled]) .btn_inner > span, #contents .btn_white:hover:focus .btn_inner > span {
        background-color: #ffdd33;
        color: #000 !important;
        box-shadow: inset 0px 0px 4px 2px #ffdd33 !important; } }
    #contents .btn_half {
      width: calc(50% - 4px);
      font-size: 1.4375rem;
      color: #000; }
      #contents .btn_half .btn_inner {
        border-radius: 0.5rem;
        border: 2px solid #000;
        background-color: #000;
        height: 3.4375rem; }
        #contents .btn_half .btn_inner > span {
          transition: all 0.1s;
          height: 2.875rem;
          color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.375rem; }
        @media screen and (max-width: 768px) {
          #contents .btn_half .btn_inner {
            height: 3.125rem; }
            #contents .btn_half .btn_inner > span {
              height: 2.5625rem; } }
        @media screen and (max-width: 580px) {
          #contents .btn_half .btn_inner {
            font-size: 3.8vw;
            height: 2.75rem; }
            #contents .btn_half .btn_inner > span {
              height: 2.1875rem; } }
      #contents .btn_half:focus:not([disabled]) .btn_inner > span {
        box-shadow: inset 0px 0px 8px 6px #fff; }
      @media (hover: hover), (-ms-high-contrast: none) {
        #contents .btn_half:active:not([disabled]), #contents .btn_half:hover:not([disabled]) {
          padding-top: 0.25rem; }
          #contents .btn_half:active:not([disabled]) .btn_inner, #contents .btn_half:hover:not([disabled]) .btn_inner {
            height: 3.25rem; }
            #contents .btn_half:active:not([disabled]) .btn_inner > span, #contents .btn_half:hover:not([disabled]) .btn_inner > span {
              box-shadow: inset 0px 0px 8px 6px #fff;
              transform: translateY(0.25rem);
              height: 2.75rem;
              color: #fff; } }
    @media screen and (hover: hover) and (max-width: 768px), screen and (-ms-high-contrast: none) and (max-width: 768px) {
      #contents .btn_half:active:not([disabled]) .btn_inner, #contents .btn_half:hover:not([disabled]) .btn_inner {
        height: 2.9375rem; }
        #contents .btn_half:active:not([disabled]) .btn_inner > span, #contents .btn_half:hover:not([disabled]) .btn_inner > span {
          height: 2.4375rem; } }
    @media screen and (hover: hover) and (max-width: 580px), screen and (-ms-high-contrast: none) and (max-width: 580px) {
      #contents .btn_half:active:not([disabled]) .btn_inner, #contents .btn_half:hover:not([disabled]) .btn_inner {
        height: 2.5625rem; }
        #contents .btn_half:active:not([disabled]) .btn_inner > span, #contents .btn_half:hover:not([disabled]) .btn_inner > span {
          height: 2.0625rem; } }
      @media screen and (max-width: 768px) {
        #contents .btn_half {
          font-size: 3.3vw; } }
    #contents .btn_withJs {
      visibility: hidden; }
  #contents .active .btn:disabled:hover {
    cursor: auto; }
  #contents .shown .btn:disabled:hover {
    cursor: auto; }
  #contents .shown .btn:disabled .btn_inner > span {
    background-color: #cbcbcb;
    color: #848484; }
    #contents .shown .btn:disabled .btn_inner > span img {
      opacity: 0.5; }
    #contents .shown .btn:disabled .btn_inner > span:after {
      opacity: 0.5; }
    #contents .shown .btn:disabled .btn_inner > span:before {
      opacity: 0.5; }
  #contents .shown .btn_full:disabled.btn_nextLecture > .btn_inner > span {
    background-color: #cbcbcb;
    color: #848484; }
  #contents .controller {
    z-index: 100;
    background-color: #525252;
    border: 4px solid #000;
    border-radius: 1rem;
    padding: 0.6875rem 0.75rem;
    width: 20.25rem;
    height: 38rem;
    position: absolute;
    overflow: hidden;
    bottom: -28.125rem;
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 0.5s cubic-bezier(0.33, -1.44, 0.55, 1.77) 0s; }
    #contents .controller.withAvatar {
      left: 55%; }
    #contents .controller.active {
      bottom: -23.125rem;
      box-shadow: 0 0 0 0.1875rem #fff;
      -webkit-animation: controller_challenge 3.5s ease-in-out 1;
              animation: controller_challenge 3.5s ease-in-out 1; }
      @media screen and (max-width: 768px) {
        #contents .controller.active {
          -webkit-animation: controller_challenge_xs 3.5s ease-in-out 1;
                  animation: controller_challenge_xs 3.5s ease-in-out 1;
          bottom: -23.75rem; } }
      @media screen and (max-width: 580px) {
        #contents .controller.active {
          -webkit-animation: controller_challenge_sp 3.5s ease-in-out 1;
                  animation: controller_challenge_sp 3.5s ease-in-out 1;
          bottom: -25.625rem; } }
      @media screen and (max-width: 420px) {
        #contents .controller.active {
          -webkit-animation: controller_challenge_se 3.5s ease-in-out 1;
                  animation: controller_challenge_se 3.5s ease-in-out 1;
          bottom: -26.25rem; } }
    #contents .controller.shown {
      bottom: -11.25rem;
      box-shadow: 0 0 0 0.1875rem #fff;
      transition: bottom 0.5s cubic-bezier(0.33, -1.54, 0.55, 1.77) 0s; }
      @media screen and (max-width: 768px) {
        #contents .controller.shown {
          bottom: -13.75rem; } }
      @media screen and (max-width: 580px) {
        #contents .controller.shown {
          bottom: -16.25rem; } }
      @media screen and (max-width: 420px) {
        #contents .controller.shown {
          bottom: -16.875rem; } }
    @media screen and (max-width: 768px) {
      #contents .controller {
        max-width: none;
        width: 45.57292vw;
        bottom: -29.375rem; } }
    @media screen and (max-width: 580px) {
      #contents .controller {
        padding: 2.5% 3%;
        bottom: -30rem;
        width: 60vw; }
        #contents .controller.withAvatar {
          left: 60%; } }
    @media screen and (max-width: 420px) {
      #contents .controller {
        bottom: -30.625rem;
        width: 65vw; }
        #contents .controller.withAvatar {
          left: 60%; } }
    #contents .controller_upper {
      position: relative;
      height: 4.75rem; }
      @media screen and (max-width: 768px) {
        #contents .controller_upper {
          height: 3.875rem; } }
      @media screen and (max-width: 580px) {
        #contents .controller_upper {
          height: 3.25rem; } }
    #contents .controller_lower {
      position: relative;
      border-radius: 0.5rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      height: 3.375rem; }
      @media screen and (max-width: 580px) {
        #contents .controller_lower {
          height: 3rem; } }
      #contents .controller_lower_volume {
        height: auto;
        border: 2px solid #CCCCCC;
        flex-direction: column;
        justify-content: flex-start; }
      #contents .controller_lower_dummy {
        flex-wrap: wrap;
        padding: 0.875rem;
        padding-top: 0.625rem; }
        @media screen and (max-width: 580px) {
          #contents .controller_lower_dummy {
            padding: 0.625rem; } }
        #contents .controller_lower_dummy .btn_num_dummy {
          width: 32%;
          font-size: 1.75rem;
          padding: 0.25rem 0.375rem;
          margin-bottom: 0.5rem;
          background-color: #999;
          display: flex;
          align-items: center;
          color: #eee;
          border-radius: 0.375rem;
          font-weight: bold;
          justify-content: center;
          border: 0.125rem solid #000;
          box-shadow: 0 0.1875rem 0 0 #000; }
  #contents .avatar {
    border-radius: 50%;
    background-color: #fff;
    width: 12.5rem;
    height: 12.5rem;
    border: 4px solid #000;
    position: absolute;
    bottom: -3.75rem;
    left: 50%;
    transform: translateX(-16.25rem);
    overflow: hidden;
    display: flex;
    justify-content: center;
    z-index: 2; }
    #contents .avatar.hidden {
      opacity: 0;
      transform: scale(0.1) translateX(-16.25rem); }
    #contents .avatar.active {
      transition: all 0.5s;
      opacity: 1;
      transform: scale(1) translateX(-16.25rem); }
      @media screen and (max-width: 1024px) {
        #contents .avatar.active {
          transform: translateX(-135%) scale(1); } }
      @media screen and (max-width: 768px) {
        #contents .avatar.active {
          width: 7.5rem;
          height: 7.5rem;
          bottom: -1.25rem;
          transform: translateX(-14.75rem) scale(1); } }
      @media screen and (max-width: 580px) {
        #contents .avatar.active {
          transform: translateX(-12.5rem) scale(1); } }
      @media screen and (max-width: 420px) {
        #contents .avatar.active {
          transform: translateX(-11.25rem) scale(1); } }
    #contents .avatar_summary {
      color: #ff0224;
      text-align: center;
      margin-top: 15%;
      margin-bottom: 0; }
      @media screen and (max-width: 580px) {
        #contents .avatar_summary {
          margin-top: 5%; } }
      @media screen and (max-width: 420px) {
        #contents .avatar_summary {
          margin-top: 10%; } }
      #contents .avatar_summary > img {
        height: 2.8125rem; }
        @media screen and (max-width: 768px) {
          #contents .avatar_summary > img {
            height: 5.8vw;
            width: auto; } }
        @media screen and (max-width: 580px) {
          #contents .avatar_summary > img {
            height: 7vw;
            margin-top: 2%; } }
    #contents .avatar_inner {
      border-color: transparent;
      background-color: transparent;
      z-index: 2; }
      #contents .avatar_inner > img.hidden {
        opacity: 0;
        transform: scale(0.1); }
      #contents .avatar_inner > img.active {
        transition: all 0.5s;
        opacity: 1;
        transform: scale(1); }
    @media screen and (max-width: 1024px) {
      #contents .avatar {
        transform: translateX(-135%) scale(1); } }
    @media screen and (max-width: 768px) {
      #contents .avatar {
        width: 7.5rem;
        height: 7.5rem;
        bottom: -1.25rem;
        transform: translateX(-14.75rem) scale(1); } }
    @media screen and (max-width: 580px) {
      #contents .avatar {
        transform: translateX(-12.5rem) scale(1); } }
    @media screen and (max-width: 420px) {
      #contents .avatar {
        transform: translateX(-11.25rem) scale(1); } }
    #contents .avatar > img {
      width: 8.75rem;
      margin-top: -1.875rem; }
      @media screen and (max-width: 768px) {
        #contents .avatar > img {
          width: 5.125rem;
          margin-top: -0.625rem; } }
    #contents .avatar_withItems {
      position: relative;
      width: 15rem;
      height: 90%; }
      #contents .avatar_withItems > img {
        position: absolute;
        max-height: 100%;
        width: auto;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%); }
      @media screen and (max-width: 768px) {
        #contents .avatar_withItems {
          margin-top: -3%;
          width: 48%; } }
      @media screen and (max-width: 580px) {
        #contents .avatar_withItems {
          height: 80%; }
          #contents .avatar_withItems > img {
            top: 55%; } }
  #contents .withItems .avatar_withItems .item_helmet {
    display: none; }
  #contents .page_noJs .avatar_withItems {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: url("/network/bousai/images/itemget/quiz_itemget_bg_circle.png") no-repeat;
    background-position: center;
    background-size: cover; }
    #contents .page_noJs .avatar_withItems .noJs_helmet {
      width: 80%; }
  #contents .animate_avatar {
    position: absolute;
    z-index: 100;
    top: 7%;
    left: 40%;
    width: 20%;
    transition: all 0.3s;
    transition: left 1s ease-in-out 0s, top 1s ease-in-out 0s; }
    @media screen and (min-width: 1300px) {
      #contents .animate_avatar {
        width: 15%;
        left: 45%;
        top: 0%; } }
    @media screen and (max-width: 768px) {
      #contents .animate_avatar {
        top: 20%; } }
    #contents .animate_avatar.animated {
      top: 80%;
      bottom: 0;
      width: 20%;
      left: 40%;
      transform: scale(0.1);
      transition: all 0.3s;
      transition-timing-function: cubic-bezier(0, 0.65, 0.49, 1.63); }
  #contents .avatar_animation {
    animation: avatar_frames ease-in 2s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
    /*when the spec is finished*/
    -webkit-animation: avatar_frames ease-in 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    /*Chrome 16+, Safari 4+*/
    -moz-animation: avatar_frames ease-in 2s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode: forwards;
    /*FF 5+*/
    -o-animation: avatar_frames ease-in 2s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode: forwards;
    /*Not implemented yet*/
    -ms-animation: avatar_frames ease-in 2s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode: forwards;
    /*IE 10+*/ }

@keyframes avatar_frames {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) scaleX(1) scaleY(1); }
  23% {
    opacity: 1;
    transform: translate(-14px, -44px) scaleX(0.8) scaleY(0.7); }
  70% {
    transform: translate(-12px, 152px) scaleX(0.49) scaleY(0.44); }
  100% {
    opacity: 0;
    transform: translate(-12px, 400px) scaleX(0.1) scaleY(0.1); } }

@-webkit-keyframes avatar_frames {
  0% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px) scaleX(1) scaleY(1); }
  23% {
    opacity: 1;
    -webkit-transform: translate(-14px, -44px) scaleX(0.8) scaleY(0.7); }
  70% {
    -webkit-transform: translate(-12px, 152px) scaleX(0.49) scaleY(0.44); }
  100% {
    opacity: 0;
    -webkit-transform: translate(-12px, 400px) scaleX(0.1) scaleY(0.1); } }
  #contents .animation_target {
    -webkit-animation: animation 4500ms linear both;
    animation: animation 4500ms linear both; }

@-webkit-keyframes animation {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.1% {
    transform: matrix3d(0.904, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, -23.028, 0, 1); }
  2.54% {
    transform: matrix3d(0.887, 0, 0, 0, 0, 0.887, 0, 0, 0, 0, 1, 0, 0, -26.585, 0, 1); }
  4.17% {
    transform: matrix3d(0.833, 0, 0, 0, 0, 0.833, 0, 0, 0, 0, 1, 0, 0, -37.264, 0, 1); }
  5.03% {
    transform: matrix3d(0.809, 0, 0, 0, 0, 0.809, 0, 0, 0, 0, 1, 0, 0, -41.462, 0, 1); }
  6.27% {
    transform: matrix3d(0.781, 0, 0, 0, 0, 0.781, 0, 0, 0, 0, 1, 0, 0, -46.267, 0, 1); }
  7.56% {
    transform: matrix3d(0.757, 0, 0, 0, 0, 0.757, 0, 0, 0, 0, 1, 0, 0, -49.975, 0, 1); }
  8.34% {
    transform: matrix3d(0.746, 0, 0, 0, 0, 0.746, 0, 0, 0, 0, 1, 0, 0, -51.726, 0, 1); }
  10.05% {
    transform: matrix3d(0.726, 0, 0, 0, 0, 0.726, 0, 0, 0, 0, 1, 0, 0, -54.606, 0, 1); }
  12.51% {
    transform: matrix3d(0.709, 0, 0, 0, 0, 0.709, 0, 0, 0, 0, 1, 0, 0, -57.124, 0, 1); }
  12.59% {
    transform: matrix3d(0.708, 0, 0, 0, 0, 0.708, 0, 0, 0, 0, 1, 0, 0, -57.181, 0, 1); }
  15.08% {
    transform: matrix3d(0.699, 0, 0, 0, 0, 0.699, 0, 0, 0, 0, 1, 0, 0, -58.54, 0, 1); }
  16.57% {
    transform: matrix3d(0.697, 0, 0, 0, 0, 0.697, 0, 0, 0, 0, 1, 0, 0, -59.024, 0, 1); }
  16.67% {
    transform: matrix3d(0.697, 0, 0, 0, 0, 0.697, 0, 0, 0, 0, 1, 0, 0, -59.051, 0, 1); }
  16.68% {
    transform: matrix3d(0.694, 0, 0, 0, 0, 0.694, 0, 0, 0, 0, 1, 0, 0, -57.991, 0, 1); }
  18.25% {
    transform: matrix3d(0.487, 0, 0, 0, 0, 0.487, 0, 0, 0, 0, 1, 0, 0, 37.25, 0, 1); }
  19.81% {
    transform: matrix3d(0.342, 0, 0, 0, 0, 0.342, 0, 0, 0, 0, 1, 0, 0, 123.072, 0, 1); }
  20.06% {
    transform: matrix3d(0.323, 0, 0, 0, 0, 0.323, 0, 0, 0, 0, 1, 0, 0, 136.339, 0, 1); }
  20.17% {
    transform: matrix3d(0.316, 0, 0, 0, 0, 0.316, 0, 0, 0, 0, 1, 0, 0, 141.75, 0, 1); }
  21.39% {
    transform: matrix3d(0.245, 0, 0, 0, 0, 0.245, 0, 0, 0, 0, 1, 0, 0, 201.54, 0, 1); }
  22.95% {
    transform: matrix3d(0.187, 0, 0, 0, 0, 0.187, 0, 0, 0, 0, 1, 0, 0, 270.167, 0, 1); }
  23.67% {
    transform: matrix3d(0.17, 0, 0, 0, 0, 0.17, 0, 0, 0, 0, 1, 0, 0, 299.286, 0, 1); }
  24.54% {
    transform: matrix3d(0.154, 0, 0, 0, 0, 0.154, 0, 0, 0, 0, 1, 0, 0, 331.82, 0, 1); }
  25.03% {
    transform: matrix3d(0.148, 0, 0, 0, 0, 0.148, 0, 0, 0, 0, 1, 0, 0, 349.266, 0, 1); }
  26.09% {
    transform: matrix3d(0.138, 0, 0, 0, 0, 0.138, 0, 0, 0, 0, 1, 0, 0, 384.846, 0, 1); }
  27.18% {
    transform: matrix3d(0.133, 0, 0, 0, 0, 0.133, 0, 0, 0, 0, 1, 0, 0, 417.653, 0, 1); }
  29.21% {
    transform: matrix3d(0.13, 0, 0, 0, 0, 0.13, 0, 0, 0, 0, 1, 0, 0, 470.736, 0, 1); }
  30.6% {
    transform: matrix3d(0.131, 0, 0, 0, 0, 0.131, 0, 0, 0, 0, 1, 0, 0, 501.396, 0, 1); }
  32.25% {
    transform: matrix3d(0.133, 0, 0, 0, 0, 0.133, 0, 0, 0, 0, 1, 0, 0, 532.561, 0, 1); }
  33.33% {
    transform: matrix3d(0.134, 0, 0, 0, 0, 0.134, 0, 0, 0, 0, 1, 0, 0, 550.011, 0, 1); }
  36.83% {
    transform: matrix3d(0.138, 0, 0, 0, 0, 0.138, 0, 0, 0, 0, 1, 0, 0, 593.502, 0, 1); }
  37.52% {
    transform: matrix3d(0.138, 0, 0, 0, 0, 0.138, 0, 0, 0, 0, 1, 0, 0, 600.124, 0, 1); }
  44.44% {
    transform: matrix3d(0.14, 0, 0, 0, 0, 0.14, 0, 0, 0, 0, 1, 0, 0, 640, 0, 1); }
  54.29% {
    transform: matrix3d(0.14, 0, 0, 0, 0, 0.14, 0, 0, 0, 0, 1, 0, 0, 628.035, 0, 1); }
  77.14% {
    transform: matrix3d(0.14, 0, 0, 0, 0, 0.14, 0, 0, 0, 0, 1, 0, 0, 637.292, 0, 1); }
  100% {
    transform: matrix3d(0.14, 0, 0, 0, 0, 0.14, 0, 0, 0, 0, 1, 0, 0, 640, 0, 1); } }

@keyframes animation {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.1% {
    transform: matrix3d(0.904, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, -23.028, 0, 1); }
  2.54% {
    transform: matrix3d(0.887, 0, 0, 0, 0, 0.887, 0, 0, 0, 0, 1, 0, 0, -26.585, 0, 1); }
  4.17% {
    transform: matrix3d(0.833, 0, 0, 0, 0, 0.833, 0, 0, 0, 0, 1, 0, 0, -37.264, 0, 1); }
  5.03% {
    transform: matrix3d(0.809, 0, 0, 0, 0, 0.809, 0, 0, 0, 0, 1, 0, 0, -41.462, 0, 1); }
  6.27% {
    transform: matrix3d(0.781, 0, 0, 0, 0, 0.781, 0, 0, 0, 0, 1, 0, 0, -46.267, 0, 1); }
  7.56% {
    transform: matrix3d(0.757, 0, 0, 0, 0, 0.757, 0, 0, 0, 0, 1, 0, 0, -49.975, 0, 1); }
  8.34% {
    transform: matrix3d(0.746, 0, 0, 0, 0, 0.746, 0, 0, 0, 0, 1, 0, 0, -51.726, 0, 1); }
  10.05% {
    transform: matrix3d(0.726, 0, 0, 0, 0, 0.726, 0, 0, 0, 0, 1, 0, 0, -54.606, 0, 1); }
  12.51% {
    transform: matrix3d(0.709, 0, 0, 0, 0, 0.709, 0, 0, 0, 0, 1, 0, 0, -57.124, 0, 1); }
  12.59% {
    transform: matrix3d(0.708, 0, 0, 0, 0, 0.708, 0, 0, 0, 0, 1, 0, 0, -57.181, 0, 1); }
  15.08% {
    transform: matrix3d(0.699, 0, 0, 0, 0, 0.699, 0, 0, 0, 0, 1, 0, 0, -58.54, 0, 1); }
  16.57% {
    transform: matrix3d(0.697, 0, 0, 0, 0, 0.697, 0, 0, 0, 0, 1, 0, 0, -59.024, 0, 1); }
  16.67% {
    transform: matrix3d(0.697, 0, 0, 0, 0, 0.697, 0, 0, 0, 0, 1, 0, 0, -59.051, 0, 1); }
  16.68% {
    transform: matrix3d(0.694, 0, 0, 0, 0, 0.694, 0, 0, 0, 0, 1, 0, 0, -57.991, 0, 1); }
  18.25% {
    transform: matrix3d(0.487, 0, 0, 0, 0, 0.487, 0, 0, 0, 0, 1, 0, 0, 37.25, 0, 1); }
  19.81% {
    transform: matrix3d(0.342, 0, 0, 0, 0, 0.342, 0, 0, 0, 0, 1, 0, 0, 123.072, 0, 1); }
  20.06% {
    transform: matrix3d(0.323, 0, 0, 0, 0, 0.323, 0, 0, 0, 0, 1, 0, 0, 136.339, 0, 1); }
  20.17% {
    transform: matrix3d(0.316, 0, 0, 0, 0, 0.316, 0, 0, 0, 0, 1, 0, 0, 141.75, 0, 1); }
  21.39% {
    transform: matrix3d(0.245, 0, 0, 0, 0, 0.245, 0, 0, 0, 0, 1, 0, 0, 201.54, 0, 1); }
  22.95% {
    transform: matrix3d(0.187, 0, 0, 0, 0, 0.187, 0, 0, 0, 0, 1, 0, 0, 270.167, 0, 1); }
  23.67% {
    transform: matrix3d(0.17, 0, 0, 0, 0, 0.17, 0, 0, 0, 0, 1, 0, 0, 299.286, 0, 1); }
  24.54% {
    transform: matrix3d(0.154, 0, 0, 0, 0, 0.154, 0, 0, 0, 0, 1, 0, 0, 331.82, 0, 1); }
  25.03% {
    transform: matrix3d(0.148, 0, 0, 0, 0, 0.148, 0, 0, 0, 0, 1, 0, 0, 349.266, 0, 1); }
  26.09% {
    transform: matrix3d(0.138, 0, 0, 0, 0, 0.138, 0, 0, 0, 0, 1, 0, 0, 384.846, 0, 1); }
  27.18% {
    transform: matrix3d(0.133, 0, 0, 0, 0, 0.133, 0, 0, 0, 0, 1, 0, 0, 417.653, 0, 1); }
  29.21% {
    transform: matrix3d(0.13, 0, 0, 0, 0, 0.13, 0, 0, 0, 0, 1, 0, 0, 470.736, 0, 1); }
  30.6% {
    transform: matrix3d(0.131, 0, 0, 0, 0, 0.131, 0, 0, 0, 0, 1, 0, 0, 501.396, 0, 1); }
  32.25% {
    transform: matrix3d(0.133, 0, 0, 0, 0, 0.133, 0, 0, 0, 0, 1, 0, 0, 532.561, 0, 1); }
  33.33% {
    transform: matrix3d(0.134, 0, 0, 0, 0, 0.134, 0, 0, 0, 0, 1, 0, 0, 550.011, 0, 1); }
  36.83% {
    transform: matrix3d(0.138, 0, 0, 0, 0, 0.138, 0, 0, 0, 0, 1, 0, 0, 593.502, 0, 1); }
  37.52% {
    transform: matrix3d(0.138, 0, 0, 0, 0, 0.138, 0, 0, 0, 0, 1, 0, 0, 600.124, 0, 1); }
  44.44% {
    transform: matrix3d(0.14, 0, 0, 0, 0, 0.14, 0, 0, 0, 0, 1, 0, 0, 640, 0, 1); }
  54.29% {
    transform: matrix3d(0.14, 0, 0, 0, 0, 0.14, 0, 0, 0, 0, 1, 0, 0, 628.035, 0, 1); }
  77.14% {
    transform: matrix3d(0.14, 0, 0, 0, 0, 0.14, 0, 0, 0, 0, 1, 0, 0, 637.292, 0, 1); }
  100% {
    transform: matrix3d(0.14, 0, 0, 0, 0, 0.14, 0, 0, 0, 0, 1, 0, 0, 640, 0, 1); } }
  #contents .get {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 0;
    width: 53.125rem;
    overflow: hidden;
    height: 100%;
    padding-top: 3%; }
    @media screen and (max-width: 1024px) {
      #contents .get {
        width: 100%;
        padding-top: 8%; } }
    @media screen and (max-width: 768px) {
      #contents .get {
        padding-top: 15%; } }
    @media screen and (max-width: 580px) {
      #contents .get {
        padding-top: 18%; } }
    #contents .get_image_item {
      height: 6.25rem; }
    #contents .get_item {
      width: 18.75rem;
      z-index: 2;
      margin-top: -2.5rem;
      transform: scale(0.01);
      opacity: 0;
      transition: transform 0.6s cubic-bezier(0.57, -0.28, 0.24, 2.29) 0.5s, opacity 0.1s linear 0.4s; }
      #contents .get_item.active {
        transform: scale(1);
        opacity: 1; }
      @media screen and (max-width: 768px) {
        #contents .get_item {
          margin-top: -4%;
          width: 40vw; } }
      @media screen and (max-width: 580px) {
        #contents .get_item {
          width: 55vw; } }
    #contents .get_header {
      color: #000;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      @media screen and (max-width: 1024px) {
        #contents .get_header > img {
          width: auto; }
        #contents .get_header .get_image_item {
          height: 6.25rem; }
        #contents .get_header .get_image_suffix {
          height: 3.9375rem; } }
      @media screen and (max-width: 1024px) {
        #contents .get_header .get_image_item {
          height: 5.625rem; }
        #contents .get_header .get_image_suffix {
          height: 3.4375rem; } }
      @media screen and (max-width: 768px) {
        #contents .get_header .get_image_item {
          height: 5rem; }
        #contents .get_header .get_image_suffix {
          height: 3.125rem;
          margin-top: -1%; } }
      @media screen and (max-width: 580px) {
        #contents .get_header .get_image_item {
          height: 3.125rem; }
        #contents .get_header .get_image_suffix {
          height: 2.5rem; } }
    #contents .get_character {
      width: 12.5rem;
      position: absolute;
      left: 0;
      z-index: 3;
      bottom: -2.5rem; }
      #contents .get_character > img {
        width: 100%; }
      @media screen and (max-width: 1024px) {
        #contents .get_character {
          width: 19.5vw;
          left: 3vw; } }
      @media screen and (max-width: 768px) {
        #contents .get_character {
          width: 23vw;
          left: 5vw; } }
      @media screen and (max-width: 580px) {
        #contents .get_character {
          max-width: 9.375rem;
          width: 30vw;
          left: 3vw; } }
      @media screen and (max-width: 420px) {
        #contents .get_character {
          width: 35vw;
          left: 3vw; } }
    #contents .get_comment {
      line-height: 1.1;
      min-width: 25rem;
      font-size: 1.75rem;
      font-weight: bold;
      position: absolute;
      color: #ff0224;
      right: -25rem;
      bottom: 6.25rem;
      z-index: 3;
      background-color: #fff;
      padding: 0.9375rem 1.125rem;
      border: 0.1875rem solid #000;
      box-shadow: 0 0 0 0.1875rem #fff;
      border-radius: 1.125rem; }
      #contents .get_comment.large {
        font-size: 1.5rem; }
      #contents .get_comment:after {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        content: "";
        display: block;
        width: 2.0625rem;
        height: 2.0625rem;
        position: absolute;
        left: -1.5625rem;
        bottom: 0.625rem;
        background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_left_middle_high.png") no-repeat;
        background-position: center;
        background-size: contain; }
      @media screen and (max-width: 1024px) {
        #contents .get_comment {
          font-size: 3.3vw;
          bottom: 20%; }
          #contents .get_comment.large {
            font-size: 2.7vw; } }
      @media screen and (max-width: 768px) {
        #contents .get_comment {
          bottom: 30%;
          min-width: 50vw;
          width: 55vw;
          right: auto;
          left: 25vw;
          font-size: 4vw; }
          #contents .get_comment.large {
            font-size: 3.3vw; }
          #contents .get_comment:after {
            width: 6vw;
            height: 5vw;
            left: -4.4vw; } }
      @media screen and (max-width: 580px) {
        #contents .get_comment {
          width: 55vw;
          padding: 3vw 2vw;
          left: 30vw;
          font-size: 4vw;
          bottom: 35%; }
          #contents .get_comment.large {
            font-size: 3.5vw; }
          #contents .get_comment:after {
            width: 7vw;
            height: 6vw;
            left: -5.4vw; } }
      @media screen and (max-width: 420px) {
        #contents .get_comment {
          width: 60vw;
          padding: 3vw;
          left: 33vw;
          font-size: 6vw;
          bottom: 35%; }
          #contents .get_comment.large {
            font-size: 5vw; }
          #contents .get_comment:after {
            width: 7.5vw;
            height: 7vw;
            left: -5.7vw; } }
    #contents .get_image_suffix {
      margin-top: -0.625rem;
      width: 16.25rem; }
    #contents .get_bg {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 38.75rem;
      height: 38.75rem;
      background: url("/network/bousai/images/itemget/quiz_itemget_bg_circle.png") no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 1; }
      @media screen and (max-width: 768px) {
        #contents .get_bg {
          width: 80vw;
          height: 80vw; } }
      @media screen and (max-width: 580px) {
        #contents .get_bg {
          top: 5vw;
          width: 90vw;
          height: 90vw; } }
  #contents .withVoice {
    z-index: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 71.25rem;
    position: relative;
    height: 100%;
    padding: 0 2.5rem 3.125rem; }
    @media screen and (max-width: 1024px) {
      #contents .withVoice {
        width: 100%; } }
    @media screen and (max-width: 768px) {
      #contents .withVoice {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0; } }
    @media screen and (max-width: 580px) {
      #contents .withVoice {
        justify-content: flex-start;
        padding-bottom: 0; } }
    #contents .withVoice_withItems_bg {
      border: 0.1875rem solid #000;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 25rem;
      border-radius: 50%;
      height: 25rem;
      background-color: #fff; }
      @media screen and (max-width: 580px) {
        #contents .withVoice_withItems_bg {
          width: 85vw;
          height: 85vw; } }
    #contents .withVoice_notice {
      font-size: 1.5rem;
      position: absolute;
      top: 0.625rem;
      height: 3.125rem;
      width: 80%;
      left: 50%;
      display: flex;
      justify-content: center;
      transform: translateX(-50%);
      z-index: 3; }
      #contents .withVoice_notice > img {
        height: 100%;
        width: auto; }
      @media screen and (max-width: 1024px) {
        #contents .withVoice_notice {
          height: 5.5vw;
          max-height: 3.125rem; } }
      @media screen and (max-width: 768px) {
        #contents .withVoice_notice {
          max-height: none;
          top: 8%;
          height: 7vw;
          width: 80vw; } }
      @media screen and (max-width: 580px) {
        #contents .withVoice_notice {
          top: 8%;
          height: 8vw;
          width: 90vw; } }
      @media screen and (max-width: 420px) {
        #contents .withVoice_notice {
          height: 10vw;
          width: 95vw;
          top: 14%; } }
    #contents .withVoice_confirmAvatar {
      position: relative;
      background-color: #fff;
      width: 23.75rem;
      height: 23.75rem;
      border-radius: 50%;
      border: 0.1875rem solid #000;
      padding: 1.25rem;
      margin-top: 0.625rem;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: scale(0.7);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.36, 0.35, 0.1, 2.24) 0.1s; }
      @media screen and (max-width: 1024px) {
        #contents .withVoice_confirmAvatar {
          margin-top: 6%;
          width: 38vw;
          height: 38vw;
          min-width: 20.625rem;
          min-height: 20.625rem; } }
      @media screen and (max-width: 768px) {
        #contents .withVoice_confirmAvatar {
          margin-top: 0; } }
      @media screen and (max-width: 580px) {
        #contents .withVoice_confirmAvatar {
          width: 90vw;
          height: 90vw;
          min-width: auto;
          min-height: auto;
          max-width: 23.75rem;
          max-height: 23.75rem; } }
      #contents .withVoice_confirmAvatar.active {
        transform: scale(1);
        opacity: 1; }
      #contents .withVoice_confirmAvatar > img {
        margin-top: -20%;
        width: 70%;
        position: absolute;
        left: 15%;
        top: 10%; }
        @media screen and (max-width: 580px) {
          #contents .withVoice_confirmAvatar > img {
            width: 60%;
            left: 20%;
            top: 20%; } }
        @media screen and (max-width: 420px) {
          #contents .withVoice_confirmAvatar > img {
            width: 70%;
            left: 15%;
            top: 13%; } }
    @media screen and (max-width: 1024px) {
      #contents .withVoice #confirmedAvatar {
        margin-top: 0%; } }
    #contents .withVoice_monitor {
      margin-top: 3.125rem;
      overflow: hidden;
      z-index: 0;
      width: 25rem;
      height: 14.55rem;
      background: url("/network/bousai/images/bg/quiz_bg_monitor_question_pc_high.png") no-repeat;
      background-position: center;
      background-size: 100% 100%;
      position: relative;
      padding: 0.5rem; }
      #contents .withVoice_monitor.monitor_large {
        width: 46.875rem;
        height: 27.28125rem;
        padding: 0.625rem; }
        @media screen and (max-width: 1024px) {
          #contents .withVoice_monitor.monitor_large {
            width: 73.2vw;
            padding: 1.1%; } }
        @media screen and (max-width: 768px) {
          #contents .withVoice_monitor.monitor_large {
            width: 86vw;
            margin-top: 0;
            padding: 1.1% 1%; } }
        @media screen and (max-width: 580px) {
          #contents .withVoice_monitor.monitor_large {
            padding: 1.9% 1.6%;
            height: 68%;
            width: 106%;
            margin-top: -2%; } }
        #contents .withVoice_monitor.monitor_large.monitor_selectAvatar, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar {
          height: 25rem; }
          #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_monitor_inner, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_monitor_inner {
            padding-top: 5%; }
          @media screen and (max-width: 768px) {
            #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_notice, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_notice {
              top: 12%;
              height: 7vw;
              width: 80vw; } }
          @media screen and (max-width: 580px) {
            #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_notice, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_notice {
              top: 16%;
              height: 8vw;
              width: 90vw; } }
          @media screen and (max-width: 420px) {
            #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_notice, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_notice {
              height: 10vw;
              width: 95vw;
              top: 14%; } }
          @media screen and (max-width: 1024px) {
            #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_monitor_inner.inner_confirmed, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_monitor_inner.inner_confirmed {
              padding-top: 0%; } }
          @media screen and (max-width: 768px) {
            #contents .withVoice_monitor.monitor_large.monitor_selectAvatar, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar {
              height: 65%;
              top: 0;
              transform: translateX(-50%) translateY(0); }
              #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_monitor_inner, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_monitor_inner {
                padding-top: 20%;
                padding-bottom: 5%; }
                #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_monitor_inner.inner_confirmed, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_monitor_inner.inner_confirmed {
                  padding-top: 0%; } }
          @media screen and (max-width: 580px) {
            #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_monitor_inner, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_monitor_inner {
              padding-top: 20%;
              padding-bottom: 5%; }
              #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_monitor_inner.inner_confirmed, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_monitor_inner.inner_confirmed {
                padding-top: 5%; } }
          @media screen and (max-width: 420px) {
            #contents .withVoice_monitor.monitor_large.monitor_selectAvatar, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar {
              height: 70%; }
              #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_monitor_inner, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_monitor_inner {
                padding-top: 25%;
                padding-bottom: 5%; }
                #contents .withVoice_monitor.monitor_large.monitor_selectAvatar .withVoice_monitor_inner.inner_confirmed, #contents .withVoice_monitor.monitor_large.monitor_confirmAvatar .withVoice_monitor_inner.inner_confirmed {
                  padding-top: 5%; } }
        #contents .withVoice_monitor.monitor_large.withItems, #contents .withVoice_monitor.monitor_large.withItemsAll {
          width: 31.25rem;
          padding: 0.625rem 0.5rem; }
          #contents .withVoice_monitor.monitor_large.withItems .withVoice_monitor_inner, #contents .withVoice_monitor.monitor_large.withItemsAll .withVoice_monitor_inner {
            background: url("/network/bousai/images/bg/quiz_bg_radiant.png") no-repeat;
            background-position: center;
            background-size: cover;
            display: flex;
            position: relative; }
          @media screen and (max-width: 580px) {
            #contents .withVoice_monitor.monitor_large.withItems, #contents .withVoice_monitor.monitor_large.withItemsAll {
              padding: 1.9% 1.6%;
              height: 68%;
              width: 106%;
              margin-top: -2%; } }
      #contents .withVoice_monitor.monitor_result .withVoice_monitor_inner {
        background: url("/network/bousai/images/bg/quiz_bg_radiant.png") no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        align-items: flex-end;
        position: relative; }
        @media screen and (max-width: 768px) {
          #contents .withVoice_monitor.monitor_result .withVoice_monitor_inner {
            padding-top: 5%; } }
      #contents .withVoice_monitor.monitor_selectAvatar .withVoice_monitor_inner, #contents .withVoice_monitor.monitor_confirmAvatar .withVoice_monitor_inner {
        background: url("/network/bousai/images/bg/quiz_bg_radiant.png") no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        position: relative;
        box-shadow: inset 0 0 0.3125rem 0.125rem rgba(0, 0, 0, 0.3); }
      @media screen and (max-width: 768px) {
        #contents .withVoice_monitor {
          width: 60vw;
          height: 35vw;
          margin-top: 0;
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%); } }
      @media screen and (max-width: 580px) {
        #contents .withVoice_monitor {
          margin-top: 0;
          height: 50%;
          width: 80vw;
          top: 35%; } }
      @media screen and (max-width: 420px) {
        #contents .withVoice_monitor {
          width: 90vw; } }
      #contents .withVoice_monitor_inner {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%; }
        #contents .withVoice_monitor_inner.blank {
          background-color: #666;
          opacity: 0.8; }
          #contents .withVoice_monitor_inner.blank > img {
            margin-top: -6%;
            width: 82%; }
            @media screen and (max-width: 768px) {
              #contents .withVoice_monitor_inner.blank > img {
                width: 95%; } }
            @media screen and (max-width: 580px) {
              #contents .withVoice_monitor_inner.blank > img {
                width: 90%; } }
      #contents .withVoice_monitor .question_master {
        left: 50%;
        transform: translateX(-50%);
        top: 0; }
        @media screen and (max-width: 580px) {
          #contents .withVoice_monitor .question_master {
            width: 30vw;
            top: 5%; } }
        @media screen and (max-width: 420px) {
          #contents .withVoice_monitor .question_master {
            width: 40vw; } }
    #contents .withVoice_selectAvatar {
      width: 95%;
      display: flex; }
      @media screen and (max-width: 768px) {
        #contents .withVoice_selectAvatar {
          height: 100%; } }
      @media screen and (max-width: 580px) {
        #contents .withVoice_selectAvatar {
          width: 90%; } }
      @media screen and (max-width: 420px) {
        #contents .withVoice_selectAvatar {
          align-items: center;
          justify-content: center;
          flex-wrap: wrap; } }
    #contents .withVoice_selectAvatarBtn {
      overflow: visible;
      position: relative;
      background-color: #fff;
      border-radius: 1.25rem;
      width: 10.625rem;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      height: 11.25rem;
      display: block;
      border: 0.1875rem solid #000;
      transition: all 0.3s;
      z-index: 0; }
      @media screen and (max-width: 1024px) {
        #contents .withVoice_selectAvatarBtn {
          height: 20vw;
          width: 25%;
          margin-left: 0.8vw;
          margin-right: 0.8vw; } }
      @media screen and (max-width: 768px) {
        #contents .withVoice_selectAvatarBtn {
          border-width: 0.125rem;
          height: 30%; } }
      @media screen and (max-width: 768px) {
        #contents .withVoice_selectAvatarBtn {
          height: 25vw; } }
      @media screen and (max-width: 580px) {
        #contents .withVoice_selectAvatarBtn {
          width: 30vw;
          height: 24vw; } }
      #contents .withVoice_selectAvatarBtn:focus {
        box-shadow: 0 0 0.25rem 0.4375rem rgba(255, 255, 255, 0.8), inset 0 0 0.25rem 0.4375rem rgba(245, 142, 24, 0.4); }
      #contents .withVoice_selectAvatarBtn:hover {
        box-shadow: inset 0 0 0.25rem 0.4375rem rgba(255, 221, 51, 0.4);
        cursor: pointer;
        transform: translateY(-0.5rem);
        border-color: #ff0224; }
        #contents .withVoice_selectAvatarBtn:hover .withVoice_num {
          border-color: #ff0224; }
        #contents .withVoice_selectAvatarBtn:hover .withVoice_num_1 {
          text-shadow: 1px 1px 0 #d9bc02, -1px 1px 0 #d9bc02, 1px -1px 0 #d9bc02, -1px -1px 0 #d9bc02;
          color: #fff; }
        #contents .withVoice_selectAvatarBtn:hover .withVoice_num_2 {
          text-shadow: 1px 1px 0 #f58e18, -1px 1px 0 #f58e18, 1px -1px 0 #f58e18, -1px -1px 0 #f58e18;
          color: #fff; }
        #contents .withVoice_selectAvatarBtn:hover .withVoice_num_3 {
          text-shadow: 1px 1px 0 #00bceb, -1px 1px 0 #00bceb, 1px -1px 0 #00bceb, -1px -1px 0 #00bceb;
          color: #fff; }
        #contents .withVoice_selectAvatarBtn:hover .withVoice_num_4 {
          text-shadow: 1px 1px 0 #ff0224, -1px 1px 0 #ff0224, 1px -1px 0 #ff0224, -1px -1px 0 #ff0224;
          color: #fff; }
      #contents .withVoice_selectAvatarBtn .withVoice_num {
        color: #000;
        font-size: 1.875rem;
        position: absolute;
        top: -1.25rem;
        left: -0.9375rem;
        background-color: #fff;
        width: 3.125rem;
        height: 3.125rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0.1875rem solid #000;
        border-radius: 50%;
        z-index: 2; }
        @media screen and (max-width: 768px) {
          #contents .withVoice_selectAvatarBtn .withVoice_num {
            border-width: 0.125rem;
            width: 6vw;
            height: 6vw;
            font-size: 4vw; } }
        @media screen and (max-width: 580px) {
          #contents .withVoice_selectAvatarBtn .withVoice_num {
            border-width: 0.125rem;
            width: 8vw;
            height: 8vw;
            font-size: 5vw;
            top: -2vw;
            left: -2vw; } }
        @media screen and (max-width: 420px) {
          #contents .withVoice_selectAvatarBtn .withVoice_num {
            width: 10vw;
            height: 10vw;
            font-size: 6vw; } }
        #contents .withVoice_selectAvatarBtn .withVoice_num_1 {
          background-color: #ffdd33; }
        #contents .withVoice_selectAvatarBtn .withVoice_num_2 {
          background-color: #f58e18; }
        #contents .withVoice_selectAvatarBtn .withVoice_num_3 {
          background-color: #00bceb; }
        #contents .withVoice_selectAvatarBtn .withVoice_num_4 {
          background-color: #ff0224; }
      #contents .withVoice_selectAvatarBtn .select_image {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 50%; }
        #contents .withVoice_selectAvatarBtn .select_image > img {
          width: auto;
          margin-top: -6%;
          height: 100%; }
          @media screen and (max-width: 580px) {
            #contents .withVoice_selectAvatarBtn .select_image > img {
              width: 80%;
              height: auto;
              margin-top: -8%;
              border-radius: 50%; } }
      #contents .withVoice_selectAvatarBtn:nth-of-type(odd) {
        margin-top: 1.25rem; }
      #contents .withVoice_selectAvatarBtn:nth-of-type(even) {
        margin-top: 5rem; }
      @media screen and (max-width: 420px) {
        #contents .withVoice_selectAvatarBtn {
          border-radius: 50%;
          width: 32vw;
          height: 32vw; }
          #contents .withVoice_selectAvatarBtn:nth-of-type(odd) {
            margin-top: 0; }
          #contents .withVoice_selectAvatarBtn:nth-of-type(even) {
            margin-top: 0; }
          #contents .withVoice_selectAvatarBtn:nth-of-type(1) {
            margin-left: -20vw; }
          #contents .withVoice_selectAvatarBtn:nth-of-type(3) {
            margin-left: 20vw; } }
    #contents .withVoice_bubble {
      border: 3px solid #000;
      width: 35.625rem;
      min-height: 6.25rem;
      padding: 1rem;
      border-radius: 1rem;
      background-color: #fff;
      font-size: 1.5rem;
      line-height: 1.1;
      position: absolute;
      bottom: 3.125rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 0; }
    #contents .withVoice .character {
      position: absolute;
      bottom: 0rem; }
      #contents .withVoice .character_bubble {
        position: absolute;
        line-height: 1.2;
        bottom: 15%;
        font-weight: bold;
        font-size: 1.5rem;
        width: 34.375rem;
        min-height: 5rem;
        border: 0.1875rem solid #000;
        box-shadow: 0 0 0 3px #fff;
        padding: 1.125rem 0.9375rem;
        background-color: #fff;
        border-radius: 1.875rem; }
        #contents .withVoice .character_bubble:after {
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          content: "";
          display: block;
          width: 1.6875rem;
          height: 2.0625rem;
          position: absolute;
          left: -1.39375rem;
          bottom: 1.25rem;
          background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_left_middle_high.png") no-repeat;
          background-position: center;
          background-size: contain; }
        @media screen and (max-width: 1024px) {
          #contents .withVoice .character_bubble {
            font-size: 2.4vw;
            padding: 1.6% 2%; } }
        @media screen and (max-width: 768px) {
          #contents .withVoice .character_bubble {
            font-size: 3vw; } }
        @media screen and (max-width: 580px) {
          #contents .withVoice .character_bubble {
            font-size: 3.5vw;
            padding: 2% 3%;
            min-height: 10vw;
            border-radius: 1rem;
            box-shadow: 0 0 0 0.125rem #fff;
            letter-spacing: -0.01em; }
            #contents .withVoice .character_bubble:after {
              width: 8vw;
              height: 6vw;
              left: -5vw;
              bottom: 10%; } }
        @media screen and (max-width: 420px) {
          #contents .withVoice .character_bubble {
            font-size: 4.6vw;
            padding: 2.5% 2.5%;
            border-width: 0.125rem; } }
        #contents .withVoice .character_bubble.left {
          left: 20%;
          width: 50%; }
          @media screen and (max-width: 580px) {
            #contents .withVoice .character_bubble.left {
              width: 90vw;
              bottom: 43%;
              left: 5%; }
              #contents .withVoice .character_bubble.left:after {
                width: 8vw;
                height: 5vw;
                left: 20%;
                bottom: -4vw;
                background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_down_high.png") no-repeat;
                background-position: center;
                background-size: contain; } }
          #contents .withVoice .character_bubble.left.small {
            left: 4%;
            bottom: auto;
            top: 15%;
            width: 20.625rem; }
            #contents .withVoice .character_bubble.left.small:after {
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              content: "";
              display: block;
              width: 2.0625rem;
              height: 1.875rem;
              position: absolute;
              right: auto;
              left: auto;
              top: auto;
              left: 10%;
              bottom: -1.5rem;
              background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_down_high.png") no-repeat;
              background-position: center;
              background-size: contain; }
            @media screen and (max-width: 1024px) {
              #contents .withVoice .character_bubble.left.small {
                width: 30vw;
                top: auto;
                bottom: 75%;
                left: 2%;
                transform: translateY(50%); } }
            @media screen and (max-width: 768px) {
              #contents .withVoice .character_bubble.left.small {
                bottom: 22%;
                left: 25vw;
                width: 45vw; }
                #contents .withVoice .character_bubble.left.small:after {
                  -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
                  content: "";
                  display: block;
                  width: 1.875rem;
                  height: 2.0625rem;
                  position: absolute;
                  left: -1.45625rem;
                  bottom: 1.25rem;
                  background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_left_middle_high.png") no-repeat;
                  background-position: center;
                  background-size: contain; } }
            @media screen and (max-width: 580px) {
              #contents .withVoice .character_bubble.left.small {
                bottom: 22%;
                left: 25vw;
                width: 40vw;
                font-size: 4vw;
                padding: 2% 3%;
                border-width: 0.1875rem;
                box-shadow: 0 0 0 0.125rem #fff; } }
            @media screen and (max-width: 420px) {
              #contents .withVoice .character_bubble.left.small {
                width: 60vw;
                left: 30vw;
                font-size: 4.6vw;
                padding: 2.5% 2.5%;
                bottom: 30%;
                border-width: 0.125rem; }
                #contents .withVoice .character_bubble.left.small:after {
                  width: 8vw;
                  height: 5vw;
                  left: -5.2vw; } }
        #contents .withVoice .character_bubble.bottom {
          left: 50%;
          bottom: auto;
          top: 60%;
          transform: translateX(-50%); }
          #contents .withVoice .character_bubble.bottom:after {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            content: "";
            display: block;
            width: 2.0625rem;
            height: 1.875rem;
            position: absolute;
            right: auto;
            left: auto;
            top: -1.4375rem;
            left: 60%;
            background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_up_high.png") no-repeat;
            background-position: center;
            background-size: contain; }
          @media screen and (max-width: 1024px) {
            #contents .withVoice .character_bubble.bottom {
              width: 50%; } }
          @media screen and (max-width: 768px) {
            #contents .withVoice .character_bubble.bottom {
              top: 55%; } }
          @media screen and (max-width: 580px) {
            #contents .withVoice .character_bubble.bottom {
              width: 55vw; }
              #contents .withVoice .character_bubble.bottom:after {
                width: 8vw;
                height: 6vw;
                top: -4.6vw; } }
          @media screen and (max-width: 420px) {
            #contents .withVoice .character_bubble.bottom {
              width: 65vw; } }
        #contents .withVoice .character_bubble.right {
          right: 25%;
          left: auto;
          bottom: 20%; }
          #contents .withVoice .character_bubble.right:after {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            content: "";
            display: block;
            width: 1.875rem;
            height: 2.0625rem;
            position: absolute;
            right: -1.45625rem;
            left: auto;
            bottom: 1.25rem;
            background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_right_high.png") no-repeat;
            background-position: center;
            background-size: contain; }
          @media screen and (max-width: 1024px) {
            #contents .withVoice .character_bubble.right {
              width: 55vw; } }
          @media screen and (max-width: 580px) {
            #contents .withVoice .character_bubble.right {
              width: 90vw;
              bottom: 33%;
              right: 5%; }
              #contents .withVoice .character_bubble.right:after {
                width: 8vw;
                height: 5vw;
                right: 20%;
                bottom: -4vw;
                background: url("/network/bousai/images/bg/quiz_bg_bubble_arrow_black_down_right_high.png") no-repeat;
                background-position: center;
                background-size: contain; } }
      #contents .withVoice .character.character1 {
        right: -1rem;
        bottom: 0;
        width: 17.5rem;
        height: 17.5625rem; }
        @media screen and (max-width: 1024px) {
          #contents .withVoice .character.character1 {
            width: 27vw;
            height: 27.1vw; } }
        @media screen and (max-width: 768px) {
          #contents .withVoice .character.character1 {
            width: 32vw;
            height: 32.1vw; } }
        @media screen and (max-width: 580px) {
          #contents .withVoice .character.character1 {
            width: 35vw;
            height: 35.1vw; } }
        @media screen and (max-width: 420px) {
          #contents .withVoice .character.character1 {
            max-width: 11.875rem;
            max-height: 11.875rem;
            width: 50vw;
            height: 50vw; } }
      #contents .withVoice .character.character2 {
        left: 0;
        width: 12.29839rem;
        height: 25rem;
        bottom: -3.75rem; }
        @media screen and (max-width: 1024px) {
          #contents .withVoice .character.character2 {
            width: 19.1vw;
            height: 38.8vw;
            margin-left: 0;
            bottom: -10%; } }
        @media screen and (max-width: 768px) {
          #contents .withVoice .character.character2 {
            width: 23vw;
            height: 46.7vw; } }
        @media screen and (max-width: 580px) {
          #contents .withVoice .character.character2 {
            width: 27vw;
            height: 56vw;
            bottom: -13vw;
            left: -2vw;
            max-width: 8.625rem;
            max-height: 17.9375rem; } }
        @media screen and (max-width: 420px) {
          #contents .withVoice .character.character2 {
            max-width: 8.4375rem;
            max-height: 16.875rem;
            width: 35vw;
            height: 70vw;
            margin-left: 0;
            bottom: -6%; } }
  #contents .page_noJs .character_bubble.left.small {
    width: 15rem;
    font-size: 1.25rem; }
    @media screen and (max-width: 1024px) {
      #contents .page_noJs .character_bubble.left.small {
        bottom: 73%;
        left: 2%; } }
    @media screen and (max-width: 768px) {
      #contents .page_noJs .character_bubble.left.small {
        bottom: 20%;
        left: 25%; } }
  #contents .start_button {
    font-size: 0.00625rem;
    color: transparent;
    padding: 1rem 1.25rem;
    border-radius: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    position: absolute;
    width: 16.875rem;
    height: 5rem;
    top: 50%;
    left: 50%;
    line-height: 1;
    transform: translateX(-50%) translateY(-50%);
    background: url("/network/bousai/images/button/quiz_startQuiz_button2.png") no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3; }
    #contents .start_button.button_end {
      background: url("/network/bousai/images/button/quiz_backToStart_button.png") no-repeat;
      background-position: center;
      background-size: contain; }
    #contents .start_button:hover {
      cursor: pointer;
      text-decoration: none; }
    #contents .start_button.visited {
      text-decoration: none; }
    @media screen and (max-width: 768px) {
      #contents .start_button {
        top: 60%; } }
    @media screen and (max-width: 580px) {
      #contents .start_button {
        width: 50vw;
        font-size: 1.5rem;
        height: 4.0625rem; } }
    @media screen and (max-width: 420px) {
      #contents .start_button {
        width: 60vw; } }
  #contents a.button_end {
    font-size: 0.00625rem;
    color: transparent; }
    #contents a.button_end:hover {
      font-size: 0.00625rem;
      color: transparent; }
  #contents .result {
    width: 80%;
    height: 90%;
    background-color: #fff;
    position: relative;
    border: 0.1875rem solid #000;
    border-bottom: none;
    padding: 1.25rem;
    overflow: hidden;
    padding-top: 2.1875rem; }
    @media screen and (max-width: 1024px) {
      #contents .result {
        width: 90%; } }
    @media screen and (max-width: 768px) {
      #contents .result {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3%;
        padding-top: 3.5%; } }
    @media screen and (max-width: 580px) {
      #contents .result {
        width: 95%;
        padding-top: 3%; } }
    @media screen and (max-width: 420px) {
      #contents .result {
        padding-top: 10%;
        padding-bottom: 10%; } }
    #contents .result_ornament {
      position: absolute;
      top: 2.5%;
      left: 0;
      width: 120%;
      margin-left: -10%;
      height: 5.3125rem;
      background: url("/network/bousai/images/result/quiz_result_ornament_high.png") no-repeat;
      background-position: center;
      background-size: contain;
      z-index: 4; }
      @media screen and (max-width: 1024px) {
        #contents .result_ornament {
          width: 160%;
          margin-left: -30%; } }
      @media screen and (max-width: 768px) {
        #contents .result_ornament {
          top: 8%; } }
      @media screen and (max-width: 580px) {
        #contents .result_ornament {
          width: 180%;
          margin-left: -40%; } }
    #contents .result_header {
      text-indent: -5000px;
      position: absolute;
      width: 100%;
      height: 2.875rem;
      top: 3%;
      left: 50%;
      transform: translateX(-50%);
      background-image: url("/network/bousai/images/result/quiz_result_header_high.png");
      background-repeat: no-repeat;
      background-size: 18.75rem 2.875rem;
      background-position: center center;
      z-index: 3; }
      @media screen and (max-width: 768px) {
        #contents .result_header {
          top: 10%;
          height: 6.5vw;
          background-size: contain; } }
      @media screen and (max-width: 580px) {
        #contents .result_header {
          top: 11%;
          height: 8vw;
          background-size: contain; } }
      @media screen and (max-width: 420px) {
        #contents .result_header {
          height: 10vw; } }
    #contents .result_list {
      background-color: rgba(255, 221, 51, 0.1);
      font-size: 1.25rem;
      border: 0.125rem solid #ffdd33;
      width: 100%;
      opacity: 0; }
      #contents .result_list.active {
        opacity: 1; }
      @media screen and (max-width: 768px) {
        #contents .result_list {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column; } }
      @media screen and (max-width: 580px) {
        #contents .result_list {
          height: 90%; } }
    #contents .result_item {
      display: flex;
      background-color: #ffeb9a;
      height: 2.625rem; }
      @media screen and (max-width: 768px) {
        #contents .result_item {
          height: 16.66%;
          width: 100%; } }
      #contents .result_item:nth-of-type(even) {
        background-color: #f9d235 !important; }
        #contents .result_item:nth-of-type(even) .result_item_result {
          background-color: #ffeb9a !important; }
      #contents .result_item_pre {
        text-indent: -5000px;
        width: 3.125rem;
        opacity: 0;
        background: url("/network/bousai/images/result/quiz_result_question_pre_high.png") no-repeat;
        background-position: center;
        background-size: contain; }
        #contents .result_item_pre.active {
          opacity: 1; }
        @media screen and (max-width: 768px) {
          #contents .result_item_pre {
            display: none; } }
      #contents .result_item_summary {
        opacity: 0;
        text-indent: -5000px;
        width: 17.5rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left center !important; }
        #contents .result_item_summary.active {
          opacity: 1; }
        #contents .result_item_summary.index1 {
          background: url("/network/bousai/images/result/quiz_result_question_1_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_summary.index2 {
          background: url("/network/bousai/images/result/quiz_result_question_2_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_summary.index3 {
          background: url("/network/bousai/images/result/quiz_result_question_3_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_summary.index4 {
          background: url("/network/bousai/images/result/quiz_result_question_4_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_summary.index5 {
          background: url("/network/bousai/images/result/quiz_result_question_5_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_summary.index6 {
          background: url("/network/bousai/images/result/quiz_result_question_6_high.png") no-repeat;
          background-size: contain; }
        @media screen and (max-width: 768px) {
          #contents .result_item_summary {
            background-size: auto 74% !important;
            width: 19.375rem; } }
        @media screen and (max-width: 580px) {
          #contents .result_item_summary {
            width: 17.5rem;
            background-size: auto 80% !important; } }
        @media screen and (max-width: 420px) {
          #contents .result_item_summary {
            background-size: auto 72% !important; } }
      #contents .result_item_index {
        opacity: 0;
        text-indent: -5000px;
        width: 1.875rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center !important; }
        #contents .result_item_index.active {
          opacity: 1; }
        #contents .result_item_index.index1 {
          background: url("/network/bousai/images/result/quiz_result_index_1_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_index.index2 {
          background: url("/network/bousai/images/result/quiz_result_index_2_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_index.index3 {
          background: url("/network/bousai/images/result/quiz_result_index_3_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_index.index4 {
          background: url("/network/bousai/images/result/quiz_result_index_4_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_index.index5 {
          background: url("/network/bousai/images/result/quiz_result_index_5_high.png") no-repeat;
          background-size: contain; }
        #contents .result_item_index.index6 {
          background: url("/network/bousai/images/result/quiz_result_index_6_high.png") no-repeat;
          background-size: contain; }
        @media screen and (max-width: 768px) {
          #contents .result_item_index {
            width: 5vw; } }
        @media screen and (max-width: 580px) {
          #contents .result_item_index {
            width: 6.5vw;
            background-size: contain; } }
        @media screen and (max-width: 420px) {
          #contents .result_item_index {
            width: 7.5vw;
            background-size: contain; } }
      #contents .result_item_question {
        width: 70%;
        padding: 0.5rem 0.75rem;
        background-color: rgba(255, 221, 51, 0.2);
        display: flex; }
        @media screen and (max-width: 768px) {
          #contents .result_item_question {
            padding: 1%;
            background-size: 100%;
            width: 75%; } }
        @media screen and (max-width: 580px) {
          #contents .result_item_question {
            padding: 1% 1.5%;
            background-size: 100% 100%;
            width: 75%; } }
        #contents .result_item_question > img {
          width: auto;
          height: 100%; }
      #contents .result_item_result {
        text-indent: -5000px;
        opacity: 0;
        padding: 0.5rem 1.125rem;
        width: 30%;
        background-color: #fff5cc !important; }
        #contents .result_item_result.active {
          opacity: 1; }
        #contents .result_item_result.correct {
          background: url("/network/bousai/images/result/quiz_result_correct_high.png") no-repeat;
          background-position: center;
          background-size: 80%; }
        #contents .result_item_result.wrong {
          background: url("/network/bousai/images/result/quiz_result_wrong_high.png") no-repeat;
          background-position: center;
          background-size: 80%; }
        @media screen and (max-width: 768px) {
          #contents .result_item_result {
            width: 25%; } }
        @media screen and (max-width: 768px) {
          #contents .result_item_result.correct {
            background-size: 90%; }
          #contents .result_item_result.wrong {
            background-size: 90%; } }
    #contents .result_shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      box-shadow: inset 0 0 0.25rem 0.0625rem rgba(0, 0, 0, 0.4);
      z-index: 2; }
      @media screen and (max-width: 580px) {
        #contents .result_shadow {
          box-shadow: inset 0 0 0.375rem 0.0625rem rgba(0, 0, 0, 0.3); } }
    #contents .result_summary {
      color: #ff0224;
      margin-bottom: 0.9375rem;
      text-align: center;
      opacity: 0; }
      #contents .result_summary.active {
        opacity: 1; }
      @media screen and (max-width: 768px) {
        #contents .result_summary {
          margin-bottom: 2%;
          margin-top: 2%; } }
      @media screen and (max-width: 580px) {
        #contents .result_summary {
          margin-bottom: 2%;
          margin-top: 0; } }
      #contents .result_summary > img {
        height: 2.8125rem; }
        @media screen and (max-width: 768px) {
          #contents .result_summary > img {
            height: 5.3vw;
            max-height: 2.0625rem;
            width: auto; } }
        @media screen and (max-width: 580px) {
          #contents .result_summary > img {
            max-height: none;
            height: 6.3vw;
            margin-top: 4%; } }
  #contents .wait_container {
    width: 31.25rem;
    height: 25rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -3.125rem; }
    @media screen and (max-width: 768px) {
      #contents .wait_container {
        width: 60vw;
        height: 47vw; } }
    @media screen and (max-width: 580px) {
      #contents .wait_container {
        width: 70vw;
        height: 62vw; } }
  #contents .wait_helmet {
    width: 100%;
    height: auto; }
  #contents .movie {
    background-color: #fffed3;
    padding-bottom: 7.5rem;
    padding-top: 3.75rem; }
    @media screen and (max-width: 580px) {
      #contents .movie {
        padding-bottom: 5rem;
        padding-top: 1.875rem; } }
    #contents .movie_container {
      margin-left: auto;
      margin-right: auto;
      max-width: 60rem;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 0.5rem; }
      @media screen and (max-width: 768px) {
        #contents .movie_container {
          padding: 0 5%; } }
    #contents .movie_embed {
      margin-top: 3.75rem;
      text-align: center;
      position: relative; }
      #contents .movie_embed > iframe {
        border: 0px !important; }
      @media screen and (max-width: 768px) {
        #contents .movie_embed {
          margin-top: 2rem; } }
      @media screen and (max-width: 580px) {
        #contents .movie_embed {
          margin-top: 1.5rem;
          width: 100%;
          padding-top: 56.25%; }
          #contents .movie_embed > iframe {
            border: 0px !important;
            position: absolute;
            top: 0;
            right: 0;
            width: 100% !important;
            height: 100% !important; } }
    #contents .movie img {
      max-width: 100%; }
    #contents .movie_header {
      height: 4.375rem;
      max-width: 46.25rem;
      width: 90%; }
      #contents .movie_header.header_kaeru {
        background: url("/network/bousai/images/bousai/bousai_movie_header_frog.png") no-repeat;
        background-position: center;
        background-size: contain; }
      #contents .movie_header.header_toilet {
        background: url("/network/bousai/images/bousai/bousai_movie_header_toilet.png") no-repeat;
        background-position: center;
        background-size: contain; }
      @media screen and (max-width: 420px) {
        #contents .movie_header {
          width: 100%; } }
    #contents .movie_button_back {
      margin-top: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1.5rem;
      font-size: 1.25rem;
      color: #fff !important;
      font-weight: bold;
      line-height: 1;
      background-color: #517dbe;
      padding: 0.5rem 1.25rem 0.5rem 2.375rem;
      min-width: 8.75rem;
      background-image: url("/network/bousai/images/bousai/bousai_icon_back.png");
      background-repeat: no-repeat;
      background-position: left 1.5rem center;
      background-size: 0.875rem;
      transition: background-color 0.3s; }
      #contents .movie_button_back:hover {
        text-decoration: none;
        background-color: #ec9c4e; }
      @media screen and (max-width: 580px) {
        #contents .movie_button_back {
          margin-top: 2rem;
          font-size: 1rem;
          background-size: 0.75rem;
          padding: 0.5rem 1.25rem 0.5rem 2.375rem;
          min-width: 7.5rem; } }
    #contents .movie_subtitle {
      margin-top: 1.5rem;
      line-height: 1.2;
      font-size: 1.25rem; }
      @media screen and (max-width: 768px) {
        #contents .movie_subtitle {
          font-size: 1.125rem;
          margin-top: 0.5rem;
          padding-left: 0.75rem;
          padding-right: 0.75rem; } }
      @media screen and (max-width: 420px) {
        #contents .movie_subtitle {
          font-size: 1rem; } }
  #contents .blink {
    width: 200px;
    height: 50px;
    background-color: magenta;
    padding: 15px;
    text-align: center;
    line-height: 50px; }
  #contents .animation_blink {
    -webkit-animation: blink 5s linear infinite;
            animation: blink 5s linear infinite;
    -moz-animation: blink 5s linear infinite; }
  #contents .scale_in_right {
    -webkit-animation: scale-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: scale-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

@-webkit-keyframes scale_in_right {
  0% {
    transform: scale(0);
    transform-origin: 100% 50%;
    opacity: 1; }
  100% {
    transform: scale(1);
    transform-origin: 100% 50%;
    opacity: 1; } }

@keyframes scale_in_right {
  0% {
    transform: scale(0);
    transform-origin: 100% 50%;
    opacity: 1; }
  100% {
    transform: scale(1);
    transform-origin: 100% 50%;
    opacity: 1; } }

@-webkit-keyframes blink {
  0% {
    opacity: 0; }
  1% {
    opacity: 0; }
  71.5% {
    opacity: 0; }
  72% {
    opacity: 1; }
  76% {
    opacity: 1; }
  76.5% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes blink {
  0% {
    opacity: 0; }
  1% {
    opacity: 0; }
  71.5% {
    opacity: 0; }
  72% {
    opacity: 1; }
  76% {
    opacity: 1; }
  76.5% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes smile {
  0% {
    opacity: 0; }
  39.9% {
    opacity: 0; }
  40% {
    opacity: 1; }
  83% {
    opacity: 1; }
  83.1% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes smile {
  0% {
    opacity: 0; }
  39.9% {
    opacity: 0; }
  40% {
    opacity: 1; }
  83% {
    opacity: 1; }
  83.1% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes master_blink {
  0% {
    opacity: 0; }
  59.5% {
    opacity: 0; }
  60% {
    opacity: 1; }
  66% {
    opacity: 1; }
  66.1% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes master_blink {
  0% {
    opacity: 0; }
  59.5% {
    opacity: 0; }
  60% {
    opacity: 1; }
  66% {
    opacity: 1; }
  66.1% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes controller_challenge {
  0% {
    bottom: -28.125rem; }
  5% {
    bottom: -28.125rem; }
  8% {
    bottom: -30.625rem; }
  35% {
    bottom: -1.25rem; }
  70% {
    bottom: -1.25rem; }
  75% {
    bottom: 0rem; }
  100% {
    bottom: -23.125rem; } }

@keyframes controller_challenge {
  0% {
    bottom: -28.125rem; }
  5% {
    bottom: -28.125rem; }
  8% {
    bottom: -30.625rem; }
  35% {
    bottom: -1.25rem; }
  70% {
    bottom: -1.25rem; }
  75% {
    bottom: 0rem; }
  100% {
    bottom: -23.125rem; } }

@-webkit-keyframes controller_challenge_xs {
  0% {
    bottom: -28.125rem; }
  5% {
    bottom: -28.125rem; }
  8% {
    bottom: -30rem; }
  35% {
    bottom: -1.875rem; }
  70% {
    bottom: -1.875rem; }
  75% {
    bottom: -1.25rem; }
  100% {
    bottom: -23.75rem; } }

@keyframes controller_challenge_xs {
  0% {
    bottom: -28.125rem; }
  5% {
    bottom: -28.125rem; }
  8% {
    bottom: -30rem; }
  35% {
    bottom: -1.875rem; }
  70% {
    bottom: -1.875rem; }
  75% {
    bottom: -1.25rem; }
  100% {
    bottom: -23.75rem; } }

@-webkit-keyframes controller_challenge_sp {
  0% {
    bottom: -28.125rem; }
  5% {
    bottom: -28.125rem; }
  8% {
    bottom: -30.625rem; }
  35% {
    bottom: -5rem; }
  70% {
    bottom: -5rem; }
  75% {
    bottom: -3.125rem; }
  100% {
    bottom: -25.625rem; } }

@keyframes controller_challenge_sp {
  0% {
    bottom: -28.125rem; }
  5% {
    bottom: -28.125rem; }
  8% {
    bottom: -30.625rem; }
  35% {
    bottom: -5rem; }
  70% {
    bottom: -5rem; }
  75% {
    bottom: -3.125rem; }
  100% {
    bottom: -25.625rem; } }

@-webkit-keyframes controller_challenge_se {
  0% {
    bottom: -28.125rem; }
  5% {
    bottom: -28.125rem; }
  8% {
    bottom: -30.625rem; }
  35% {
    bottom: -6.25rem; }
  70% {
    bottom: -6.25rem; }
  75% {
    bottom: -1.875rem; }
  100% {
    bottom: -26.25rem; } }

@keyframes controller_challenge_se {
  0% {
    bottom: -28.125rem; }
  5% {
    bottom: -28.125rem; }
  8% {
    bottom: -30.625rem; }
  35% {
    bottom: -6.25rem; }
  70% {
    bottom: -6.25rem; }
  75% {
    bottom: -1.875rem; }
  100% {
    bottom: -26.25rem; } }

@-webkit-keyframes btn_glow {
  0% {
    box-shadow: 0 0 0.25rem 0.25rem rgba(255, 255, 255, 0); }
  20% {
    box-shadow: 0 0 0.25rem 0.25rem rgba(255, 255, 255, 0); }
  50% {
    box-shadow: 0 0 0.25rem 0.25rem white; }
  75% {
    box-shadow: 0 0 0.25rem 0.25rem white; }
  100% {
    box-shadow: 0 0 0rem 0rem rgba(255, 255, 255, 0); } }

@keyframes btn_glow {
  0% {
    box-shadow: 0 0 0.25rem 0.25rem rgba(255, 255, 255, 0); }
  20% {
    box-shadow: 0 0 0.25rem 0.25rem rgba(255, 255, 255, 0); }
  50% {
    box-shadow: 0 0 0.25rem 0.25rem white; }
  75% {
    box-shadow: 0 0 0.25rem 0.25rem white; }
  100% {
    box-shadow: 0 0 0rem 0rem rgba(255, 255, 255, 0); } }