* {
      margin: 0;
      padding: 0;
  }
  /*　iOSのデフォルトの設定を無効か */
  /* コンテキストメニューを無効化する */
  
  button,
  textarea,
  select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }
  
  body,
  html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: sans-serif;
      background-color: #f5f3f3;
      scroll-behavior: smooth;
  }
  
  html {
      touch-action: manipulation;
  }
  
  @media screen and (max-width: 768px) {
      .parent {
          margin: 0 auto;
          width: 95%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .parent {
          margin: 0 auto;
          width: 60%;
          max-width: 800px;
      }
  }
  
  @media screen and (max-width: 768px) {
      .parent_price {
          margin: 0 auto;
          width: 95%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .parent_price {
          margin: 0 auto;
          width: 50%;
          max-width: 800px;
      }
  }
  
  .parent_black {
      margin: 0 auto;
      cursor: pointer;
      background-color: #000;
  }
  
  @media screen and (max-width: 768px) {
      .parent_black {
          width: 154px;
          height: fit-content;
      }
  }
  
  @media screen and (min-width: 769px) {
      .parent_black {
          width: fit-content;
          height: 204px;
      }
  }
  
  .send_btn_edit {
      text-align: center;
      font-weight: bold;
      font-size: 1em;
      padding: 5px 5px;
      cursor: pointer;
      border-radius: 6px;
      border-color: #89B700;
      width: 90px;
      color: #FFF;
      background: #89B700;
      margin-bottom: 5px;
      margin-top: 5px;
      box-shadow: none;
      border: none;
  }
  
  .edit_cancel {
      font-weight: bold;
      margin-left: 10px;
      font-size: 1em;
      padding: 5px 5px;
      cursor: pointer;
      border-radius: 6px;
      border-color: #464c5a;
      width: fit-content;
      color: #FFF;
      background: #464c5a;
      margin-bottom: 5px;
  }
  
  .send_btn {
      font-size: 1.1em;
      padding: 5px 5px;
      padding-left: 10px;
      padding-right: 10px;
      cursor: pointer;
      border-radius: 6px;
      border-color: #89B700;
      width: fit-content;
      color: #FFF;
      font-weight: bold;
      background: #89B700;
      border: 1px solid #89B700;
  }
  
  .send_btn2 {
      font-size: 1em;
      padding: 5px 5px;
      cursor: pointer;
      border-radius: 6px;
      border-color: #ff1493;
      width: fit-content;
      color: #FFF;
      background: #ff1493;
  }
  
  .beginner_q {
      border: none;
      padding: 5px 5px;
      margin-top: 3px;
      margin-right: 5px;
      margin-bottom: 8px;
      font-size: 0.9em;
      cursor: pointer;
      border-radius: 6px;
      width: fit-content;
      color: #FFF;
      background: #D91718;
      font-weight: bold;
  }
  
  .beginner_q_close {
      border: none;
      padding: 5px 5px;
      margin-top: 3px;
      margin-right: 5px;
      margin-bottom: 8px;
      font-size: 0.9em;
      cursor: pointer;
      border-radius: 6px;
      width: fit-content;
      color: #FFF;
      background: #475c86;
  }
  
  .beginner_q_hikaku {
      background: #D91718;
  }
  
  .beginner_q_kankeishi {
      background: #D91718;
  }
  
  .beginner_q_mix {
      background: #D91718;
  }
  
  .beginner_q_mirai {
      background: #D91718;
  }
  
  .beginner_q_keiken {
      background: #D91718;
  }
  
  .beginner_q_katei {
      background: #D91718;
  }
  
  .beginner_q_kazu {
      background: #D91718;
  }
  
  .beginner_q_kenko {
      background: #D91718;
  }
  
  .beginner_q_hindo {
      background: #D91718;
  }
  
  .beginner_q_kazoku {
      background: #D91718;
  }
  
  .beginner_q_kimochi {
      background: #D91718;
  }
  
  .beginner_q_shuukan {
      background: #D91718;
  }
  
  .send_btn3 {
      font-size: 1em;
      padding: 5px 20px;
      cursor: pointer;
      border-radius: 6px;
      border-color: #ff1493;
      width: fit-content;
      color: #FFF;
      background: #ff1493;
  }
  
  #ok_button {
      margin-top: 5px;
      margin-bottom: 5px;
      font-size: 0.9em;
      padding: 4px 10px;
      cursor: pointer;
      height: 29px;
      border-radius: 4px;
      width: fit-content;
      color: #FFF;
      background: #464c5a;
      border-style: hidden;
  }
  
  #next_button {
      margin-bottom: 5px;
      font-size: 0.9em;
      padding: 4px 10px;
      cursor: pointer;
      border-radius: 4px;
      border-color: #464c5a;
      width: fit-content;
      color: #FFF;
      background: #464c5a;
      border-style: hidden;
  }
  
  #delete_button {
      margin-left: 10px;
      margin-bottom: 5px;
      font-size: 0.9em;
      padding: 4px 10px;
      cursor: pointer;
      border-radius: 4px;
      border-color: #464c5a;
      width: fit-content;
      color: #FFF;
      background: #464c5a;
      border-style: hidden;
  }
  
  .send_btn4 {
      margin-left: 20px;
      font-size: 1em;
      padding: 5px 15px;
      cursor: pointer;
      border-radius: 6px;
      border-color: #5c595a;
      width: fit-content;
      color: #FFF;
      background: #5c595a;
      border-style: hidden;
  }
  
  .btns {
      margin-top: 20px;
  }
  
  .score {
      position: absolute;
      width: fit-content;
      bottom: 0%;
      left: 0%;
      font-size: 0.9em;
      color: #FFF;
      padding: 3px 3px;
      font-weight: bold;
      text-align: left;
      border-radius: 8px;
      background-color: #6394bc;
      border: 1px solid white;
      z-index: 4;
  }
  
  .score.inverted {
      color: #6394bc;
      background-color: #FFF;
  }
  
  h2 {
      margin-top: 5px;
      font-size: 1.2em;
      color: rgb(69, 64, 63);
      font-weight: bold;
  }
  
  .response {
      text-align: left;
  }
  
  .advice {
      color: #FF9900;
      font-weight: bold;
  }
  
  .container {
      text-align: center;
  }
  
  .mail_parent {
      margin-top: 20px;
      width: 100%;
      text-align: center;
  }
  
  #modoru {
      margin: 0 auto;
      text-align: center;
      width: 100px;
      cursor: pointer;
      background-color: #55575c;
      color: #FFF;
      border-radius: 6px;
      border-style: hidden;
      border: 2px solid #32545f;
      font-weight: bold;
  }
  
  .submit {
      cursor: pointer;
      width: fit-content;
      display: block;
      margin: 0 auto;
      text-align: center;
      font-size: 1em;
      padding: 5px 12px;
      color: #FFF;
      border-radius: 5px;
      font-weight: bold;
      background-color: #68889e;
  }
  
  #thanks {
      text-align: center;
  }
  
  .mail_parent2 {
      width: 90%;
      height: fit-content;
      text-align: center;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      z-index: 100;
      display: none;
  }
  
  .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 99;
      display: none;
  }
  
  @media screen and (max-width: 768px) {
      .bigger {
          font-size: 1em;
      }
  }
  
  @media screen and (min-width: 769px) {
      .bigger {
          font-size: 1em;
      }
  }
  
  @media screen and (max-width: 768px) {
      .bigger6 {
          font-weight: bold;
          font-size: 1em;
      }
  }
  
  @media screen and (min-width: 769px) {
      .bigger6 {
          font-weight: bold;
          font-size: 1em;
      }
  }
  
  @media screen and (max-width: 768px) {
      #sound {
          width: 1em;
          height: auto;
      }
  }
  
  .bold {
      font-weight: bold;
  }
  
  h1 {
      padding-top: 5px;
      cursor: pointer;
      font-size: 1.4em;
      color: #5c8aaf;
      /*color: #6394bc;*/
  }
  
  @media screen and (max-width: 768px) {
      #user-input6 {
          border-radius: 6px;
          padding-left: 4px;
          padding-right: 4px;
          padding-top: 2px;
          width: 94%;
      }
  }
  
  @media screen and (min-width: 769px) {
      #user-input6 {
          border-radius: 6px;
          padding-left: 5px;
          padding-right: 5px;
          padding-top: 5px;
          padding-bottom: 2px;
          width: 70%;
      }
  }
  
  @media screen and (max-width: 768px) {
      #user-input7 {
          border-radius: 6px;
          padding-left: 5px;
          padding-right: 5px;
          padding-top: 2px;
          width: 94%;
      }
  }
  
  @media screen and (min-width: 769px) {
      #user-input7 {
          border-radius: 6px;
          padding-left: 5px;
          padding-right: 5px;
          padding-top: 5px;
          padding-bottom: 2px;
          width: 85%;
      }
  }
  
  #ai_any {
      border-radius: 6px;
      padding-left: 5px;
      padding-right: 22px;
      width: auto;
      font-size: 1.2em;
      height: 1.6em;
  }
  
  #ai_age {
      border-radius: 6px;
      padding-left: 5px;
      padding-right: 22px;
      width: auto;
      font-size: 1.2em;
      height: 1.6em;
  }
  
  #ai_kokuseki {
      border-radius: 6px;
      padding-left: 5px;
      padding-right: 22px;
      width: auto;
      font-size: 1.2em;
      height: 1.6em;
  }
  
  #name_man {
      width: fit-content;
      border-radius: 6px;
      padding-left: 5px;
      padding-right: 5px;
      font-size: 1.2em;
      height: 1.6em;
  }
  
  #name_woman {
      width: fit-content;
      border-radius: 6px;
      padding-left: 5px;
      padding-right: 5px;
      font-size: 1.2em;
      height: 1.6em;
  }
  
  #naiyou {
      border-radius: 6px;
      padding: 5px 5px;
  }
  
  #mailtext {
      border-radius: 6px;
      padding-left: 10px;
  }
  
  .mailtext {
      border-radius: 6px;
      padding-left: 10px;
  }
  
  @media screen and (max-width: 768px) {
      .container2 {
          margin-top: 1px;
          width: 95%;
          margin-left: 10px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .container2 {
          margin-top: 8px;
          width: 95%;
          margin-left: 10px;
      }
  }
  
  .footer_link {
      padding-right: 10px;
  }
  
  .footer_logo {
      width: 80px;
      height: auto;
  }
  
  .footer_table {
      width: 100%;
      padding-right: 8px;
  }
  
  .footer_link a {
      color: #525050;
      text-decoration: none;
  }
  
  #footer {
      margin-top: 0px;
      z-index: 3;
      text-align: center;
      bottom: 0;
      padding-top: 5px;
      font-size: 0.8em;
      height: 70px;
      color: #525050;
      background-color: #FFF;
  }
  
  @media screen and (max-width: 768px) {
      #footer {
          width: 100%;
      }
  }
  
  @media screen and (min-width: 769px) {
      #footer {
          width: 100%;
      }
  }
  
  .logo_parts_hidari {
      width: fit-content;
      text-align: center;
  }
  
  .logo_parts_migi {
      width: fit-content;
  }
  
  .footer_table {
      width: 100%;
      padding-right: 8px;
  }
  
  .footer_link {
      padding-right: 10px;
  }
  
  .footer_logo {
      width: 80px;
      height: auto;
  }
  
  .footer_link a:hover {
      color: #525050;
  }
  
  .loading_bg {
      color: #4f8091;
      z-index: 100;
      position: absolute;
      background: #f7f5f5;
      top: 0;
      height: 100%;
      width: 100%;
      font-family: sans-serif;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  @media screen and (max-width: 768px) {
      .loading_bg {
          font-size: 1.2em;
      }
  }
  
  @media screen and (min-width: 769px) {
      .loading_bg {
          font-size: 1.5em;
      }
  }
  
  .pcview {
      display: inline !important;
  }
  
  .spview {
      display: none !important;
  }
  
  @media screen and (max-width: 769px) {
      /*tablet , smart phone access*/
      .pcview {
          display: none !important;
      }
      .spview {
          display: inline !important;
      }
  }
  
  .btn3 {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 15px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      border-color: #ff1493;
      padding: 5px 10px;
      font-size: 0.8em;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  .btn {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      border-color: #32597b;
      padding: 5px 10px;
      font-size: 1em;
      background-color: #32597b;
      font-weight: 700;
  }
  
  .btn_ok {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      border-color: #32597b;
      padding: 5px 10px;
      font-size: 1em;
      background-color: #32597b;
      font-weight: 700;
  }
  
  @media screen and (max-width: 768px) {
      #mailtext {
          padding: 5px;
          margin: 0 auto;
          width: 70%;
      }
  }
  
  @media screen and (min-width: 769px) {
      #mailtext {
          padding: 5px;
          margin: 0 auto;
          width: 40%;
          max-width: 800px;
          min-width: 300px;
      }
  }
  
  @media screen and (max-width: 768px) {
      .mailtext {
          padding: 5px;
          margin: 0 auto;
          width: 90%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .mailtext {
          padding: 5px;
          margin: 0 auto;
          width: 40%;
          max-width: 800px;
          min-width: 300px;
      }
  }
  
  @media screen and (max-width: 768px) {
      #mailtext2 {
          margin: 0 auto;
          width: 95%;
      }
  }
  
  @media screen and (min-width: 769px) {
      #mailtext2 {
          margin: 0 auto;
          width: 50%;
          max-width: 800px;
      }
  }
  
  #mailtext2 {
      border-radius: 6px;
      padding: 5px;
      border-style: solid;
      border-width: 1px;
      border-color: rgb(80, 82, 90);
  }
  
  #niyou {
      padding: 5px;
  }
  
  #sound {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
  }
  
  .advice2 {
      color: darkolivegreen;
      font-size: 0.8em;
      text-decoration: dotted;
  }
  
  .youup {
      width: 150px;
      height: auto;
  }
  
  .chara {
      font-size: 1.4em;
      text-decoration: dotted;
      color: darkolivegreen;
      font-weight: bold;
  }
  
  .chara_img {
      height: 30px;
      width: auto;
      margin-right: 10px;
  }
  
  @media screen and (max-width: 768px) {
      .alisa_rest {
          position: absolute;
          top: 1px;
          bottom: 0%;
          left: 50%;
          transform: translateX(-50%);
          margin-right: 1px;
          width: 240px;
          height: 240px;
      }
      .alisa_rip {
          position: absolute;
          top: 1px;
          bottom: 0%;
          left: 50%;
          transform: translateX(-50%);
          margin-right: 1px;
          width: 240px;
          height: 240px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .alisa_rest {
          position: absolute;
          top: 1px;
          bottom: 0%;
          left: 50%;
          transform: translateX(-50%);
          margin-right: 1px;
          width: 240px;
          height: 240px;
      }
      .alisa_rip {
          position: absolute;
          top: 1px;
          bottom: 0%;
          left: 50%;
          transform: translateX(-50%);
          margin-right: 1px;
          width: 240px;
          height: 240px;
      }
  }
  
  #yaku_btn {
      color: darkolivegreen;
      text-decoration: underline;
      font-weight: bold;
  }
  
  #one_point {
      margin: 0 auto;
      width: fit-content;
      text-decoration: underline;
      font-size: 0.8em;
      cursor: pointer;
  }
  
  .kaiyaku {
      font-size: 0.9em;
  }
  
  #ai_kokuseki {
      font-size: 1em;
      border-width: 1px;
      border-color: rgb(80, 82, 90);
      color: #4a6888;
      font-weight: bold;
      background-color: #FFF;
  }
  
  #ai_any {
      font-size: 1em;
      border-width: 1px;
      border-color: rgb(80, 82, 90);
      color: #4a6888;
      font-weight: bold;
      background-color: #FFF;
  }
  
  .lang_select {
      font-size: 1em;
      border-width: 1px;
      border-color: rgb(80, 82, 90);
      color: #4a6888;
      font-weight: bold;
      background-color: #FFF;
  }
  
  .lang_select {
      border-radius: 6px;
      padding-left: 5px;
      padding-right: 22px;
      width: auto;
      font-size: 1.2em;
      height: 1.6em;
  }
  /*モダルウィンドウ言語セレクトSP*/
  
  .modal_lang {
      z-index: 5;
      height: 100vh;
      position: fixed;
      top: 0;
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .modal_bg_lang {
      display: none;
      z-index: 3;
      background: rgba(52, 53, 54, 0.5);
      height: 100vh;
      position: absolute;
      width: 100%;
  }
  
  .modal_content_lang {
      display: none;
      z-index: 5;
      color: #FFF;
      text-align: left;
      display: inline-block;
      padding: 20px 30px;
      position: absolute;
      font-size: 15px;
      border-radius: 12px;
      background-color: #3c5461;
      border: medium solid #68889e;
      max-height: 90vh;
      max-width: 90%;
      width: fit-content;
      overflow: auto;
  }
  
  .modal_content_lang::-webkit-scrollbar {
      display: none;
  }
  
  #language {
      text-align: center;
      padding-left: 5px;
      height: 30px;
      font-size: 1.2em;
      background-color: #FFF;
  }
  
  #langselect {
      text-align: center;
      height: 28px;
      margin: 0;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      border-color: #89B700;
      padding: 5px 5px;
      font-size: 1.2em;
      background-color: #89B700;
      font-weight: 700;
  }
  
  .lang_select_text {
      text-align: left;
  }
  
  @media screen and (max-width: 768px) {
      .tran_btn {
          cursor: pointer;
          height: 25px;
          width: auto;
          vertical-align: bottom;
      }
  }
  
  @media screen and (min-width: 769px) {
      .tran_btn {
          cursor: pointer;
          height: 25px;
          width: auto;
          vertical-align: bottom;
      }
  }
  
  .tran_btn_small {
      height: 20px;
      width: auto;
  }
  
  @media screen and (max-width: 768px) {
      .tran_btn {
          cursor: pointer;
          height: 25px;
          width: auto;
          vertical-align: bottom;
      }
  }
  
  @media screen and (min-width: 769px) {
      .tran_btn {
          cursor: pointer;
          height: 25px;
          width: auto;
          vertical-align: bottom;
      }
  }
  
  .honyaku_text {
      color: #484b53;
  }
  
  #jobs {
      margin-top: 5px;
      border-radius: 6px;
      padding-left: 5px;
      padding-right: 22px;
      width: auto;
      height: 1.6em;
  }
  
  #jobs {
      font-size: 1em;
      border-width: 1px;
      border-color: rgb(80, 82, 90);
      color: #4a6888;
      font-weight: bold;
      background-color: #FFF;
  }
  
  .red {
      color: red;
      font-weight: bold;
  }
  
  #button {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 50px;
      font-size: 1em;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  #button2 {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 12px;
      height: 50px;
      font-size: 1.1em;
      background-color: #89B700;
      font-weight: 700;
  }
  
  #button3 {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 12px;
      height: 50px;
      font-size: 1.1em;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  #button5 {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 50px;
      font-size: 1em;
      Width: 150px;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  #button6 {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 30px;
      font-size: 1em;
      background-color: #464c5a;
      font-weight: 700;
  }
  
  #button7 {
      margin-left: 10px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 30px;
      font-size: 1em;
      background-color: #464c5a;
      font-weight: 700;
  }
  
  #button4 {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 30px;
      font-size: 1em;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  #start {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 30px;
      font-size: 1em;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  #start.inverted {
      color: #ff1493;
      background-color: #FFF;
  }
  
  #button4.inverted {
      color: #ff1493;
      background-color: #FFF;
  }
  
  #free_train.inverted {
      color: #a7ccea;
      background-color: #FFF;
  }
  
  .modal1 {
      display: none;
      z-index: 10;
      height: 100vh;
      position: fixed;
      top: 0;
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .modal_bg1 {
      display: none;
      z-index: 9;
      background: rgba(52, 53, 54, 0.1);
      height: 100vh;
      position: absolute;
      width: 100%;
  }
  
  @media screen and (max-width: 768px) {
      .modal_content1 {
          display: none;
          z-index: 10;
          color: #000;
          background-color: #FFF;
          border: medium solid #68889e;
          border-radius: 6px;
          text-align: center;
          display: inline-block;
          padding: 10px;
          position: absolute;
          max-height: 90vh;
          width: 90%;
          overflow: auto;
      }
  }
  
  @media screen and (min-width: 769px) {
      .modal_content1 {
          display: none;
          z-index: 10;
          color: #000;
          background-color: #FFF;
          border: medium solid #68889e;
          border-radius: 6px;
          text-align: center;
          display: inline-block;
          padding: 10px;
          position: absolute;
          max-height: 90vh;
          max-width: 100%;
          width: fit-content;
          overflow: auto;
      }
  }
  
  .modal_content1::-webkit-scrollbar {
      display: none;
  }
  
  .mojide {
      color: #FFF;
      background-color: #89B700;
      font-weight: bold;
      cursor: pointer;
      border-radius: 6px;
      padding-left: 4px;
      padding-right: 4px;
  }
  
  .q {
      margin-left: 2px;
      margin-right: 2px;
      margin-top: 2px;
      width: 1.6em;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 4px;
      border-style: hidden;
      padding: 3px 3px;
      padding-bottom: 4px;
      height: 25px;
      font-size: 1em;
      background-color: #464c5a;
      font-weight: 700;
  }
  
  .q_space {
      margin-left: 2px;
      margin-right: 2px;
      margin-top: 2px;
      width: fit-content;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 4px;
      border-style: hidden;
      padding: 3px 3px;
      padding-bottom: 4px;
      height: 25px;
      font-size: 1em;
      background-color: #464c5a;
      font-weight: 700;
  }
  /*.edit {
      margin-left: 2px;
      margin-right: 2px;
      margin-top: 2px;
      width: fit-content;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      cursor: pointer;
      border-style: hidden;
      border-radius: 4px;
      padding: 3px 3px;
      padding-bottom: 4px;
      height: 25px;
      font-size: 0.9em;
      background-color: #464c5a;
      font-weight: 700;
      vertical-align: bottom;
  }*/
  
  .edit {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 50px;
      font-size: 1em;
      width: fit-content;
      background-color: #464c5a;
      font-weight: 700;
  }
  
  .edit_x {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 50px;
      font-size: 1em;
      width: fit-content;
      background-color: #696969;
      font-weight: 700;
  }
  
  #button_send_x {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 50px;
      font-size: 1em;
      Width: 150px;
      background-color: #696969;
      font-weight: 700;
  }
  
  .clear_text_all {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 10px;
      height: 50px;
      font-size: 1em;
      width: fit-content;
      background-color: #696969;
      font-weight: 700;
  }
  /*.q_yaku {
      margin-left: 2px;
      margin-right: 2px;
      margin-top: 2px;
      width: fit-content;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      cursor: pointer;
      border-style: hidden;
      border-radius: 4px;
      padding: 3px 3px;
      padding-bottom: 4px;
      height: 25px;
      font-size: 0.9em;
      background-color: #464c5a;
      font-weight: 700;
      vertical-align: bottom;
  }
  
  .q_yaku2 {
      cursor: pointer;
      color: #fff;
      font-size: 0.9em;
      border-style: hidden;
      border-radius: 4px;
      padding: 3px 3px;
      padding-bottom: 4px;
      height: 25px;
      font-size: 0.9em;
      background-color: #464c5a;
  }*/
  
  #speaker {
      border-style: hidden;
  }
  
  .q_speaker {
      margin-top: 2px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      vertical-align: bottom;
  }
  
  .q_speaker_small {
      margin-top: 2px;
      cursor: pointer;
      width: 25px;
      height: 25px;
      vertical-align: bottom;
  }
  
  .center {
      text-align: center;
  }
  
  .usen {
      width: 110px;
      height: auto;
      margin: 0 auto;
  }
  
  .explain_contents {
      padding: 11px;
      text-align: center;
      font-size: 1em;
      text-align: left;
  }
  
  .explain_parent {
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
  }
  
  .explain_parent_sugotoku {
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
      text-align: center;
  }
  
  .contents_ex {
      font-size: 0.8em;
      color: #585757;
  }
  
  a.sugo_link {
      color: black;
      text-decoration: underline;
  }
  
  a.sugo_link:visited {
      color: black;
  }
  
  .price_plan {
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
  }
  
  h3 {
      margin-left: 5px;
      margin-right: 5px;
      padding-top: 11px;
      font-weight: bold;
      font-size: 1.2em;
      color: #4c7ba1;
  }
  
  @media screen and (max-width: 768px) {
      h3 {
          text-align: left;
      }
  }
  
  @media screen and (min-width: 769px) {
      h3 {
          text-align: left;
      }
  }
  
  h4 {
      padding-top: 11px;
      font-weight: bold;
      text-align: center;
      font-size: 1.2em;
      color: #4c7ba1;
  }
  
  .h4-container {
      text-align: center;
      /* テキストと画像を中央揃え */
  }
  
  h5 {
      padding-top: 11px;
      font-weight: bold;
      text-align: center;
      font-size: 1.2em;
      color: #4c7ba1;
  }
  
  @media screen and (max-width: 768px) {
      h5 {
          text-align: left;
      }
  }
  
  @media screen and (min-width: 769px) {
      h5 {
          text-align: center;
      }
  }
  
  @media screen and (max-width: 768px) {
      h6 {
          padding-top: 11px;
          font-weight: bold;
          text-align: left;
          font-size: 1em;
          color: #4c7ba1;
      }
  }
  
  @media screen and (min-width: 769px) {
      h6 {
          padding-top: 11px;
          font-weight: bold;
          text-align: center;
          font-size: 1em;
          color: #4c7ba1;
      }
  }
  
  .main_blue {
      color: #4c7ba1;
      font-size: 1.1em;
  }
  
  .blue_arrow {
      color: #4c7ba1;
      font-size: 1em;
  }
  
  .gray {
      color: #89B700;
  }
  
  .checkmark002 {
      padding-right: 5px;
      padding-left: 24px;
      position: relative;
  }
  
  .checkmark002:before,
  .checkmark002:after {
      content: "";
      display: block;
      position: absolute;
  }
  
  .checkmark002:before {
      width: 1.1em;
      height: 1.1em;
      border-radius: 0.7em;
      background: #89B700;
      border: 1px solid #89B700;
      left: 0;
      top: 0.1em;
  }
  
  .checkmark002:after {
      border-left: 3px solid #FFF;
      border-bottom: 3px solid #FFF;
      width: 0.5em;
      height: 0.3em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      left: 0.3em;
      top: 0.4em;
  }
  
  .checkmark003 {
      padding-right: 5px;
      padding-left: 24px;
      position: relative;
  }
  
  .checkmark003:before,
  .checkmark003:after {
      content: "";
      display: block;
      position: absolute;
  }
  
  .checkmark003:before {
      width: 1.1em;
      height: 1.1em;
      border-radius: 0.7em;
      background: #557005;
      border: 1px solid #557005;
      left: 0;
      top: 0.1em;
  }
  
  .checkmark003:after {
      border-left: 3px solid #FFF;
      border-bottom: 3px solid #FFF;
      width: 0.5em;
      height: 0.3em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      left: 0.3em;
      top: 0.4em;
  }
  
  .checkmark004 {
      padding-right: 5px;
      padding-left: 24px;
      position: relative;
  }
  
  .checkmark004:before,
  .checkmark004:after {
      content: "";
      display: block;
      position: absolute;
  }
  
  .checkmark004:before {
      width: 1.1em;
      height: 1.1em;
      border-radius: 0.7em;
      background: #FF9900;
      border: 1px solid #FF9900;
      left: 0;
      top: 0.1em;
  }
  
  .checkmark004:after {
      border-left: 3px solid #FFF;
      border-bottom: 3px solid #FFF;
      width: 0.5em;
      height: 0.3em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      left: 0.3em;
      top: 0.4em;
  }
  
  .checkmark005 {
      padding-right: 5px;
      padding-left: 24px;
      position: relative;
  }
  
  .checkmark005:before,
  .checkmark005:after {
      content: "";
      display: block;
      position: absolute;
  }
  
  .checkmark005:before {
      width: 1.1em;
      height: 1.1em;
      border-radius: 0.7em;
      background: #89B700;
      border: 1px solid #89B700;
      left: 0;
      top: 0.1em;
  }
  
  .checkmark005:after {
      border-left: 3px solid #FFF;
      border-bottom: 3px solid #FFF;
      width: 0.5em;
      height: 0.3em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      left: 0.3em;
      top: 0.4em;
  }
  
  .checkmark006 {
      padding-right: 5px;
      padding-left: 24px;
      position: relative;
  }
  
  .checkmark006:before,
  .checkmark006:after {
      content: "";
      display: block;
      position: absolute;
  }
  
  .checkmark006:before {
      width: 1.1em;
      height: 1.1em;
      border-radius: 0.7em;
      background: #6991bf;
      border: 1px solid #6991bf;
      left: 0;
      top: 0.1em;
  }
  
  .checkmark007 {
      padding-right: 5px;
      padding-left: 24px;
      position: relative;
  }
  
  .checkmark007:before,
  .checkmark007:after {
      content: "";
      display: block;
      position: absolute;
  }
  
  .checkmark007:before {
      width: 1.1em;
      height: 1.1em;
      border-radius: 0.7em;
      background: #00bfff;
      border: 1px solid #00bfff;
      left: 0;
      top: 0.1em;
  }
  
  .checkmark007:after {
      border-left: 3px solid #FFF;
      border-bottom: 3px solid #FFF;
      width: 0.5em;
      height: 0.3em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      left: 0.3em;
      top: 0.4em;
  }
  
  .checkmark006:after {
      border-left: 3px solid #FFF;
      border-bottom: 3px solid #FFF;
      width: 0.5em;
      height: 0.3em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      left: 0.3em;
      top: 0.4em;
  }
  
  .please_plan {
      margin-left: 5px;
      font-size: 1.1em;
      color: #a61f1f;
      margin-bottom: 3px;
      margin-top: 3px;
      font-weight: bold;
  }
  
  .media_parts {
      font-size: 0.9em;
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
  }
  
  .news_parts {
      font-size: 0.9em;
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
  }
  
  .story {
      text-align: center;
      font-size: 0.9em;
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
  }
  
  @media screen and (max-width: 768px) {
      .news_text_contents {
          width: 100%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .news_text_contents {
          width: fit-content;
      }
  }
  
  .media2 {
      padding: 10px;
  }
  
  .media a {
      color: black;
      text-decoration: none;
  }
  
  @media screen and (max-width: 768px) {
      .media_image {
          width: 90px;
          height: auto;
          margin-left: 7px;
          margin-right: 7px;
          margin-bottom: 5px;
          margin-top: 5px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .media_image {
          width: 110px;
          height: auto;
          margin-left: 7px;
          margin-right: 7px;
          margin-bottom: 5px;
          margin-top: 5px;
      }
  }
  
  .media_logo {
      text-align: center;
  }
  
  .lets_ask {
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
  }
  
  .lets_ask2 {
      padding: 10px;
  }
  
  @media screen and (max-width: 768px) {
      .pub {
          display: block;
          margin: 0 auto;
          width: 150px;
          height: auto;
      }
  }
  
  @media screen and (min-width: 769px) {
      .pub {
          display: block;
          margin: 0 auto;
          width: 150px;
          height: auto;
      }
  }
  
  .p_ai0 {
      cursor: pointer;
      width: 85px;
      height: 85px;
      position: relative;
      display: inline-block;
  }
  
  .p_ai {
      cursor: pointer;
      position: relative;
      /* 追加: p_aiを相対位置指定の基準とする */
      width: 100%;
      /* 追加: p_aiの幅を親要素に合わせる */
      height: 100%;
      /* 追加: p_aiの高さを親要素に合わせる */
  }
  
  .p_ai img {
      width: 85px;
      /* 幅を指定 */
      height: 85px;
      /* 高さを指定 */
  }
  
  .p_ai2 {
      z-index: 2;
      position: absolute;
      bottom: 10px;
      /* 修正: 単位(px)を追加 */
      right: 11px;
      /* 修正: 単位(px)を追加 */
      width: 12px;
      height: 12px;
      background-color: #89B700;
      border-radius: 50%;
      border: 2px solid white;
  }
  
  .p_ai2_red {
      z-index: 2;
      position: absolute;
      bottom: 10px;
      /* 修正: 単位(px)を追加 */
      right: 11px;
      /* 修正: 単位(px)を追加 */
      width: 12px;
      height: 12px;
      background-color: #a70b1e;
      border-radius: 50%;
      border: 2px solid white;
      pointer-events: none;
  }
  
  .news {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
  }
  
  .news-text {
      display: inline-block;
      /* 必須 */
      padding-left: 100%;
      /* 右端から文字をスタートさせるため */
      white-space: nowrap;
      /* 改行が起こらないように対策 */
      line-height: 1em;
      animation: scroll 10s linear 0s infinite;
  }
  
  @keyframes scroll {
      0% {
          transform: translateX(0)
      }
      100% {
          transform: translateX(-100%)
      }
  }
  
  .small_text {
      font-size: 0.8em;
  }
  
  .small_text2 {
      font-size: 0.9em;
  }
  
  @media screen and (max-width: 768px) {
      .chara_container {
          position: relative;
          height: 240px;
          width: 240px;
          margin: 0 auto;
      }
  }
  
  @media screen and (min-width: 769px) {
      .chara_container {
          position: relative;
          height: 240px;
          width: 240px;
          margin: 0 auto;
      }
  }
  
  .chara_name_container {
      position: absolute;
      top: 0%;
      left: 0%;
  }
  
  .chara_name {
      position: absolute;
      width: fit-content;
      top: 0%;
      left: 0%;
      font-size: 0.9em;
      color: #FFF;
      padding: 3px 3px;
      font-weight: bold;
      text-align: left;
      background-color: #000;
      z-index: 4;
  }
  
  .zoon {
      position: absolute;
      width: fit-content;
      top: 0%;
      right: 0%;
      font-size: 0.9em;
      color: #FFF;
      padding: 3px 3px;
      font-weight: bold;
      text-align: right;
      width: 60px;
      height: auto;
  }
  
  .mike_zoon {
      z-index: 4;
      position: absolute;
      width: fit-content;
      bottom: 0%;
      right: 0%;
      font-size: 0.9em;
      color: #FFF;
      padding: 3px 3px;
      font-weight: bold;
      text-align: right;
      width: 40px;
      height: auto;
  }
  
  .ripple_zoon {
      z-index: 5;
      position: absolute;
      width: fit-content;
      bottom: 0%;
      right: 0%;
      font-size: 0.9em;
      color: #FFF;
      padding: 3px 3px;
      font-weight: bold;
      text-align: right;
      width: 40px;
      height: auto;
  }
  
  @media screen and (max-width: 768px) {
      .image-container {
          margin: 0 auto;
          height: 242px;
          width: 242px;
          background-color: #000;
      }
  }
  
  @media screen and (min-width: 769px) {
      .image-container {
          margin: 0 auto;
          height: 242px;
          width: 242px;
          background-color: #000;
      }
  }
  
  @media screen and (max-width: 768px) {
      .first_mess {
          text-align: left;
          width: 80%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .first_mess {
          text-align: center;
          width: 50%;
      }
  }
  
  @media screen and (max-width: 768px) {
      .text_speak {
          padding-top: 3px;
          line-height: 1em;
          min-height: 10px;
          text-align: left;
      }
  }
  
  @media screen and (min-width: 769px) {
      .text_speak {
          padding-top: 10px;
          line-height: 1em;
          min-height: 20px;
          text-align: left;
      }
  }
  
  .text_honyaku {
      padding-top: 0px;
      display: flex;
      justify-content: center;
      text-align: center;
  }
  
  @media screen and (max-width: 768px) {
      .text_honyaku2 {
          padding-top: 0px;
          text-align: left;
      }
  }
  
  @media screen and (min-width: 769px) {
      .text_honyaku2 {
          padding-top: 0px;
          text-align: left;
      }
  }
  
  .auto_onsei2 {
      padding-top: 0px;
      display: flex;
      justify-content: center;
      text-align: center;
  }
  
  @media screen and (max-width: 768px) {
      .auto_onsei_text {
          color: #324d72;
          text-align: center;
          font-size: 1em;
          font-weight: bold;
          width: 98%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .auto_onsei_text {
          color: #324d72;
          text-align: center;
          font-size: 1em;
          font-weight: bold;
          width: 95%;
      }
  }
  
  #yaku {
      text-align: left;
  }
  
  #interim_span {
      text-align: left;
      font-size: 1.1em;
      color: darkgreen;
  }
  
  hr {
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
  }
  
  hr {
      margin: 0 auto;
      width: 100%;
      border-top: 1px dotted #aaa;
  }
  
  .hr_basic {
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      margin: 0 auto;
      width: 100%;
      margin-bottom: 5px;
      margin-top: 5px;
      border-top: 1px dotted #aaa;
  }
  
  @media screen and (max-width: 768px) {
      .auto_text {
          color: #324d72;
          text-align: left;
          font-size: 1em;
          font-weight: bold;
          width: 98%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .auto_text {
          color: #324d72;
          text-align: left;
          font-size: 1em;
          font-weight: bold;
          width: 95%;
      }
  }
  
  @media screen and (max-width: 768px) {
      .auto_text_tell {
          color: #808184;
          text-align: left;
          font-size: 0.8em;
          font-weight: bold;
          width: 98%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .auto_text_tell {
          color: #808184;
          text-align: left;
          font-size: 0.8em;
          font-weight: bold;
          width: 95%;
      }
  }
  
  .history_contents {
      color: #000;
      text-align: left;
  }
  
  #correct {
      width: 98%;
      text-align: left;
      color: #2d4b56;
      font-weight: bold;
      background-color: #FFF;
      padding: 5px 5px;
      border-radius: 6px;
      border: 1px solid #54685e;
  }
  
  .tutaeru {
      text-align: center;
  }
  
  .trial_text {
      text-align: left;
  }
  
  #user_in {
      font-weight: bold;
      color: darkgreen;
      text-align: left;
  }
  
  .topic_yaku {
      color: #6394bc;
      font-size: 0.9em;
      font-weight: bolder;
      text-decoration: underline;
  }
  
  .hitokuchi {
      margin: 0 auto;
      padding-top: 0px;
      display: flex;
      /*justify-content: center;*/
      width: 98%;
      text-align: center;
      margin-bottom: 6px;
  }
  
  .onsei_onoff {
      height: 1.2em;
      width: auto;
  }
  
  .onoff {
      text-align: left;
  }
  
  .onoff span {
      margin: 0 7px;
  }
  
  .topics_img {
      cursor: pointer;
      margin-right: 10px;
  }
  
  .button-container {
      display: flex;
  }
  
  .button-container2 {
      display: flex;
  }
  
  .topics_btn2 {
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: none;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: 5px;
      margin-top: 8px;
      font-size: 0.9em;
      border-radius: 6px;
      color: #FFF;
      font-weight: bold;
      background: #D91718;
  }
  
  .topics_btn {
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: none;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: 5px;
      margin-top: 8px;
      font-size: 0.9em;
      border-radius: 6px;
      color: #FFF;
      font-weight: bold;
      background: #D91718;
  }
  
  .begin_menu {
      margin-top: 15px;
  }
  
  .mike {
      position: relative;
      width: 40px;
      height: auto;
  }
  
  .photo {
      border-radius: 10px;
      background-color: #FFF;
      text-align: center;
  }
  /*@media screen and (max-width: 768px) {
      .photo {
          height: 390px;
          overflow-y: scroll;
      }
  }*/
  
  @media screen and (min-width: 769px) {
      .text_honyaku2 {
          padding-top: 0px;
          text-align: left;
      }
  }
  
  .chara_review {
      margin-top: 5px;
      background-color: #000;
      width: 200px;
      height: auto;
      border: 0px solid black;
      padding: 1px;
  }
  
  .preview {
      display: block;
      margin: auto;
      width: 200px;
      height: auto;
  }
  
  .preview2 {
      display: block;
      margin: auto;
      width: 200px;
      height: auto;
      cursor: pointer;
  }
  
  .iphone_mike {
      width: 85%;
      height: auto;
  }
  
  .iphone_mike_for_faq {
      width: 70%;
      height: auto;
  }
  
  .iphone_mess {
      text-align: left;
  }
  
  .ripple2 {
      width: 30px;
      height: auto;
      margin-right: 5px;
  }
  
  @media screen and (max-width: 768px) {
      .bigger4 {
          font-size: 1em;
      }
  }
  
  @media screen and (min-width: 769px) {
      .bigger4 {
          font-size: 1.2em;
      }
  }
  
  @media screen and (max-width: 768px) {
      .bigger5 {
          font-size: 1em;
      }
  }
  
  @media screen and (min-width: 769px) {
      .bigger5 {
          font-size: 1.2em;
      }
  }
  
  .circle {
      display: inline-block;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      background: rgb(200, 21, 80);
      color: #FFF;
      text-align: center;
      line-height: 1.2em;
      margin-right: 3px;
  }
  
  .circle2 {
      display: inline-block;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: #b0c4de;
      text-align: center;
      line-height: 110px;
      color: #FFF;
      font-weight: bold;
  }
  
  .circle3 {
      display: inline-block;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: #87ceeb;
      text-align: center;
      line-height: 110px;
      color: #FFF;
      font-weight: bold;
  }
  
  .circle3b {
      display: inline-block;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: #b0c4de;
      text-align: center;
      line-height: 110px;
      color: #FFF;
      font-weight: bold;
  }
  
  .price_list {
      width: fit-content;
      margin: 0 auto;
      text-align: center;
  }
  
  .price_list_child {
      width: fit-content;
      text-align: left;
  }
  
  .price_list_child2 {
      width: 100%;
      text-align: left;
  }
  
  .check_box_center {
      display: flex;
      justify-content: center;
  }
  
  .check_box_center_child {
      text-align: left;
  }
  
  .ECM_CheckboxInput {
      padding: 12px 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
  }
  
  .ECM_CheckboxInput-Input {
      margin: 0;
      width: 0;
      opacity: 0;
  }
  
  .ECM_CheckboxInput:hover>.ECM_CheckboxInput-DummyInput {
      background: #f6f4f4 !important;
      border: solid 2px #333333;
  }
  
  .ECM_CheckboxInput-Input:focus+.ECM_CheckboxInput-DummyInput {
      background: #f6f4f4 !important;
      border: solid 2px #333333;
  }
  
  .ECM_CheckboxInput-Input:checked+.ECM_CheckboxInput-DummyInput {
      border: solid 2px #333333;
      background: #FFFFFF;
  }
  
  .ECM_CheckboxInput-Input:checked+.ECM_CheckboxInput-DummyInput::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hlY2siPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPjwvc3ZnPg==") no-repeat center;
      background-size: contain;
  }
  
  .ECM_CheckboxInput-DummyInput {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: 32px;
      height: 32px;
      border: solid 2px #888888;
      background: #FFFFFF;
      border-radius: 4px;
  }
  
  .ECM_CheckboxInput-DummyInput.inverted {
      border: solid 2px rgb(115, 155, 184);
      background: #bdd5ef;
  }
  
  @media screen and (max-width: 768px) {
      .ECM_CheckboxInput-LabelText {
          margin-left: 12px;
          display: block;
          font-size: 0.9em;
          font-weight: bold;
      }
  }
  
  @media screen and (min-width: 769px) {
      .ECM_CheckboxInput-LabelText {
          margin-left: 12px;
          display: block;
          font-size: 1em;
          font-weight: bold;
      }
  }
  
  .ECM_CheckboxInput-Input:checked+.ECM_CheckboxInput-DummyInput2::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hlY2siPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPjwvc3ZnPg==") no-repeat center;
      background-size: contain;
  }
  
  .ECM_CheckboxInput-DummyInput2 {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: 32px;
      height: 32px;
      border: solid 2px #888888;
      background: #e5e3e3;
      border-radius: 4px;
  }
  
  #make_account_btn {
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 15px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 12px 20px;
      font-size: 1.1em;
      background-color: #68889e;
      font-weight: 700;
      cursor: pointer;
  }
  
  @media screen and (max-width: 768px) {
      .chuui_text {
          font-size: 0.9em;
          text-align: left;
          margin: 0 auto;
          max-width: 95%;
          margin-bottom: 10px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .chuui_text {
          font-size: 0.9em;
          text-align: left;
          margin: 0 auto;
          max-width: 70%;
          margin-bottom: 15px;
      }
  }
  
  @media screen and (max-width: 768px) {
      .textarea_parent {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 98%;
      }
  }
  
  @media screen and (min-width: 769px) {
      .textarea_parent {
          display: flex;
          justify-content: center;
          align-items: center;
          width: fit-content;
      }
  }
  
  .form_payment {
      padding-right: 40px;
  }
  
  .paytext {
      font-size: 1em;
      color: #464444;
  }
  
  #inputadd {
      margin-right: 3px;
      border-radius: 5px;
      font-weight: bold;
      line-height: 1.2em;
      width: 85%;
      font-size: 0.9em;
      color: #FFF;
      background: #253256;
  }
  
   ::placeholder {
      color: #FFF;
  }
  
   ::-webkit-input-placeholder {
      color: #FFF;
  }
  
   :-ms-input-placeholder {
      color: #FFF;
  }
  
  textarea:focus::placeholder {
      color: #50a5c1;
  }
  
  #input_check {
      cursor: pointer;
      width: fit-content;
      border-style: hidden;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      padding: 12px 20px;
      font-size: 1em;
      background-color: #68889e;
      font-weight: 700;
  }
  
  #input_check2 {
      width: fit-content;
      border-style: hidden;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 0.8em;
      background-color: #595658;
      font-weight: 700;
  }
  
  #input_check {
      display: block;
      margin: 0 auto;
      text-align: center;
  }
  
  #input_check2 {
      display: block;
      margin: 0 auto;
      text-align: center;
  }
  
  .input_check2_wrapper {
      text-align: center;
  }
  
  .input_check2 {
      display: inline-block;
      width: fit-content;
      border-style: hidden;
      text-align: center;
      margin-top: 5px;
      margin-left: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 0.8em;
      background-color: #595658;
      font-weight: 700;
      box-shadow: 2px 2px 4px #595658;
  }
  
  .list-item {
      height: 60px;
  }
  
  .menu-title {
      text-align: center;
      color: #fff;
      font-size: 1.1em;
      height: 50px;
      padding-top: 18px;
      padding-bottom: 4px;
      font-weight: 600;
      font-family: sans-serif;
  }
  
  @media (min-width: 769px) {
      .list-item {
          height: 60px;
      }
      .menu-title {
          height: 50px;
          padding-top: 20px;
          padding-bottom: 20px;
      }
  }
  /*　ハンバーガーボタン　*/
  
  .hamburger {
      cursor: pointer;
      display: block;
      position: fixed;
      z-index: 13;
      right: 5px;
      top: 5px;
      width: 42px;
      height: 42px;
      cursor: pointer;
      text-align: center;
  }
  
  .hamburger span {
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      left: 6px;
      background: #b75f5f;
      -webkit-transition: 0.5s ease-in-out;
      -moz-transition: 0.5s ease-in-out;
      transition: 0.5s ease-in-out;
  }
  
  .hamburger span:nth-child(1) {
      top: 10px;
  }
  
  .hamburger span:nth-child(2) {
      top: 20px;
  }
  
  .hamburger span:nth-child(3) {
      top: 30px;
  }
  
  @media (min-width: 769px) {
      .hamburger {
          display: block;
          position: fixed;
          z-index: 13;
          right: 13px;
          top: 12px;
          width: 42px;
          height: 42px;
          cursor: pointer;
          text-align: center;
      }
      .hamburger span {
          display: block;
          position: absolute;
          width: 30px;
          height: 2px;
          left: 6px;
          background: #b75f5f;
          -webkit-transition: 0.5s ease-in-out;
          -moz-transition: 0.5s ease-in-out;
          transition: 0.5s ease-in-out;
      }
      .hamburger span:nth-child(1) {
          top: 10px;
      }
      .hamburger span:nth-child(2) {
          top: 20px;
      }
      .hamburger span:nth-child(3) {
          top: 30px;
      }
  }
  /* ナビ開いてる時のボタン */
  
  .hamburger.active span:nth-child(1) {
      top: 16px;
      left: 6px;
      -webkit-transform: rotate(315deg);
      -moz-transform: rotate(315deg);
      transform: rotate(315deg);
  }
  
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
      top: 16px;
      -webkit-transform: rotate(-315deg);
      -moz-transform: rotate(-315deg);
      transform: rotate(-315deg);
  }
  
  nav.globalMenuSp {
      position: fixed;
      z-index: 12;
      top: 0;
      left: 0;
      color: #000;
      background: #fff;
      text-align: center;
      transform: translateX(100%);
      transition: all 0.6s;
      width: 100%;
      overflow-y: scroll;
  }
  
  .globalMenuSp::-webkit-scrollbar {
      display: none;
  }
  
  nav.globalMenuSp ul {
      background: rgb(160, 159, 159);
      margin: 0 auto;
      padding: 0;
      width: 100%;
  }
  
  nav.globalMenuSp ul li {
      list-style-type: none;
      padding: 0;
      width: 100%;
      height: auto;
      border-bottom: 1px solid #fff;
  }
  
  nav.globalMenuSp ul li:last-child {
      padding-bottom: 0;
      border-bottom: none;
  }
  
  nav.globalMenuSp ul li:hover {
      background: #b0b0b0;
  }
  /* このクラスを、jQueryで付与・削除する */
  
  nav.globalMenuSp.active {
      transform: translateX(0%);
  }
  /* アコーディオン */
  
  .contents_menu {
      font-size: 1em;
      display: none;
      text-decoration: none;
  }
  
  .cencept_pa {
      width: 100%;
      text-align: center;
      display: inline-block;
  }
  
  .cencept_pa .concept {
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      text-align: left;
      width: 98%;
      padding-left: 7px;
      padding-right: 7px;
      display: inline-block;
  }
  
  @media (min-width: 769px) {
      .cencept_pa .concept {
          width: 50%;
          text-align: left;
          display: inline-block;
      }
  }
  
  .account_item {
      margin-top: 1em;
      color: #2F96BB;
      font-weight: bold;
  }
  
  .small2 {
      font-size: 0.8em;
  }
  
  .account_item {
      margin-top: 1em;
      color: #2F96BB;
      font-weight: bold;
  }
  
  #account_mail1_code {
      margin-top: 8px;
      margin-right: 3px;
      font-size: 1em;
      height: 30px;
      text-align: center;
      border-radius: 4px;
  }
  
  .alert_msg {
      margin-top: 13px;
      font-size: 0.9em;
      padding-bottom: 10px;
      color: #4682b4;
      font-weight: bold;
  }
  
  #apply_msg {
      font-size: 0.9em;
      color: #4682b4;
      font-weight: bold;
  }
  
  .regist_kakunin {
      padding-top: 5px;
      font-weight: bold;
      font-size: 1.1em;
      color: #6f95c3;
  }
  
  .mail_reg_btn {
      cursor: pointer;
      font-size: 1em;
      padding: 5px;
      border-radius: 6px;
      border-color: #89B700;
      width: fit-content;
      color: #FFF;
      background: #89B700;
  }
  
  .anken_regist_kakunin {
      width: 100%;
  }
  
  #email3_code {
      margin-right: 5px;
  }
  
  .code_btn {
      cursor: pointer;
      margin-left: 5px;
  }
  
  .change_status2 {
      cursor: pointer;
      padding: 5px;
      border-radius: 6px;
      border-color: #68889e;
      width: fit-content;
      color: #FFF;
      background: #68889e;
  }
  
  .change_status {
      font-weight: bold;
      cursor: pointer;
      padding: 10px;
      border-radius: 6px;
      border-color: #89B700;
      width: fit-content;
      color: #FFF;
      background: #89B700;
  }
  
  .contact_list_btn {
      cursor: pointer;
      color: #2F96BB;
      text-decoration: underline;
      font-weight: bold;
  }
  
  .active {
      text-decoration: none;
  }
  
  #input_check {
      display: block;
      margin: 0 auto;
      text-align: center;
  }
  
  #input_check2 {
      display: block;
      margin: 0 auto;
      text-align: center;
  }
  
  .input_check2_wrapper {
      text-align: center;
  }
  
  .input_check2 {
      display: inline-block;
      width: fit-content;
      border-style: hidden;
      text-align: center;
      margin-top: 5px;
      margin-left: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 0.8em;
      background-color: #595658;
      font-weight: 700;
  }
  
  #plan_box {
      font-size: 1.3em;
      margin-top: 10px;
      margin-bottom: 10px;
      font-weight: bold;
      text-align: center;
      color: #4c7ba1;
  }
  
  .bnts {
      margin-top: 15px;
      display: flex;
      justify-content: center;
  }
  
  .contact_change_btn:hover {
      background-color: #7e7979;
  }
  
  .contact_change_btn {
      margin: 0 auto;
      cursor: pointer;
      text-align: center;
      margin-top: 15px;
      margin-bottom: 10px;
      text-align: center;
      font-size: 0.9em;
      padding: 5px 15px;
      border-radius: 6px;
      border-color: #68889e;
      width: fit-content;
      color: #FFF;
      background: #68889e;
  }
  
  .id_change {
      margin-top: 15px;
  }
  
  #account_pass1 {
      margin: 0 auto;
  }
  
  .change_plan_btn {
      display: inline-block;
      vertical-align: middle;
      margin: 0 5px;
      text-align: center;
      width: fit-content;
      cursor: pointer;
      font-size: 1em;
      padding: 5px 21px;
      border-radius: 6px;
      border-color: #68889e;
      color: #FFF;
      background: #68889e;
  }
  
  .here {
      font-weight: bold;
      color: #2F96BB;
  }
  
  .mail2 {
      text-align: center;
  }
  
  #contact1 {
      margin-bottom: 10xp;
  }
  
  #stripe_status {
      text-align: center;
      font-size: 1.1em;
      color: #a70b1e;
      font-weight: bold;
      margin-top: 10px;
  }
  
  .close_btn_modal1 {
      cursor: pointer;
      font-size: 1em;
      z-index: 3;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 8px;
      padding: 5px 10px;
      font-size: 0.8em;
      margin: 2px 0px 5px 0px;
      background: #4682b4;
      border-style: hidden;
  }
  
  .close_btn_tell {
      cursor: pointer;
      font-size: 1.2em;
      z-index: 3;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 8px;
      padding: 5px 10px;
      margin: 2px 0px 5px 0px;
      background: #4682b4;
      border-style: hidden;
  }
  
  .history_close {
      cursor: pointer;
      font-size: 0.8em;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 6px;
      padding: 3px 10px;
      background: #4682b4;
      border-style: hidden;
  }
  
  .tensaku_close {
      cursor: pointer;
      font-size: 0.9em;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 2px;
      padding: 1px 2px;
      background: #b1b1b2;
      border-style: hidden;
  }
  
  #correct_yaku {
      text-align: left;
  }
  
  #history {
      margin: 0 auto;
      text-align: center;
      width: fit-content;
      font-size: 0.9em;
      font-weight: bold;
      margin-top: 2px;
      margin-bottom: 5px;
      background-color: #4682b4;
      color: #FFF;
      padding: 1px 20px;
      border-radius: 100px;
  }
  
  .your_comment {
      color: darkgreen;
      font-weight: bold;
  }
  
  .history_contents {
      padding: 5px 5px;
      border-radius: 6px;
      border: 1px solid #54685e;
      background-color: #FFF;
      overflow-y: auto;
  }
  
  @media screen and (max-width: 768px) {
      .history_contents {
          max-height: 220px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .history_contents {
          max-height: 220px;
      }
  }
  
  .each_word {
      padding-left: 7px;
      color: #2a657b;
  }
  
  .each_word input[type="checkbox"] {
      margin-right: 2px;
  }
  
  #word_list {
      margin-top: 5px;
  }
  
  .popup {
      text-align: center;
      display: none;
      position: fixed;
      bottom: 70px;
      right: 20px;
      z-index: 97;
      border: 2px solid #85b0c9;
      background-color: #f1f1f1;
      padding: 4px;
      border-radius: 15px;
      color: #FFF;
      font-size: 0.9em;
      font-weight: bolder;
      width: fit-content;
      height: fit-content;
      background-color: #2c8caf;
      box-shadow: 0px 2px 2px 1px #bebebe;
  }
  
  .popup {
      text-align: center;
      display: none;
      position: fixed;
      right: 20px;
      z-index: 97;
      border: 2px solid #85b0c9;
      background-color: #f1f1f1;
      padding: 4px;
      border-radius: 15px;
      color: #FFF;
      font-size: 0.9em;
      font-weight: bolder;
      width: fit-content;
      height: fit-content;
      background-color: #2c8caf;
      box-shadow: 0px 2px 2px 1px #bebebe;
  }
  
  @media screen and (max-width: 768px) {
      .popup {
          bottom: 5px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .popup {
          bottom: 70px;
      }
  }
  
  @media screen and (max-width: 768px) {
      .tango_cho {
          font-size: 0.9em;
      }
  }
  
  @media screen and (min-width: 769px) {
      .tango_cho {
          font-size: 0.9em;
      }
  }
  
  @media screen and (max-width: 768px) {
      .eitango {
          margin-right: 3px;
          font-size: 1.4em;
          margin-top: 45px;
      }
      .jptango {
          margin-top: 20px;
          font-size: 1.3em;
          margin-bottom: 50px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .eitango {
          margin-right: 3px;
          font-size: 1.4em;
          margin-top: 40px;
      }
      .jptango {
          margin-top: 20px;
          font-size: 1.3em;
          margin-bottom: 20px;
      }
  }
  
  .tango {
      width: 60px;
      height: auto;
  }
  /* SP吹き出し*/
  
  .bubble04 {
      position: relative;
      display: inline-block;
      width: fit-content;
      width: 250px;
      word-break: break-all;
      text-align: left;
      color: #FFF;
      padding: 9px;
      margin-left: 10px;
      background-color: #488aa0;
      border-radius: 12px;
  }
  
  .bubble04:before {
      content: '';
      position: absolute;
      display: block;
      border-style: solid;
      border-color: transparent #488aa0;
      border-width: 10px 10px 10px 0;
      top: 50%;
      left: -10px;
      margin-top: -10px;
  }
  
  @media (min-width: 769px) {
      /* left side */
      .bubble04 {
          position: relative;
          display: inline-block;
          width: fit-content;
          width: 250px;
          word-break: break-all;
          text-align: left;
          color: #FFF;
          padding: 9px;
          margin-left: 10px;
          background-color: #488aa0;
          border-radius: 12px;
      }
      .bubble04:before {
          content: '';
          position: absolute;
          display: block;
          border-style: solid;
          border-color: transparent #488aa0;
          border-width: 10px 10px 10px 0;
          top: 50%;
          left: -10px;
          margin-top: -10px;
      }
  }
  
  @media screen and (max-width: 768px) {
      .kessai {
          text-align: left;
          padding-left: 8px;
          padding-right: 8px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .kessai {
          text-align: left;
          padding-left: 12px;
          padding-right: 12px;
      }
  }
  
  .kessai a {
      color: black;
  }
  
  .kessai a:visited {
      color: black;
  }
  
  @media screen and (max-width: 768px) {
      .faq_content {
          width: 100%;
          background-color: #FFF;
          border-radius: 6px;
          margin-bottom: 10px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .faq_content {
          margin: 0 auto;
          width: 50%;
          background-color: #FFF;
          border-radius: 6px;
          margin-bottom: 10px;
      }
  }
  
  .faq_content2 {
      padding: 10px;
  }
  
  .faq_q {
      padding-left: 5px;
      padding-right: 5px;
      color: #FFF;
      font-weight: bold;
      width: 2em;
      height: 1.5em;
      border-radius: 40%;
      background-color: #89B700;
      /* 適宜、円形要素に影をつけるための設定 */
  }
  
  .faq_a {
      padding-left: 5px;
      padding-right: 5px;
      color: #FFF;
      font-weight: bold;
      width: 2em;
      height: 1.5em;
      border-radius: 40%;
      background-color: #bf1e1e;
      /* 適宜、円形要素に影をつけるための設定 */
  }
  
  .more {
      font-size: 1em;
      cursor: pointer;
      font-weight: bold;
      color: #535151;
      margin-top: 10px;
      text-decoration: underline;
  }
  
  .more_news_btn {
      text-align: center;
      font-size: 1em;
      cursor: pointer;
      font-weight: bold;
      color: #535151;
      margin-top: 10px;
      text-decoration: underline;
  }
  
  .more_dantai_btn {
      text-align: center;
      font-size: 1em;
      cursor: pointer;
      font-weight: bold;
      color: #535151;
      text-decoration: underline;
  }
  
  @media screen and (max-width: 768px) {
      .mike_access {
          text-align: center;
          width: 70%;
          height: auto;
      }
  }
  
  @media screen and (min-width: 769px) {
      .mike_access {
          text-align: center;
          width: 350px;
          height: auto;
      }
  }
  
  .setting_icon {
      margin-top: 4px;
      width: 50px;
      height: auto;
  }
  
  @media screen and (max-width: 768px) {
      .setting_iphone {
          width: 80%;
          height: auto;
      }
  }
  
  @media screen and (min-width: 769px) {
      .setting_iphone {
          width: 432px;
          height: auto;
      }
  }
  
  .total_all_text_box {
      text-align: center;
  }
  
  .total_all_text {
      font-size: 2em;
      color: #a61f1f;
      font-weight: bold;
  }
  
  .total_all_text_ave {
      font-size: 2em;
      color: #a61f1f;
      font-weight: bold;
  }
  
  .total_all_study1 {
      font-size: 2em;
      color: #a61f1f;
      font-weight: bold;
  }
  
  .total_all_study2 {
      font-size: 2em;
      color: #a61f1f;
      font-weight: bold;
  }
  
  .total_all_text_kaiwa {
      font-size: 2em;
      color: #a61f1f;
      font-weight: bold;
  }
  
  .total_all_text2 {
      font-size: 1em;
      font-weight: bold;
      color: #434547;
  }
  
  #total_all_text {
      margin-top: 20px;
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
  }
  
  .total_all_text_parts {
      margin-top: 20px;
      width: 100%;
      background-color: #FFF;
      border-radius: 6px;
  }
  
  .speakL_data {
      text-align: center;
      font-size: 1.1em;
      color: #525050;
      margin-top: 10px;
      margin-bottom: 10px;
  }
  
  #one_point_loading {
      margin: 0 auto;
  }
  
  .one_point_loading {
      text-align: center;
      width: 40px;
      height: auto;
  }
  
  .left {
      padding-left: 8px;
      padding-right: 8px;
      text-align: left;
  }
  
  @media screen and (max-width: 768px) {
      .bigger_text {
          position: absolute;
          bottom: 40px;
          left: 50%;
          /* 横方向の中央配置 */
          transform: translateX(-50%);
          /* 横方向の中央配置 */
          font-size: 1em;
          font-weight: bold;
          color: #4b6b85;
      }
  }
  
  @media screen and (min-width: 769px) {
      .bigger_text {
          position: absolute;
          bottom: 80px;
          left: 50%;
          /* 横方向の中央配置 */
          transform: translateX(-50%);
          /* 横方向の中央配置 */
          font-size: 1.4em;
          font-weight: bold;
          color: #4b6b85;
      }
  }
  
  @media screen and (max-width: 768px) {
      .pub_said {
          text-align: left;
      }
  }
  
  @media screen and (min-width: 769px) {
      .pub_said {
          text-align: center;
      }
  }
  
  #button4.inverted {
      color: #ff1493;
      background-color: #FFF;
  }
  
  .onoff_btm {
      margin-bottom: 10px;
  }
  
  .advice_collect {
      color: #a52a2a;
      text-align: left;
      font-weight: bold;
  }
  
  .store {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0 auto;
  }
  
  .app_store {
      max-width: 40%;
      height: auto;
  }
  
  .store_text {
      padding-left: 5px;
      padding-right: 5px;
      margin-top: 15px;
      font-size: 0.9em;
  }
  
  .store_text a {
      color: black;
  }
  
  .store_text a:visited {
      color: black;
  }
  
  .custom-swal-qr {
      max-width: 80%;
  }
  
  .qr_code {
      text-align: center;
  }
  
  .apps {
      text-align: center;
  }
  
  a.apple_link,
  a.apple_link:visited {
      color: black;
  }
  
  .apple_link {
      text-decoration: underline;
  }
  
  .dantai {
      text-align: left;
      width: fit-content;
      margin: 0 auto;
      padding-left: 5px;
      padding-right: 5px;
      padding-left: 20xp;
  }
  
  .thinking {
      display: none;
      height: 6px;
      width: auto;
  }
  
  .clo {
      width: 20px;
      height: 20px;
  }
  
  #accent_skip {
      font-weight: bold;
      font-size: 1.1em;
      padding: 5px 8px;
      cursor: pointer;
      border-radius: 6px;
      border-color: #728e1f;
      width: fit-content;
      color: #FFF;
      background: #728e1f;
      box-shadow: none;
      border: none;
  }
  
  #accent_result {
      font-size: 1.3em;
      color: #308aaa;
      font-weight: bold;
  }
  
  #accent_nigate {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 12px;
      height: 50px;
      font-size: 1.1em;
      background-color: #b22222;
      font-weight: 700;
  }
  
  #button3_accent {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 12px;
      height: 50px;
      font-size: 1.1em;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  #teddy_a {
      display: flex;
      align-items: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      cursor: pointer;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 10px 12px;
      font-size: 1.1em;
      font-weight: 700;
      background-color: #4a83b2;
      width: 220px;
      max-width: 220px;
  }
  
  #level_check_test {
      display: inline;
      margin: 0 auto;
      cursor: pointer;
      text-align: center;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      height: 50px;
      font-size: 1.1em;
      background-color: #4a83b2;
      font-weight: 700;
      min-width: 170px;
  }
  
  .top_menu {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 25px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 12px;
      height: 50px;
      font-size: 1em;
      background-color: #32597b;
      font-weight: 700;
  }
  
  #start_accent {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 50%;
      border-style: hidden;
      padding: 5px 12px;
      height: 100px;
      width: 100px;
      font-size: 1.1em;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  #stop_accent {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 50%;
      border-style: hidden;
      padding: 5px 12px;
      height: 100px;
      width: 100px;
      font-size: 1.1em;
      background-color: #ca3309;
      font-weight: 700;
  }
  
  #accent_ok {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      margin-bottom: 5px;
      color: #fff;
      border-radius: 12px;
      border-style: hidden;
      padding: 5px 10px;
      height: 40px;
      font-size: 1.2em;
      background-color: #ff1493;
      font-weight: 700;
  }
  
  #accent_skip {
      font-weight: bold;
      font-size: 1.1em;
      padding: 5px 8px;
      cursor: pointer;
      border-radius: 6px;
      border-color: #728e1f;
      width: fit-content;
      color: #FFF;
      background: #728e1f;
  }
  
  #accent_result {
      font-size: 1.3em;
      color: #308aaa;
      font-weight: bold;
  }
  
  .speak_turn {
      text-align: center;
      height: 25px;
      width: auto;
  }
  
  .speak_turn_box {
      height: 25px;
  }
  
  .for_member {
      text-align: left;
  }
  
  .voicetalk {
      width: 100%;
      margin-bottom: 15px;
  }
  
  .header_ani {
      position: relative;
      text-align: center;
      background: linear-gradient(60deg, rgba(146, 170, 198, 1) 0%, rgba(0, 172, 193, 1) 100%);
      color: white;
  }
  
  .inner-header {
      height: 100vh;
      width: 100%;
      margin: 0;
      padding: 0;
  }
  
  .flex {
      /*Flexbox for containers*/
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
  }
  
  .waves {
      position: relative;
      width: 100%;
      height: 15vh;
      margin-bottom: -7px;
      /*Fix for safari gap*/
      min-height: 100px;
      max-height: 150px;
  }
  /* Animation */
  
  .parallax>use {
      animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
  }
  
  .parallax>use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
  }
  
  .parallax>use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
  }
  
  .parallax>use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
  }
  
  .parallax>use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
  }
  
  @keyframes move-forever {
      0% {
          transform: translate3d(-90px, 0, 0);
      }
      100% {
          transform: translate3d(85px, 0, 0);
      }
  }
  /*Shrinking for mobile*/
  
  @media (max-width: 768px) {
      .waves {
          height: 60px;
          min-height: 60px;
      }
  }
  
  #footer_contents {
      position: fixed;
      bottom: 0;
  }
  
  .basic_q {
      border: none;
      padding: 5px 10px;
      margin-top: 3px;
      margin-right: 5px;
      margin-bottom: 8px;
      font-size: 0.9em;
      cursor: pointer;
      border-radius: 6px;
      width: fit-content;
      color: #FFF;
      font-weight: bold;
      background: #4682b4;
  }
  
  .red2 {
      background: #D91718;
  }
  
  @media screen and (max-width: 768px) {
      .basic_q {
          padding: 5px 10px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .basic_q {
          padding: 10px 15px;
      }
  }
  
  .lesson_msg {
      text-align: left;
      color: #244058;
  }
  
  .next {
      margin-top: 15px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 10px 10px;
      background-color: #ff1493;
      font-weight: 700;
      font-size: 1.1em;
      margin-bottom: 20px;
  }
  
  .active-button2 {
      background-color: #89B700;
  }
  
  #basic_setsumon {
      text-align: left;
  }
  
  .teacher_text {
      font-weight: bold;
      color: #6e9657;
  }
  
  .mohan_text {
      font-weight: bold;
      color: #4d4f4c;
      font-size: 0.9em;
  }
  
  .Your_sentence {
      font-weight: bold;
      color: #6495ed;
  }
  
  #chart01 {
      pointer-events: none;
  }
  
  #ok_button.inverted {
      color: #FFF;
      background-color: #6b84b3;
  }
  
  .Level_tittle {
      text-align: center;
      font-size: 0.9em;
      color: #2a657b;
      font-weight: bold;
  }
  
  .app_for_sm {
      margin-top: 5px;
  }
  
  @media screen and (max-width: 768px) {
      .group_nagara {
          font-size: 0.9em;
          color: #566a90;
          text-align: left;
      }
  }
  
  @media screen and (min-width: 769px) {
      .group_nagara {
          font-size: 0.9em;
          color: #566a90;
          text-align: center;
      }
  }
  
  .yajirushi {
      color: #89B700;
      padding-left: 3px;
      padding-right: 3px;
      font-weight: bold;
  }
  
  #mailtext_group {
      padding: 4px;
  }
  
  @media screen and (max-width: 768px) {
      #niyou_group {
          padding: 4px;
          font-size: 1em;
          width: 95%;
      }
  }
  
  @media screen and (min-width: 769px) {
      #niyou_group {
          padding: 4px;
          font-size: 1em;
          width: 75%;
      }
  }
  
  .group_toiawase {
      margin: 0 auto;
      text-align: center;
      font-weight: bold;
      font-size: 1em;
      padding: 5px 20px;
      cursor: pointer;
      border-radius: 4px;
      cursor: pointer;
      border-color: #728e1f;
      width: 120px;
      color: #FFF;
      background: #728e1f;
      margin-bottom: 15px;
  }
  
  .Email_address {
      font-weight: bold;
      color: #566a90;
  }
  
  @media screen and (max-width: 768px) {
      .student_data {
          margin: 0 auto;
          width: 100%;
          height: auto;
      }
  }
  
  @media screen and (min-width: 769px) {
      .student_data {
          margin: 0 auto;
          width: 100%;
          height: auto;
      }
  }
  
  .check_link {
      font-weight: bold;
      color: #2c8caf;
  }
  
  .bamen {
      background-color: #FFF;
      border-radius: 6px;
      padding: 10px;
  }
  
  .bamen_btn {
      text-align: center;
      border: none;
      padding: 5px 10px;
      margin-top: 3px;
      margin-right: 5px;
      margin-bottom: 8px;
      font-size: 0.9em;
      cursor: pointer;
      border-radius: 6px;
      width: fit-content;
      color: #FFF;
      font-weight: bold;
      background-color: #576676;
  }
  
  @media screen and (max-width: 768px) {
      .bamen_btn {
          padding: 5px 10px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .bamen_btn {
          padding: 10px 15px;
      }
  }
  
  #textInput {
      border-radius: 5px;
      font-weight: bold;
      line-height: 1.2em;
      width: 90%;
      font-size: 1em;
      color: #FFF;
      margin: 0 auto;
      background: #253256;
  }
  
  #textInput_bamen {
      padding-left: 5px;
      padding-top: 5px;
      border-radius: 5px;
      line-height: 1.2em;
      width: 99%;
      font-size: 1em;
      margin: 0 auto;
      background: #FFF;
      border: 1px solid #54685e;
  }
  
  .button-container_bamen {
      display: flex;
      justify-content: center;
  }
  
  .send_bamen,
  .send_bamen_close {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 1em;
      padding: 5px 15px;
      cursor: pointer;
      border-radius: 6px;
      width: fit-content;
      color: #FFF;
      background: #413e3f;
      margin-right: 10px;
      /* ボタン間の間隔 */
  }
  
  #current_lesson {
      font-weight: bold;
      color: #324d72;
  }
  
  .small_text3 {
      text-align: center;
      font-size: 0.8em;
  }
  
  .small_text3_left {
      text-align: left;
      font-size: 0.8em;
  }
  
  @media screen and (max-width: 768px) {
      .small_text3_center_left {
          text-align: left;
          font-size: 0.8em;
      }
  }
  
  @media screen and (min-width: 769px) {
      .small_text3_center_left {
          text-align: center;
          font-size: 0.8em;
      }
  }
  
  .reloclub {
      font-size: 1.2em;
      color: #a52a2a;
      font-weight: bold;
      margin-bottom: 15px;
  }
  
  .alisa_rest_overlay {
      position: absolute;
      top: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 240px;
      height: 240px;
      background: rgba(0, 0, 0, 0.9);
      z-index: 3;
  }
  
  .zoon2 {
      position: absolute;
      width: fit-content;
      top: -2%;
      right: -3%;
      font-size: 0.9em;
      color: #FFF;
      font-weight: bold;
      text-align: right;
      width: 25px;
      height: auto;
      z-index: 4;
  }
  
  .q_speaker2 {
      margin-top: 2px;
      cursor: pointer;
      width: 30px;
      height: 30px;
  }
  
  #q_speaker2 {
      text-align: center;
  }
  
  .popup-container_tell {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.75);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
  }
  
  .popup-content_tell {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      text-align: center;
      width: 80%;
      max-width: 600px;
      min-height: 90%;
      min-width: 90%;
  }
  /* イコライザー風アニメーションの基本スタイル */
  
  .talking_tell {
      display: inline-block;
      width: 2px;
      height: 10px;
      background: #ff6347;
      margin: 0 5px;
      animation: equalize 0.8s infinite ease-in-out;
      transform-origin: bottom;
  }
  /* アニメーションの高さをカスタマイズ */
  
  @keyframes equalize {
      0%,
      100% {
          transform: scaleY(1);
      }
      50% {
          transform: scaleY(4);
      }
      /* 2倍の高さまで伸ばす */
  }
  
  .talking_tell:nth-child(1) {
      animation: equalize1 0.7s infinite ease-in-out;
  }
  
  .talking_tell:nth-child(2) {
      animation: equalize2 0.8s infinite ease-in-out;
  }
  
  .talking_tell:nth-child(3) {
      animation: equalize3 0.9s infinite ease-in-out;
  }
  
  .talking_tell:nth-child(4) {
      animation: equalize4 0.6s infinite ease-in-out;
  }
  
  .talking_tell:nth-child(5) {
      animation: equalize3 0.5s infinite ease-in-out;
  }
  
  .talking_tell:nth-child(6) {
      animation: equalize2 0.3s infinite ease-in-out;
  }
  
  .talking_tell:nth-child(7) {
      animation: equalize1 0.7s infinite ease-in-out;
  }
  
  @keyframes equalize1 {
      0%,
      100% {
          transform: scaleY(0.5);
      }
      /* 最も低い */
      50% {
          transform: scaleY(1);
      }
  }
  
  @keyframes equalize2 {
      0%,
      100% {
          transform: scaleY(0.75);
      }
      /* 低い */
      50% {
          transform: scaleY(1.5);
      }
  }
  
  @keyframes equalize3 {
      0%,
      100% {
          transform: scaleY(1);
      }
      /* 中間の高さ */
      50% {
          transform: scaleY(2);
      }
  }
  
  @keyframes equalize4 {
      0%,
      100% {
          transform: scaleY(1.25);
      }
      /* 最も高い */
      50% {
          transform: scaleY(2.5);
      }
  }
  /* それぞれのバーにアニメーションを適用 */
  
  .talking_tell:nth-child(1),
  .talking_tell:nth-child(7) {
      animation-name: equalize1;
  }
  
  .talking_tell:nth-child(2),
  .talking_tell:nth-child(6) {
      animation-name: equalize2;
  }
  
  .talking_tell:nth-child(3),
  .talking_tell:nth-child(5) {
      animation-name: equalize3;
  }
  
  .talking_tell:nth-child(4) {
      animation-name: equalize4;
  }
  
  .text_honyaku_tell {
      padding-top: 0px;
      display: flex;
      justify-content: center;
      text-align: center;
      height: 8px;
  }
  
  .online-status {
      display: flex;
      align-items: center;
  }
  
  .online-indicator {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #4c7894;
      animation: blinkAnimation 1.5s infinite;
  }
  
  .online-line {
      flex-grow: 1;
      height: 2px;
      background-color: #4c7894;
      margin: 0 10px;
  }
  
  @keyframes blinkAnimation {
      0%,
      100% {
          opacity: 1;
      }
      50% {
          opacity: 0.1;
      }
  }
  
  .online-status_parent {
      margin: 0 auto;
      width: 40%;
  }
  
  .tell {
      padding-left: 4px;
      width: 40px;
      height: auto;
  }
  
  .tell_icon {
      padding-left: 4px;
      width: 30px;
      height: auto;
  }
  
  .checkmark009 {
      padding-right: 5px;
      padding-left: 24px;
      position: relative;
  }
  
  .checkmark009:before,
  .checkmark009:after {
      content: "";
      display: block;
      position: absolute;
  }
  
  .checkmark009:before {
      width: 1.1em;
      height: 1.1em;
      border-radius: 0.7em;
      background: #14ba17;
      border: 1px solid #14ba17;
      left: 0;
      top: 0.1em;
  }
  
  .checkmark009:after {
      border-left: 3px solid #FFF;
      border-bottom: 3px solid #FFF;
      width: 0.5em;
      height: 0.3em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      left: 0.3em;
      top: 0.4em;
  }
  
  .checkmark010 {
      padding-right: 5px;
      padding-left: 24px;
      position: relative;
  }
  
  .checkmark010:before,
  .checkmark010:after {
      content: "";
      display: block;
      position: absolute;
  }
  
  .checkmark010:before {
      width: 1.1em;
      height: 1.1em;
      border-radius: 0.7em;
      background: #b6409a;
      border: 1px solid #b6409a;
      left: 0;
      top: 0.1em;
  }
  
  .checkmark010:after {
      border-left: 3px solid #FFF;
      border-bottom: 3px solid #FFF;
      width: 0.5em;
      height: 0.3em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      left: 0.3em;
      top: 0.4em;
  }
  
  .checkbox-auto-correct {
      margin-top: 8px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      margin-bottom: 5px;
  }
  
  .jidou {
      color: #464c5a;
  }
  
  .checkbox-auto-correct label {
      margin-left: 5px;
  }
  
  .info_awesome {
      color: #c0bcb7;
      font-size: 1.1em;
      padding-left: 2px;
  }
  
  .checkbox-auto-correct input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #ccc;
      border-radius: 4px;
      background-color: white;
      outline: none;
      cursor: pointer;
  }
  
  .checkbox-auto-correct input[type="checkbox"]:checked {
      background-color: #4a83b2;
      border-color: #4a83b2;
  }
  
  .checkbox-auto-correct input[type="checkbox"]:checked::before {
      content: "\2713";
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 20px;
      color: white;
      font-size: 14px;
  }
  
  @media screen and (max-width: 768px) {
      .accent_sample {
          text-align: left;
          color: rgb(68, 69, 68);
          font-weight: bold;
      }
      .accent_users {
          text-align: left;
          font-weight: bold;
      }
      .accent_result_kao {
          font-size: 1.1em;
      }
  }
  
  @media screen and (min-width: 769px) {
      .accent_sample {
          text-align: left;
          color: rgb(68, 69, 68);
          font-weight: bold;
      }
      .accent_users {
          text-align: left;
          font-weight: bold;
      }
      .accent_result_kao {
          font-size: 1.1em;
      }
  }
  
  .basic_menu {
      text-align: left;
  }
  
  .now_in {
      font-size: 1.1em;
      color: #ff1493;
  }
  
  .pdf {
      font-size: 1.1em;
      font-weight: bold;
      text-decoration: underline;
      color: #89B700;
      cursor: pointer;
  }
  
  .hatsuon-button {
      font-size: 0.8em;
      cursor: pointer;
      display: inline-block;
      margin-top: 5px;
      color: #fff;
      border-radius: 8px;
      border-style: hidden;
      padding: 2px 3px;
      height: fit-content;
  }
  
  .level2 {
      background-color: #89B700;
      -webkit-box-shadow: 0 5px 0 #668606;
      box-shadow: 0 5px 0 #668606;
  }
  
  .level1 {
      background-color: #FF9900;
      -webkit-box-shadow: 0 5px 0 #d98507;
      box-shadow: 0 5px 0 #d98507;
  }
  
  .level3 {
      background-color: #00bfff;
      -webkit-box-shadow: 0 5px 0 #0783ad;
      box-shadow: 0 5px 0 #0783ad;
  }
  
  .popup_alisa {
      cursor: pointer;
      text-align: center;
      position: fixed;
      left: 30px;
      z-index: 97;
      width: 60px;
      height: 60px;
      background-color: transparent;
  }
  
  @media screen and (max-width: 768px) {
      .popup_alisa {
          bottom: 31px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .popup_alisa {
          bottom: 97px;
      }
  }
  
  .popup_alisa_level {
      cursor: pointer;
      text-align: center;
      position: fixed;
      left: 5px;
      z-index: 97;
      background-color: transparent;
  }
  
  @media screen and (max-width: 768px) {
      .popup_alisa_level {
          bottom: 8px;
      }
  }
  
  @media screen and (min-width: 769px) {
      .popup_alisa_level {
          bottom: 70px;
      }
  }
  
  @keyframes float_teddy {
      0% {
          transform: translateY(0px);
      }
      50% {
          transform: translateY(-10px);
      }
      100% {
          transform: translateY(0px);
      }
  }
  
  .popup_alisa {
      animation: float_teddy 3s ease-in-out infinite;
  }
  
  .hatsuon-button-a {
      font-size: 0.8em;
      cursor: pointer;
      display: inline-block;
      margin-top: 5px;
      color: #fff;
      border-radius: 8px;
      border-style: hidden;
      padding: 2px 3px;
      height: fit-content;
  }
  
  .level1-a {
      background-color: #FF9900;
      -webkit-box-shadow: 0 5px 0 #d98507;
      box-shadow: 0 5px 0 #d98507;
      margin-right: 3px;
  }
  
  .level2-a {
      background-color: #89B700;
      -webkit-box-shadow: 0 5px 0 #759908;
      box-shadow: 0 5px 0 #759908;
      margin-right: 3px;
  }
  
  .level3-a {
      background-color: #00bfff;
      -webkit-box-shadow: 0 5px 0 #09a9df;
      box-shadow: 0 5px 0 #09a9df;
      margin-right: 3px;
  }
  
  .teddy_icon {
      padding-left: 4px;
      width: 30px;
      height: auto;
  }
  
  .alertbook {
      width: 80%;
      max-width: 600px;
      height: auto;
  }
  
  .sound_equalizer {
      z-index: 5;
      position: absolute;
      bottom: 0%;
      right: 0%;
      left: 0%;
      height: 50px;
      display: none;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 3px;
      width: 100%;
      height: 100px;
      padding: 1px;
      border-radius: 10px;
      overflow: hidden;
  }
  
  .equalizer_bar {
      width: 8px;
      background-color: #a9a9a9;
      height: 20%;
      transition: height 0.1s ease-out;
  }
  /* 動きをランダム化するために異なる遅延を設定 */
  
  .equalizer_bar:nth-child(1) {
      animation-delay: 0.1s;
  }
  
  .equalizer_bar:nth-child(2) {
      animation-delay: 0.2s;
  }
  
  .equalizer_bar:nth-child(3) {
      animation-delay: 0.3s;
  }
  
  .equalizer_bar:nth-child(4) {
      animation-delay: 0.4s;
  }
  
  .equalizer_bar:nth-child(5) {
      animation-delay: 0.5s;
  }
  /* アニメーションの定義 */
  
  @keyframes bounce {
      0%,
      100% {
          height: 15%;
      }
      50% {
          height: 100%;
      }
  }
  
  #correct_btn {
      display: inline-block;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 10px;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 18px;
      height: 30px;
      font-size: 0.9em;
      background-color: #464c5a;
      font-weight: 700;
  }
  
  #button_to_top {
      margin: 0 auto;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 6px;
      border-style: hidden;
      padding: 5px 12px;
      height: 50px;
      font-size: 1.1em;
      background-color: #050a30;
      font-weight: 700;
      margin-top: 20px;
  }
  
  .button_to_top {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  
  .logo_SpeakL {
      display: block;
      cursor: pointer;
      margin-bottom: 10px;
      position: absolute;
      margin: 0 auto;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      width: 200px;
      height: auto;
  }
  
  .logo_SpeakL2 {
      display: block;
      cursor: pointer;
      width: fit-content;
      margin: 0 auto;
      margin-top: 30px;
      width: 200px;
      height: auto;
  }
  
  .main_btn_speakl:hover {
      background-color: rgba(5, 10, 48, 1);
  }
  
  .main_btn_speakl {
      display: block;
      margin: 10px auto;
      text-align: center;
      color: #fff;
      border-radius: 20px;
      border-style: hidden;
      padding: 10px 20px;
      font-size: 1.2em;
      width: 80%;
      max-width: 300px;
      background-color: rgb(5, 10, 48);
      font-weight: bold;
      position: relative;
      z-index: 3;
      cursor: pointer;
  }
  
  @media screen and (max-width: 768px) {
      .main_btn_speakl2 {
          display: none;
          text-align: center;
          color: rgb(5, 10, 48);
          border-style: hidden;
          padding-top: 10px;
          padding-bottom: 10px;
          font-size: 0.9em;
          width: 100%;
          margin-bottom: 20px;
          background-color: #FFF;
          font-weight: bold;
          position: relative;
          z-index: 3;
          cursor: pointer;
      }
  }
  
  @media screen and (min-width: 769px) {
      .main_btn_speakl2 {
          display: none;
          text-align: center;
          color: rgb(5, 10, 48);
          border-style: hidden;
          padding-top: 10px;
          padding-bottom: 10px;
          font-size: 0.9em;
          width: 1024px;
          margin-bottom: 20px;
          background-color: #FFF;
          font-weight: bold;
          position: relative;
          z-index: 3;
          cursor: pointer;
      }
  }
  
  @media screen and (max-width: 768px) {
      .back_img_speakl::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.3);
          z-index: 1;
      }
      .main_btns_speakl {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: calc(100% - 400px);
          position: absolute;
          top: 400px;
          left: 0;
          z-index: 2;
      }
      .back_img_speakl {
          display: none;
          height: auto;
          padding-top: 216.67%;
          /* 19.5:9のアスペクト比を維持 */
      }
  }
  
  @media screen and (min-width: 769px) {
      .main_btns_speakl {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          position: absolute;
          top: 550px;
          left: 0;
          z-index: 2;
      }
  }
  
  @media screen and (max-width: 768px) {
      .main_btns_speakl2 {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: calc(100% - 400px);
          position: absolute;
          top: 200px;
          left: 0;
          z-index: 2;
      }
  }
  
  @media screen and (min-width: 769px) {
      .main_btns_speakl2 {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          position: absolute;
          top: 350px;
          left: 0;
          z-index: 2;
      }
  }
  
  .main_contents {
      display: none;
  }
  
  #top_menu_free {
      margin-bottom: 30px;
  }
  /*.advice_result_anime {
     position: fixed;
     top: 20%;
     left: 50%;
     transform: translate(-50%, 0);
     font-size: 19px;
     font-weight: bold;
     text-align: left;
     z-index: 9999;
     opacity: 0;
     color: #66ccff;
     background-color: white;
     padding: 15px 25px;
     border-radius: 10px;
     width: auto;
     max-width: 80%;
     pointer-events: none;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 @media screen and (max-width: 768px) {
     .advice_result_anime {
         font-size: 17px;
     }
 }
 
 .advice_result_anime:after {
     content: '';
     position: absolute;
     top: -10px;
     left: 40%;
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid white;
 }
 
 @keyframes fadeInOut {
     0% {
         opacity: 0;
         transform: translate(-50%, 0) scale(0.9);
     }
     20% {
         opacity: 1;
         transform: translate(-50%, 0) scale(1);
     }
     80% {
         opacity: 1;
         transform: translate(-50%, 0) scale(1);
     }
     100% {
         opacity: 0;
         transform: translate(-50%, 0) scale(0.9);
     }
 }
 
 @keyframes softGlow {
     0%,
     100% {
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }
     50% {
         box-shadow: 0 0 15px rgba(102, 204, 255, 0.6);
     }
 }
 
 .animate-message {
     opacity: 1;
     animation: fadeInOut 2s ease-in-out 1, softGlow 2s ease-in-out infinite;
 }*/
  
  .advice_result_anime_accent {
      position: fixed;
      top: 20%;
      left: 50%;
      transform: translate(-50%, 0);
      font-size: 19px;
      font-weight: bold;
      text-align: left;
      z-index: 9999;
      opacity: 0;
      color: #66ccff;
      background-color: white;
      padding: 15px 25px;
      border-radius: 10px;
      width: auto;
      max-width: 80%;
      pointer-events: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      perspective: 1000px;
  }
  
  @media screen and (max-width: 768px) {
      .advice_result_anime_accent {
          font-size: 13px;
      }
  }
  
  .advice_result_anime_accent:after {
      content: '';
      position: absolute;
      top: -10px;
      left: 40%;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid white;
  }
  
  @keyframes flip3DWithBubble {
      0% {
          transform: translate(-50%, 0) rotateX(90deg);
          opacity: 0;
      }
      25% {
          transform: translate(-50%, 0) rotateX(0deg);
          opacity: 1;
      }
      75% {
          transform: translate(-50%, 0) rotateX(0deg);
          opacity: 1;
      }
      100% {
          transform: translate(-50%, 0) rotateX(-90deg);
          opacity: 0;
      }
  }
  
  @keyframes scaleBubble {
      0%,
      100% {
          transform: translate(-50%, 0) scale(1);
      }
      50% {
          transform: translate(-50%, 0) scale(1.1);
      }
  }
  
  @keyframes softGlowBubble {
      0%,
      100% {
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      50% {
          box-shadow: 0 0 15px rgba(102, 204, 255, 0.6);
      }
  }
  
  .animate-message-accent {
      opacity: 1;
      animation: flip3DWithBubble 3s ease-in-out 1, softGlowBubble 3s ease-in-out infinite;
  }
  
  .animate-message-accent.active {
      animation: flip3DWithBubble 3s ease-in-out 1, scaleBubble 0.5s ease-in-out 0.5s 2, softGlowBubble 3s ease-in-out infinite;
      animation-fill-mode: forwards;
  }
  /*.free_talk_result_anime {
     position: fixed;
     top: 20%;
     left: 50%;
     transform: translate(-50%, 0);
     font-size: 19px;
     font-weight: bold;
     text-align: left;
     z-index: 9999;
     opacity: 0;
     color: #66ccff;
     background-color: white;
     padding: 15px 20px;
     border-radius: 10px;
     width: auto;
     max-width: 95%;
     pointer-events: none;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 @media screen and (max-width: 768px) {
     .free_talk_result_anime {
         font-size: 17px;
     }
 }
 
 .free_talk_result_anime:after {
     content: '';
     position: absolute;
     top: -10px;
     left: 40%;
     width: 0;
     height: 0;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 10px solid white;
 }
 
 @keyframes fadeInOut {
     0% {
         opacity: 0;
         transform: translate(-50%, 0) scale(0.9);
     }
     20% {
         opacity: 1;
         transform: translate(-50%, 0) scale(1);
     }
     80% {
         opacity: 1;
         transform: translate(-50%, 0) scale(1);
     }
     100% {
         opacity: 0;
         transform: translate(-50%, 0) scale(0.9);
     }
 }
 
 @keyframes softGlow {
     0%,
     100% {
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }
     50% {
         box-shadow: 0 0 15px rgba(102, 204, 255, 0.6);
     }
 }
 
 .animate-message-freetalk {
     opacity: 1;
     animation: fadeInOut 3s ease-in-out 1, softGlow 2.2s ease-in-out infinite;
 }*/
  
  .advice_result_anime_visit {
      position: fixed;
      top: 20px;
      right: 10%;
      font-size: 19px;
      font-weight: bold;
      text-align: left;
      z-index: 9999;
      opacity: 0;
      color: #66ccff;
      background-color: white;
      padding: 15px 25px;
      border-radius: 10px;
      width: auto;
      max-width: 80%;
      pointer-events: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      perspective: 1000px;
  }
  
  @media screen and (max-width: 768px) {
      .advice_result_anime_visit {
          font-size: 13px;
          top: 20px;
          right: 5px;
          max-width: 95%;
      }
      .animate-message-visit,
      .animate-message-visit.active {
          animation: none !important;
          transform: none !important;
          opacity: 1;
      }
  }
  
  .advice_result_anime_visit:after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 25%;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid white;
  }
  
  @keyframes flip3DWithBubble {
      0% {
          transform: translate(-50%, 0) rotateX(90deg);
          opacity: 0;
      }
      25% {
          transform: translate(-50%, 0) rotateX(0deg);
          opacity: 1;
      }
      75% {
          transform: translate(-50%, 0) rotateX(0deg);
          opacity: 1;
      }
      100% {
          transform: translate(-50%, 0) rotateX(-90deg);
          opacity: 0;
      }
  }
  
  @keyframes scaleBubble {
      0%,
      100% {
          transform: translate(-50%, 0) scale(1);
      }
      50% {
          transform: translate(-50%, 0) scale(1.1);
      }
  }
  
  @keyframes softGlowBubble {
      0%,
      100% {
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      50% {
          box-shadow: 0 0 15px rgba(102, 204, 255, 0.6);
      }
  }
  
  .animate-message-visit {
      opacity: 1;
      animation: flip3DWithBubble 3s ease-in-out 1, softGlowBubble 3s ease-in-out infinite;
  }
  
  .animate-message-visit.active {
      animation: flip3DWithBubble 3s ease-in-out 1, scaleBubble 0.5s ease-in-out 0.5s 2, softGlowBubble 3s ease-in-out infinite;
      animation-fill-mode: forwards;
  }