@charset "UTF-8";
/*============================
Sass変数
============================*/ /*============================
css変数
============================*/
:root {
  --toolBar_width: 70px;
  --blue_main: #0b74e5;
  --blue_main_rgb: 11, 116, 229;
  --blue_sub: #a7cffb;
  --blue_sub_rgb: 167, 207, 251;
  --blue_bg: #f0f6ff;
  --blue_bg_rgb: 240, 246, 255;
  --mint_main: #15abac;
  --mint_main_rgb: 21, 171, 172;
  --mint_vivid: #44bcbd;
  --mint_vivid_rgb: 68, 188, 189;
  --mint_sub: #a1ddde;
  --mint_sub_rgb: 161, 221, 222;
  --mint_bg01: #ecf9f9;
  --mint_bg01_rgb: 236, 249, 249;
  --mint_bg02: #cdebeb;
  --mint_bg02_rgb: 205, 235, 235;
  --navy_main: #384860;
  --navy_main_rgb: 56, 72, 96;
  --navy_sub: #768aa8;
  --navy_sub_rgb: 118, 138, 168;
  --navy_bg01: #f4f6fa;
  --navy_bg01_rgb: 244, 246, 250;
  --navy_bg02: #dbe3f0;
  --navy_bg02_rgb: 219, 227, 240;
  --red_main: #da0e0e;
  --red_main_rgb: 218, 14, 14;
  --red_sub: #f09f9f;
  --red_sub_rgb: 240, 159, 159;
  --red_bg: #fff0f0;
  --red_bg_rgb: 255, 240, 240;
  --orange_main: #e59500;
  --orange_main_rgb: 229, 149, 0;
  --orange_sub: #fed8a0;
  --orange_sub_rgb: 254, 216, 160;
  --orange_bg: #fef5e7;
  --orange_bg_rgb: 254, 245, 231;
  --text_main: #333;
  --gray_black: #222;
  --gray_icon_border: #dedede;
  --gray_bodybg: #fcfcfc;
  --gray_80: #333333;
  --gray_70: #4d4d4d;
  --gray_60: #666666;
  --gray_50: #808080;
  --gray_40: #999999;
  --gray_30: #b3b3b3;
  --gray_20: #cccccc;
  --gray_10: #e5e5e5;
  --gray_5: #f2f2f2;
  --gray_80_a: rgba(0, 0, 0, 0.8);
  --gray_70_a: rgba(0, 0, 0, 0.7);
  --gray_60_a: rgba(0, 0, 0, 0.6);
  --gray_50_a: rgba(0, 0, 0, 0.5);
  --gray_40_a: rgba(0, 0, 0, 0.4);
  --gray_30_a: rgba(0, 0, 0, 0.3);
  --gray_20_a: rgba(0, 0, 0, 0.2);
  --gray_10_a: rgba(0, 0, 0, 0.1);
  --gray_5_a: rgba(0, 0, 0, 0.05);
  --tameru_dark: #3e7256;
  --tameru_lib: #28a879;
  --tameru_light: #daebe3;
  --tameru_lighter: #f2f8f5;
  --tameru_main: #a2cdb8;
  --fuyasu_dark: #9d5807;
  --fuyasu_lib: #d89208;
  --fuyasu_light: #f6e8ce;
  --fuyasu_lighter: #fcf5ea;
  --fuyasu_main: #e7b965;
  --kasegu_dark: #b93b17;
  --kasegu_lib: #ed6f53;
  --kasegu_light: #fbe3d8;
  --kasegu_lighter: #fdf1ec;
  --kasegu_main: #ecab8d;
  --tsukau_dark: #b1305f;
  --tsukau_lib: #db6ea2;
  --tsukau_light: #f5dfea;
  --tsukau_lighter: #fdf0f6;
  --tsukau_main: #e6a3c3;
  --mamoru_dark: #3465ac;
  --mamoru_lib: #4299eb;
  --mamoru_light: #d6e8f8;
  --mamoru_lighter: #f0f7fd;
  --mamoru_main: #98c4ee;
}

* {
  margin: 0px;
  padding: 0px;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html:has(#main_mypage .content_five_list) {
  scroll-behavior: auto;
}

/* vue modal 対策（#appの外に記載する必要あり） */
.modal-content a:not(.btn) {
  color: var(--blue_main) !important;
}

.modal-footer .btn {
  font-size: 0.875rem;
}

.modal-open #app:has(.modal.reloadAlert) .popover.is_prof {
  z-index: 0;
}

@media screen and (min-width: 768px) {
  .modal-body {
    font-size: 0.875rem;
    line-height: 1.5em;
  }
}
@media screen and (max-width: 767px) {
  body.is_tutorial #app .myPage .popover.is_can {
    z-index: 11000;
  }
}
#app,
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
  font-size: 0.875rem;
  color: var(--text_main);
  font-weight: normal;
  font-variant: normal;
  line-height: 1.5em;
  height: 100%;
  position: relative;
  background-color: var(--gray_bodybg);
  text-align: left;
  word-break: break-all;
}

@media screen and (max-width: 767px) {
  #app,
  body {
    font-size: 0.9375rem;
  }
}
body.is_hidden {
  overflow: hidden;
}

body.modal-open .modal,
body .modal.show {
  z-index: 20000;
}

body.modal-open .modal#passModal,
body .modal#passedModal {
  z-index: 21000;
}

body.modal-open .modal#imgTweetModal {
  z-index: 20001;
}

body .modal.show#imgTweetModal {
  z-index: 20001;
}

body .modal.show#userUnfollowModal,
body .modal.show#reportModal,
body .modal.show#userMuteModal {
  z-index: 20003;
}

body.modal-open .modal.deleteTweetModal {
  z-index: 20002;
}

/* つぶやき固定・解除の確認モーダル（スマホ時） */
#confirmationAddFixedTweetWithinHalfAYearModal,
#confirmationAddFixedTweetOverHalfAYearModal,
#confirmationRemoveFixedTweetWithinHalfAYearModal,
#confirmationRemoveFixedTweetOverHalfAYearModal {
  z-index: 20002;
}

@media screen and (max-width: 767px) {
  body:has(#reportModal.show) .popover.is_reply,
  body:has(#userMuteModal.show) .popover.is_reply {
    z-index: 20000;
  }
}
/* チャット系画面のみ */
@media screen and (min-width: 768px) {
  body.modal-open #app .chatPage header {
    z-index: 200;
  }
}
@media screen and (max-width: 767px) {
  body.modal-open #app .chatPage header:not(:has(.menuBackLayer.is_show)) {
    z-index: 0;
  }
}
#app {
  /*============================
  パーツ
  ============================*/
  /*vue対策*/
  /*検索部分のグラデボタンのみ別途対応*/
  /*vue*/
  /*フォームまわりエラー*/
  /*エラー時のフォーム表示*/
  /* フォーム関連の独自設定 */
  /* 画像ファイル選択エリア */
  /* user-frontではシステムで制御のため「is_hide」での表示切り替え不要 */
  /* 画像ファイル選択ボタン */
  /*[title]*/
  /*============================
  スクロール
  ============================*/
  /*スクロールバー全体*/
  /*スクロールハンドル部分*/
  /*スクロール背景部分*/
  /* ページ内リンク時、ヘッダー分の位置調整 */
  /* ローディング */
  /*============================
  ボタン
  ============================*/
  /* 本番環境・ボタンをクリックしたときのローディング用スタイル */
  /*============================
    アプリ内表示時（WebView）
    ============================*/
  /*============================
    汎用カラー・クラス
    ============================*/
  /*time*/
  /*単位*/
  /*フォントサイズを微妙に下げる（smallは80%）*/
  /* フォントサイズ */
  /* 会員区分 */
  /* やるペン廃止に伴う調整：やるペンをペンギンのデザインに「userstatus_yaruze_pengin」classを残す */
  /*.userstatus_pengin {
      color: #965DE6;
      background-color: #F8F5FC;
      border: 2px solid #F1E8FF;
    }

    .userstatus_pengin:before {
      content: url(./ico_pengin.svg);
    }

    .userstatus_yaruze_pengin {
      color: #965DE6;
      background-color: #F8F5FC;
      border: 2px solid #F1E8FF;
      background: radial-gradient(circle at center, #F1E8FF, #D3B7FF);
      position: relative;
      z-index: 0;
      padding: 8px;
    }

    .userstatus_yaruze_pengin:before {
      content: url(./ico_yaruze_pengin.svg);
    }

    .userstatus_yaruze_pengin:after {
      content: '';
      position:absolute;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 20px;
      padding: 2px;
      width: 100%;
      height: 100%;
      background-color: #F8F5FC;
      background-clip: content-box;
    } */
  /* 背景色、ボタン色 */
  /* ボタン */
  /* アイコン */
  /* チェック！アイコン */
  /* 各種svgアイコン用 */
  /*vueの表示崩れ*/
  /* bootstrap5での差分調整 */
  /* bootstrap5での差分調整ここまで */
  /*============================
    モーダル基礎
    ============================*/
  /* つぶやき削除モーダル */
  /* myPage, chatPage */
  /*============================
  画像モーダル
  ============================*/
  /*============================
  イベント詳細モーダル
  ============================*/
  /*============================
  QRコード表示モーダル
  ============================*/
  /*============================
  検索
  ============================*/
  /*============================
  検索モーダル（スマホ）
  ============================*/
  /* 絞り込みボタン */
  /*============================
  共通パーツ
  ============================*/
  /* アコーディオン */
  /* さらに読み込む */
  /* アプリでの表示：header、footer非表示に伴う調整 */
  /* bootstrapのstyleが優先度で負けるため調整 */
}
#app .ql-container {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}
#app .h1,
#app .h2,
#app .h3,
#app .h4,
#app .h5,
#app .h6,
#app h1,
#app h2,
#app h3,
#app h4,
#app h5,
#app h6 {
  margin: 0;
}
#app a {
  text-decoration: none;
  color: var(--blue_main);
}
#app a:link {
  text-decoration: none;
}
#app a:visited {
  text-decoration: none;
}
#app a:active {
  text-decoration: none;
}
@media screen and (min-width: 769px) {
  #app a:hover {
    text-decoration: underline;
  }
  #app a:hover,
  #app input[type=submit]:hover,
  #app .btn:hover,
  #app button:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -webkit-transition: 0.2s;
    transition: 0.2s;
    cursor: pointer;
  }
}
#app button:focus {
  outline: none;
}
#app em {
  font-style: normal;
}
#app button.btn:disabled,
#app input.btn:disabled,
#app a.btn:disabled {
  cursor: no-drop !important;
}
#app .btn:active,
#app input[type=submit]:active {
  opacity: 0.7;
  box-shadow: inset -1px -1px 2px var(--gray_30), 0px 0px 3px rgba(255, 255, 255, 0.7);
}
#app ul,
#app li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#app input[type=text],
#app input[type=email],
#app input[type=tel],
#app input[type=url],
#app input[type=search],
#app input[type=password],
#app textarea {
  font-size: 16px !important;
  line-height: 28px;
  padding: 3px 5px;
  border-radius: 2px;
  background-color: #fff;
}
#app input[type=text]::-webkit-input-placeholder, #app input[type=email]::-webkit-input-placeholder, #app input[type=tel]::-webkit-input-placeholder, #app input[type=url]::-webkit-input-placeholder, #app input[type=search]::-webkit-input-placeholder, #app input[type=password]::-webkit-input-placeholder, #app textarea::-webkit-input-placeholder {
  color: var(--gray_30);
}
#app input[type=text]::-moz-placeholder, #app input[type=email]::-moz-placeholder, #app input[type=tel]::-moz-placeholder, #app input[type=url]::-moz-placeholder, #app input[type=search]::-moz-placeholder, #app input[type=password]::-moz-placeholder, #app textarea::-moz-placeholder {
  color: var(--gray_30);
}
#app input[type=text]::placeholder,
#app input[type=email]::placeholder,
#app input[type=tel]::placeholder,
#app input[type=url]::placeholder,
#app input[type=search]::placeholder,
#app input[type=password]::placeholder,
#app textarea::placeholder {
  color: var(--gray_30);
}
#app textarea {
  padding: 5px;
  line-height: 22px !important;
}
#app input[type=checkbox],
#app input[type=radio] {
  position: relative;
  top: 2px;
  margin-right: 5px;
  font-size: 16px;
  line-height: 28px;
  padding: 3px 3px 3px 10px;
  border-radius: 2px;
  background-color: #fff;
}
#app textarea {
  line-height: 22px;
}
#app input[type=checkbox] + label,
#app input[type=radio] + label {
  cursor: pointer;
}
#app input[type=checkbox]:checked + label,
#app input[type=radio]:checked + label {
  font-weight: bold;
}
#app input[type=text]:disabled {
  background-color: var(--gray_10);
}
#app .form-control_wrap:has(.form-control:focus) {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-radius: 5px;
}
#app .form-control_wrap:has(.form-control:focus) .form-control:focus {
  box-shadow: none;
  border-color: #86b7fe;
}
#app select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: solid 1px var(--gray_40);
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 22px 3px 6px;
  background: #fff;
  background-image: url("select_arrow.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 6px) center;
  background-size: auto 11px;
  font-size: 0.9375rem;
  height: 30px;
}
#app select.btn_grad_white {
  -webkit-appearance: revert;
     -moz-appearance: revert;
          appearance: revert;
}
#app .password-error {
  margin-top: 10px;
  display: block;
  text-align: left;
  color: var(--red_main);
}
#app span.text_error {
  display: inline-block;
  margin: 5px 0 13px;
  font-weight: bold;
  color: var(--red_main);
}
#app input.invalid,
#app select.invalid,
#app textarea.invalid,
#app div.invalid {
  border: solid 2px var(--red_sub) !important;
  box-shadow: 0 0 5px var(--red_sub);
}
@media screen and (max-width: 376px) {
  #app {
    /*　画面サイズが376pxpxまで　*/
  }
  #app ::-webkit-input-placeholder {
    font-size: 0.78em;
  }
  #app ::-moz-placeholder {
    font-size: 0.78em;
  }
  #app ::placeholder {
    font-size: 0.78em;
  }
  #app .form_data_area.btn_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
}
@media screen and (min-width: 829px) {
  #app {
    /*　画面サイズが829px以上　iPhoneXR・11対策*/
  }
  #app input[type=text],
  #app input[type=email],
  #app input[type=tel],
  #app input[type=url],
  #app input[type=search],
  #app input[type=password] {
    font-size: 16px;
    line-height: 25px;
  }
  #app textarea {
    font-size: 16px;
    line-height: 22px;
  }
}
#app .form_data_area input[type=text],
#app .form_data_area input[type=email],
#app .form_data_area input[type=tel],
#app .form_data_area input[type=url],
#app .form_data_area input[type=search],
#app .form_data_area input[type=password],
#app .form_data_area textarea {
  width: 100%;
  border: solid 1px var(--gray_60);
}
#app .form_data_area input.min {
  width: 50%;
  min-width: 150px;
}
#app .form_data_area textarea {
  width: 100%;
  min-height: 90px;
  overflow-y: auto;
}
#app .form_data_area textarea.big_textarea {
  min-height: 150px;
}
#app .form_data_area select.is_changeMember:invalid {
  background-color: var(--orange_bg);
}
#app .form_data_area select.is_changeMember {
  border: var(--blue_main) 1px solid;
  box-shadow: 0 0 3px var(--blue_main);
}
#app .form_data_area select.is_changeMember:focus {
  box-shadow: none;
}
#app .form_data_area select.is_changeMember option {
  background-color: #fff;
}
#app .form_data_area select.is_changeMember option:first-child {
  background-color: var(--orange_bg);
}
#app .form_data_area select.min {
  width: auto;
}
#app .form_guide {
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 5px;
}
#app label[for=icon_img] {
  display: block;
  border: dashed 3px var(--gray_20);
  border-radius: 5px;
  margin-top: 10px;
  padding: 15px;
  cursor: pointer;
  background-color: var(--gray_10);
  color: var(--gray_70);
  overflow: hidden;
  max-height: 130px;
  position: relative;
}
#app label[for=icon_img] input,
#app label[for=icon_img] span {
  cursor: pointer;
}
#app label[for=icon_img] small {
  display: none;
}
#app label[for=icon_img] input[type=file] {
  opacity: 0;
  display: block;
  position: absolute;
  line-height: 50em;
  top: 0;
  left: 0;
  width: 100%;
}
#app figure .group_iconbox {
  width: 100px;
  height: 100px;
  margin: auto;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  -webkit-align-items: center;
  border: 1px solid var(--gray_10);
  border-radius: 50%;
}
#app .form_data_area.is_icon_img img,
#app figure .group_iconbox img {
  width: 100%;
  height: auto;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#app figure .group_iconbox .is_hide {
  display: none;
}
#app label[for=btn_img] {
  display: block;
  border: 1px solid var(--gray_20);
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  background: -webkit-linear-gradient(top, #ffffff 0%, var(--gray_5) 100%);
  background: linear-gradient(180deg, #ffffff 0%, var(--gray_5) 100%);
  color: var(--navy_main);
  overflow: hidden;
  position: relative;
  font-size: 12px;
}
#app label[for=btn_img] > span {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app label[for=btn_img] i,
#app label[for=btn_img] svg {
  width: 22px;
  font-size: 22px;
}
#app label[for=btn_img] input {
  cursor: pointer;
}
#app label[for=btn_img] input[type=file] {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#app .title {
  background-color: var(--gray_10);
  padding: 5px 10px;
  font-weight: bold !important;
  margin: 5px 0;
}
@media screen and (max-width: 767px) {
  #app .pc_only {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  #app .sp_only {
    display: none !important;
  }
}
#app ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#app ::-webkit-scrollbar-thumb {
  background-color: #c9d2de;
  border-radius: 1px;
}
#app ::-webkit-scrollbar-track {
  background-color: transparent;
}
#app :target {
  scroll-margin-top: 43px;
}
#app .loading {
  text-align: center;
  margin: 15px 0;
}
#app .btn {
  font-weight: bold;
  vertical-align: initial;
}
#app .btn .loader {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #app .is_app header:not(.is_headAppBnr) ~ #wrap .is_sticky,
  #app .is_app .is_headAppBnr ~ #wrap .is_sticky {
    top: 0;
  }
  #app .is_headAppBnr ~ #wrap .is_sticky {
    top: 90px;
  }
  #app .is_app .five_list_titleArea .content_title {
    display: none !important;
  }
}
#app .is_reverse {
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
#app .is_sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 46px;
  z-index: 10;
}
#app .text_navy {
  color: var(--navy_main);
}
#app .text_gray {
  color: var(--gray_50);
}
#app .text_red {
  color: var(--red_main);
}
#app .text_orange {
  color: var(--orange_main);
}
#app .text_bg_yellow {
  background-color: #fde281;
  display: inline-block;
  padding: 0 3px;
  margin: 0 3px;
}
#app time .time {
  margin: 0 0 0 5px;
  white-space: nowrap;
}
#app .unit {
  font-size: 90%;
  margin-left: 3px;
}
#app .medium {
  font-size: 90%;
}
#app .text_require {
  color: var(--red_main);
  font-size: 0.75rem;
}
#app .font14 {
  font-size: 14px;
}
#app [class*=userstatus_] {
  line-height: 0;
  font-weight: bold;
  padding: 6px 8px;
  border-radius: 20px;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.6875rem;
}
#app [class*=userstatus_]:before {
  display: inline-block;
  width: 12px;
  height: auto;
  margin-right: 3px;
  vertical-align: -1px;
}
#app .userstatus_free {
  color: var(--gray_50);
  background-color: #fff;
  border: 2px solid var(--gray_5);
}
#app .userstatus_free:before {
  content: url(./ico_free.svg);
}
#app .userstatus_pengin {
  color: #965de6;
  background-color: #f8f5fc;
  border: 2px solid #f1e8ff;
}
#app .userstatus_pengin:before {
  content: url(./ico_pengin.svg);
}
#app .userstatus_yaruze_pengin {
  color: #965de6;
  background-color: #f8f5fc;
  border: 2px solid #f1e8ff;
}
#app .userstatus_yaruze_pengin:before {
  content: url(./ico_pengin.svg);
}
#app .userstatus_iruka {
  color: #4e9cf5;
  background-color: #f7fbff;
  border: 2px solid #e6f2ff;
}
#app .userstatus_iruka:before {
  content: url(./ico_iruka.svg);
}
#app .userstatus_panda {
  color: #5e9900;
  background-color: #f7faf2;
  border: 2px solid #e4f2d0;
}
#app .userstatus_panda:before {
  content: url(./ico_panda.svg);
}
#app .userstatus_tora {
  color: #ef9300;
  background-color: #fffbf2;
  border: 2px solid #fff2d8;
}
#app .userstatus_tora:before {
  content: url(./ico_tora.svg);
}
#app .userstatus_kodomo {
  color: #64c3c9;
  background-color: #fff;
  border: 2px solid #c8eef0;
}
#app .userstatus_kodomo:before {
  content: url(./ico_kodomo.svg);
}
#app .userstatus_gakusei {
  color: #4d538f;
  background-color: #fff;
  border: 2px solid #bbc5e7;
}
#app .userstatus_gakusei:before {
  content: url(./ico_gakusei.svg);
}
#app .text_beginner {
  color: var(--gray_50);
}
#app .text_pengin {
  color: #965de6;
}
#app .text_iruka {
  color: #4e9cf5;
}
#app .text_panda {
  color: #5e9900;
}
#app .text_tora {
  color: #ef9300;
}
#app .text_kodomo {
  color: #64c3c9;
}
#app .text_gakusei {
  color: #4d538f;
}
#app .text_unicorn {
  color: #7057fa;
  vertical-align: middle;
}
#app .status_icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 15px;
}
#app .status_icon[class*=userstatus_]::before {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#app .status_icon.userstatus_pengin {
  background: #f1e8ff;
  border: 1px solid #f8f5fc;
}
#app .status_icon.userstatus_iruka {
  background-color: #e6f2ff;
  border: 1px solid #f7fbff;
}
#app .status_icon.userstatus_panda {
  background-color: #e4f2d0;
  border: 1px solid #f7faf2;
}
#app .status_icon.userstatus_tora {
  background-color: #fff2d8;
  border: 1px solid #fffbf2;
}
#app .status_icon.userstatus_kodomo {
  background-color: #c8eef0;
  border: 1px solid #fff;
}
#app .status_icon.userstatus_gakusei {
  background-color: #bbc5e7;
  border: 1px solid #fff;
}
#app .bg_navy {
  background-color: var(--navy_main);
  color: #fff;
}
#app .bg_lightglay {
  background-color: var(--gray_5);
}
#app .bg_lightblue {
  background-color: var(--navy_bg02);
}
#app .bg_paleblue {
  background-color: var(--navy_bg01);
}
#app .bg_navy {
  background-color: var(--navy_main);
  color: #fff;
}
#app .bg_lightyellow {
  background-color: var(--orange_bg);
}
#app .bg_darkgray {
  background-color: var(--gray_50);
  color: #fff;
}
#app .bg_pink {
  background-color: var(--red_bg);
}
#app .bg_yellow {
  background-color: var(--orange_main);
  color: #fff;
}
#app .bg_blue {
  background-color: var(--blue_main);
  color: #fff;
}
#app .bg_white {
  background-color: #fff;
  color: var(--gray_60);
}
#app .bg_lightgreen {
  background-color: #64c3c9;
  color: #fff;
}
#app .bg_mint {
  background-color: var(--mint_main);
  color: #fff;
}
#app .bg_purple {
  background-color: #4d538f;
  color: #fff;
}
#app .btn_normal {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  border: 1px solid var(--gray_40);
  padding: 0 10px;
  min-height: 30px;
  border-radius: 5px;
  color: var(--text_main);
}
#app .btn_normal:hover {
  color: var(--text_main);
}
#app .button.disabled,
#app .btn_disabled {
  pointer-events: none;
  cursor: auto;
}
#app .btn_normal .fa-angle-right {
  position: absolute;
  right: 10px;
  font-size: 20px;
  width: 10px;
  height: auto;
}
#app .btn_big_link {
  width: 100%;
  padding: 15px 10px;
  max-width: 350px;
}
#app .btn-gray,
#app .btn_gray {
  background-color: var(--gray_10);
  border: solid 1px var(--gray_10);
}
#app .btn_grad_white {
  color: var(--gray_70);
  border: 1px solid var(--gray_20_a);
  background: -webkit-linear-gradient(top, var(--navy_bg01) 0%, #dee1e2 100%);
  background: linear-gradient(to bottom, var(--navy_bg01) 0%, #dee1e2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--navy_bg01)", endColorstr="#dee1e2", GradientType=0);
}
#app .btn_grad_blue {
  color: #fff;
  background: var(--blue_main);
  background: -webkit-linear-gradient(top, #7fadef 0%, #2066cb 100%);
  background: linear-gradient(to bottom, #7fadef 0%, #2066cb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7fadef", endColorstr="#2066cb", GradientType=0);
}
#app .btn_grad_navy {
  color: #fff;
  background: #42536e;
  background: -webkit-linear-gradient(top, #5876aa 0%, #42536e 100%);
  background: linear-gradient(to bottom, #5876aa 0%, #42536e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5876AA", endColorstr="#42536E", GradientType=0);
}
#app .btn[class*=btn_outline_] {
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  font-weight: bold;
}
#app .btn.btn_outline_yellow {
  border-color: var(--orange_main);
  color: var(--orange_main);
}
#app .btn.btn_outline_blue {
  border-color: var(--blue_main);
  color: var(--blue_main) !important;
}
#app .btn.btn_outline_darkgray {
  border-color: var(--gray_50);
  color: var(--gray_50);
}
#app .btn.btn_outline_red {
  border-color: var(--red_main);
  color: var(--red_main);
}
#app .btn.btn_outline_mint {
  border-color: var(--mint_main);
  color: var(--mint_main);
}
#app .btn.bg_navy:focus,
#app .btn.bg_blue:focus,
#app .btn.bg_darkgray:focus,
#app .btn.bg_yellow:focus,
#app .btn.bg_mint:focus,
#app .btn[class*=bg_dark]:focus {
  color: #fff;
}
#app .btn.bg_navy:hover,
#app .btn.bg_blue:hover,
#app .btn.bg_darkgray:hover,
#app .btn.bg_yellow:hover,
#app .btn.bg_mint:hover,
#app .btn[class*=bg_dark]:hover,
#app .btn_grad_blue:hover,
#app .btn_grad_navy:hover {
  color: #fff;
}
#app .btn_entryGoogleCalendar {
  font-size: 0.75rem;
  padding: 4px 12px;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .btn_entryGoogleCalendar img {
  width: 20px;
}
@media (any-hover: hover) {
  #app a.btn:hover,
  #app #chat_log a.btn:hover {
    text-decoration: none;
  }
  #app .btn[class*=btn_outline_]:hover {
    color: #fff !important;
    opacity: 1;
  }
  #app .btn_outline_yellow:hover {
    background-color: var(--orange_main);
  }
  #app .btn_outline_blue:hover {
    background-color: var(--blue_main);
  }
  #app .btn_outline_darkgray:hover {
    background-color: var(--gray_50);
  }
  #app .btn_outline_red:hover {
    background-color: var(--red_main);
  }
  #app .btn_outline_mint:hover {
    background-color: var(--mint_main);
  }
  #app .btn_grad_white:hover {
    background: #ffffff;
    background: -webkit-linear-gradient(top, #ffffff 0%, var(--navy_bg01) 100%);
    background: linear-gradient(to bottom, #ffffff 0%, var(--navy_bg01) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="var(--navy_bg01)", GradientType=0);
    opacity: 1;
  }
}
#app .form_data_area.icon_formbox {
  position: relative;
}
#app .icon_formbox input {
  padding: 5px 10px;
  border: solid 1px var(--gray_40);
  padding-left: 30px;
}
#app .icon_formbox .input_icon {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  position: absolute;
  width: 30px;
  height: auto;
  text-align: center;
  color: var(--gray_40);
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 0.9375rem;
}
#app .icon_check {
  position: relative;
  display: inline-block;
  height: 20px;
  background-color: var(--orange_main);
  color: #fff;
  font-size: 11px;
  line-height: 21px;
  padding: 0 7px;
  margin-left: 15px;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
#app .icon_check i,
#app .icon_check svg {
  margin-right: 3px;
}
#app .icon_check svg {
  width: 9.6px;
  height: auto;
}
#app .icon_check::before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -12px;
  width: 0px;
  border-top: 4px solid transparent;
  border-right: 8px solid var(--orange_main);
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
}
#app .btn_city .cls-1 {
  fill: #fffbdc;
}
#app .btn_city .cls-2 {
  fill: #ffdbc0;
}
#app .btn_city .cls-3 {
  fill: #d3efd3;
}
#app .btn_city .cls-4 {
  fill: #d2e6ff;
}
#app .btn_city .cls-5 {
  fill: #ffc7c7;
}
#app .btn_city .cls-6 {
  fill: #ffdcf3;
}
#app .btn_works .cls-1 {
  fill: #5e8df7;
}
#app .btn_works .cls-2 {
  fill: #d3efd3;
}
#app .btn_works .cls-3 {
  fill: #d2e6ff;
}
#app .btn_works .cls-4 {
  fill: #ffdcf3;
}
#app .btn_works .cls-5 {
  fill: #ffdbc0;
}
#app .btn_works .cls-6 {
  fill: #ffc7c7;
}
#app .btn_works .cls-7 {
  fill: #0a6ce2;
}
#app .btn-primary,
#app .btn-danger {
  color: #fff !important;
  font-weight: bold !important;
}
#app .btn-secondary {
  color: #fff !important;
  background-color: #6c757d !important;
}
#app small,
#app .small {
  font-weight: 400;
}
#app [type=search] {
  -webkit-appearance: none;
}
#app .popover {
  position: absolute;
  top: 0;
  left: 0;
}
#app .popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}
#app .popover .arrow::before, #app .popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
#app .form-check-input {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  float: none;
  margin-top: 0;
}
#app .form-group {
  margin-bottom: 1rem;
}
#app select:disabled {
  opacity: 0.5;
}
#app .col,
#app .col-1,
#app .col-10,
#app .col-11,
#app .col-12,
#app .col-2,
#app .col-3,
#app .col-4,
#app .col-5,
#app .col-6,
#app .col-7,
#app .col-8,
#app .col-9,
#app .col-auto,
#app .col-lg,
#app .col-lg-1,
#app .col-lg-10,
#app .col-lg-11,
#app .col-lg-12,
#app .col-lg-2,
#app .col-lg-3,
#app .col-lg-4,
#app .col-lg-5,
#app .col-lg-6,
#app .col-lg-7,
#app .col-lg-8,
#app .col-lg-9,
#app .col-lg-auto,
#app .col-md,
#app .col-md-1,
#app .col-md-10,
#app .col-md-11,
#app .col-md-12,
#app .col-md-2,
#app .col-md-3,
#app .col-md-4,
#app .col-md-5,
#app .col-md-6,
#app .col-md-7,
#app .col-md-8,
#app .col-md-9,
#app .col-md-auto,
#app .col-sm,
#app .col-sm-1,
#app .col-sm-10,
#app .col-sm-11,
#app .col-sm-12,
#app .col-sm-2,
#app .col-sm-3,
#app .col-sm-4,
#app .col-sm-5,
#app .col-sm-6,
#app .col-sm-7,
#app .col-sm-8,
#app .col-sm-9,
#app .col-sm-auto,
#app .col-xl,
#app .col-xl-1,
#app .col-xl-10,
#app .col-xl-11,
#app .col-xl-12,
#app .col-xl-2,
#app .col-xl-3,
#app .col-xl-4,
#app .col-xl-5,
#app .col-xl-6,
#app .col-xl-7,
#app .col-xl-8,
#app .col-xl-9,
#app .col-xl-auto {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
}
#app .text-info {
  color: var(--mint_main) !important;
}
#app .modal-content {
  border: solid 1px #fff;
  box-shadow: 0 0 5px var(--gray_50);
  color: var(--text_main);
}
#app .modal-header {
  padding: 13px 15px;
  font-size: 0.875rem;
  font-weight: bold;
}
#app .modal-footer {
  background-color: #fff;
  -webkit-box-pack: center;
          justify-content: center;
}
#app .modal-footer .btn .loading {
  margin: 0;
}
#app .modal-dialog.modal-lg {
  max-width: 950px;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}
#app .deleteTweetModal .tweetView,
#app .deleteReplyTweetModal .tweetView {
  margin-top: 10px;
  padding: 5px 10px;
  font-size: 12px;
}
#app .myPage,
#app .chatPage {
  /*============================
  全体設定
  ============================*/
  /* ツールバー */
  /* ツールバーがある場合のレイアウト */
  /*============================
  アイコン（円形）
  ============================*/
  /* 丸アイコン画像 */
  /* 会員区分アイコン＆ユニコーンアイコン */
  /*============================
  ツールチップ
  ============================*/
  /*星評価*/
  /* 三角矢印（装飾用矢印） */
  /*============================
  チャットの使い方説明：未参加チャットへの参加方法
  ============================*/
  /*============================
  ベースのスタイル
  ============================*/
  /*セクショニングコンテンツ*/
  /*タイトル*/
  /*吹き出し*/
  /*============================
  もっと見る
  ============================*/
  /* 該当のメッセージログや、URLに遷移するリンク */
  /*============================
  タブ切り替え
  ============================*/
  /*============================
  アコーディオン（基本パーツ）
  ============================*/
  /*============================
  ヘッダー
  ============================*/
  /* 通知を一括既読モーダル（Safari不具合調整） */
  /*============================
  スマホ用ヘッダーアプリ案内
  ============================*/
  /* メニュー表示の背景（スマホ時） */
  /*============================
  ロゴとメニュー
  ============================*/
  /*アカウントページ*/
  /* 新入生専用サポーターへの導線 */
  /* チャット画面へボタン */
  /*============================
  ヘッダーメニュー共通
  ============================*/
  /*============================
  フッター
  ============================*/
  /*============================
  マイページメニュー
  ============================*/
  /* ボタン */
  /* メニュー */
  /* ヘッダーの検索部分全体 */
  /* 検索の種類 */
  /* 検索ワードを入力 */
  /*valueフォーカス時*/
  /*検索中に×を表示(768px以下) のみ*/
  /* ヘッダーの検索履歴＆検索サジェスト */
  /* 検索履歴だけの表示 */
  /* チャットを探す・ユーザーを探す・トレンドボタン */
  /*============================
  通知欄
  ============================*/
  /* user-frontでは必要だけどfront-mockに反映すると崩れる
  @media screen and (min-width: 1001px) {
    #content-mainNav .btn_notification.collapsed {
      min-width: 100%;
    }
  }
  */
  /*============================
  操作時の通知メッセージ関連（成功・エラー両方）
  ============================*/
  /*============================
  通報用モーダル（発言を報告・ユーザーを報告）
  ============================*/
  /*============================
  チャット参加時の概要モーダル
  ============================*/
  /* チャット概要 */
  /* チャット作成者 */
  /* チャット名 */
  /*============================
  タグ
  ============================*/
  /*============================
  ページ読み込み中アニメーション
  ============================*/
  /*============================
  誕生日アニメーション
  ============================*/
  /* 非表示時のアニメーション */
  /* keyframes */
  /* 会員ランク別誕生日アニメーション */
  /*============================
  モーダル：旅するユニコーン
  ============================*/
  /*============================
  つぶやき
  ============================*/
  /* 発言一覧ページ、少し調整 */
  /* つぶやきアイコン */
  /* user-frontで必要（モックに影響なし） */
  /* つぶやき一覧 */
  /* つぶやきがない時 */
  /* つぶやき一覧モーダル */
  /*============================
  フォロー機能関連
  ============================*/
  /* 学長とミニ両のフォロワー数非表示に伴うデザイン */
  /*============================
  popover
  ============================*/
  /* ユーザープロフィール用（.is_prof ） */
  /* リンク文字の下に出るpopover */
  /* 返信用popover */
  /* ユニコーン */
  /* popover内のつぶやき */
  /*============================
  テキストコンテンツ（利用規約等）
  ============================*/
  /*============================
  登録完了案内
  ============================*/
  /*============================
  検索結果カード（チャット検索・マイページトップ共通）
  ============================*/
  /* 見出し */
  /* スマホ時、下部テキスト */
  /* チャットを探す */
  /* タグ */
  /* ボタン */
  /* チャット検索 オフ会チャットお気に入りボタン */
  /* オフ会チャットのステータス */
  /* ユーザーリスト */
  /* ユーザーを探す検索ページ */
  /* 横スクロール版検索リスト */
  /* もっと見る */
  /* 最後の部分のぼかし */
  /* ユーザー情報 */
  /* チャット画面：ユニコーン関連 */
  /* プロフィール文 */
  /* フォロー、フォロワー */
  /* ユーザーを探す画面のフォローボタン（下） */
  /*============================
  画像リスト
  ============================*/
  /*============================
  つぶやき+画像モーダル
  ============================*/
  /*============================
  リアクション・操作ボタン系
  ============================*/
  /*============================
  リアクション結果
  ============================*/
  /*リアクションした人一覧*/
  /* 本番ではVue側で処理するため、不要 */
  /*============================
  自分・ユーザーの過去発言一覧
  ============================*/
  /* メインカラム */
  /* チャット絞り込みボタン（スマホ） */
  /* チャット絞り込みセレクトメニュー（スマホ） */
  /* 吹き出し */
  /* チャット絞り込み中（スマホ） */
  /* コメント */
  /*お気に入りボタン*/
  /* 返信内のユーザー名popover */
  /*一番最初のログの時、つぶやき吹き出し位置を下に*/
  /*============================
  つぶやき一覧
  ============================*/
  /* 絞り込み条件モーダル */
  /* つぶやくモーダル */
  /* つぶやき入力欄 */
  /*エモーティコン*/
  /*============================
  つぶやき返信
  ============================*/
  /* 返信アリ */
  /* 返信元ツイート */
  /* 半透明にする返信元ツイート（つぶやき一覧画面で、返信が付いている親ツイートに付与） */
  /* 返信元ツイートのリアクションボタンのホバー制御を上書き */
  /* 返信ツイート */
  /* 返信ツイートのリアクションボタンのホバー制御を上書き */
  /* ツイート引用部分 */
  /* ツイート引用部分、詳細度が足りないので別途指定 */
  /*============================
  つぶやき詳細（モーダル）
  ============================*/
  /*============================
  つぶやき編集（モーダル）
  ============================*/
  /*============================
  ツイートを固定
  ============================*/
  /* リアクションボタン内のツイート固定ボタン */
  /* 「固定されたつぶやき」 */
  /* つぶやきカードに表示される「固定されたつぶやき」 */
  /* 画像付きつぶやきモーダルに表示される「固定されたつぶやき」 */
  /* ポップオーバー内のつぶやき固定ピン */
  /*============================
  他の場所からリンクで飛んできた時に、該当メッセージに装飾を付ける
  ============================*/
  /* 該当のメッセージ */
  /* 該当のつぶやき */
  /* 該当メッセージ・つぶやきのラベル */
  /* チャットボット */
}
#app .myPage #wrap,
#app .chatPage #wrap {
  padding-top: 45px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
  min-height: calc(100vh - 37px);
  position: relative;
}
@media screen and (max-width: 767px) {
  #app .myPage #wrap,
  #app .chatPage #wrap {
    min-height: calc(100vh - 52px);
  }
}
#app .myPage #contents_wrap,
#app .chatPage #contents_wrap {
  display: -webkit-box;
  display: flex;
}
@media screen and (max-width: 767px) {
  #app .myPage #contents_wrap,
  #app .chatPage #contents_wrap {
    display: block;
    min-height: inherit;
  }
}
#app .myPage #tool_bar,
#app .chatPage #tool_bar {
  position: fixed;
  top: 0;
  left: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
  width: var(--toolBar_width);
  height: 100vh;
  padding-top: 46px;
  background-color: var(--navy_main);
  z-index: 110;
  overflow-y: auto;
}
@media screen and (max-width: 767px) {
  #app .myPage #tool_bar,
  #app .chatPage #tool_bar {
    display: none;
  }
}
#app .myPage #tool_bar .tools,
#app .chatPage #tool_bar .tools {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
#app .myPage #tool_bar .tools [class^=tool_],
#app .chatPage #tool_bar .tools [class^=tool_] {
  display: block;
}
#app .myPage #tool_bar .tools [class^=tool_].is_current, #app .myPage #tool_bar .tools [class^=tool_].is_current a:hover,
#app .chatPage #tool_bar .tools [class^=tool_].is_current,
#app .chatPage #tool_bar .tools [class^=tool_].is_current a:hover {
  background-color: var(--blue_main);
  opacity: 1;
}
#app .myPage #tool_bar .tools [class^=tool_][class*=chat].is_current,
#app .chatPage #tool_bar .tools [class^=tool_][class*=chat].is_current {
  border-top: 1px solid var(--blue_main);
  margin-top: -1px;
}
#app .myPage #tool_bar .tools [class^=tool_] a,
#app .chatPage #tool_bar .tools [class^=tool_] a {
  display: block;
  padding: 12px 0 6px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
#app .myPage #tool_bar .tools [class^=tool_] a:hover,
#app .chatPage #tool_bar .tools [class^=tool_] a:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}
#app .myPage #tool_bar .tools [class^=tool_] a i,
#app .myPage #tool_bar .tools [class^=tool_] a svg,
#app .chatPage #tool_bar .tools [class^=tool_] a i,
#app .chatPage #tool_bar .tools [class^=tool_] a svg {
  font-size: 22px;
  width: 25px;
  height: auto;
}
#app .myPage #tool_bar .tools [class^=tool_] a span,
#app .chatPage #tool_bar .tools [class^=tool_] a span {
  display: block;
  font-size: 10px;
  text-align: center;
}
#app .myPage #tool_bar .tools [class^=tool_]:first-child a,
#app .chatPage #tool_bar .tools [class^=tool_]:first-child a {
  padding-top: 15px;
}
#app .myPage #tool_bar .tools [class^=tool_][class*=tweet] svg,
#app .chatPage #tool_bar .tools [class^=tool_][class*=tweet] svg {
  fill: #fff;
}
#app .myPage #tool_bar .tools [class^=tool_][class*=bookmark] svg,
#app .chatPage #tool_bar .tools [class^=tool_][class*=bookmark] svg {
  width: 16px;
}
#app .myPage #tool_bar .tools [class^=tool_][class*=mypage],
#app .chatPage #tool_bar .tools [class^=tool_][class*=mypage] {
  position: relative;
  margin-top: 21px;
}
#app .myPage #tool_bar .tools [class^=tool_][class*=mypage]::before,
#app .chatPage #tool_bar .tools [class^=tool_][class*=mypage]::before {
  position: absolute;
  top: -21px;
  content: "";
  width: calc(100% - 14px);
  height: 1px;
  margin: 10px 7px 0;
  background-color: #fff;
  opacity: 0.5;
}
#app .myPage #tool_bar .tools .tool_chatbot,
#app .chatPage #tool_bar .tools .tool_chatbot {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  gap: 5px;
  width: 55px;
  height: 55px;
  margin: 10px 9px;
  border-radius: 4px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}
#app .myPage #tool_bar .tools .tool_chatbot:hover,
#app .chatPage #tool_bar .tools .tool_chatbot:hover {
  background: rgba(255, 255, 255, 0.2);
}
#app .myPage #tool_bar .tools .tool_chatbot.is_active,
#app .chatPage #tool_bar .tools .tool_chatbot.is_active {
  background-color: var(--blue_main);
}
#app .myPage #tool_bar .tools .tool_chatbot.is_active .question_icon::before,
#app .chatPage #tool_bar .tools .tool_chatbot.is_active .question_icon::before {
  color: var(--blue_main);
}
#app .myPage #tool_bar .tools .tool_chatbot i,
#app .myPage #tool_bar .tools .tool_chatbot svg,
#app .chatPage #tool_bar .tools .tool_chatbot i,
#app .chatPage #tool_bar .tools .tool_chatbot svg {
  font-size: 22px;
  width: 22px;
  color: #fff;
  fill: #fff;
}
#app .myPage #tool_bar .tools .tool_chatbot .question_icon,
#app .chatPage #tool_bar .tools .tool_chatbot .question_icon {
  position: relative;
}
#app .myPage #tool_bar .tools .tool_chatbot .question_icon::before,
#app .chatPage #tool_bar .tools .tool_chatbot .question_icon::before {
  content: "?";
  font-weight: bold;
  position: absolute;
  font-size: 13px;
  top: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: var(--navy_main);
}
#app .myPage #tool_bar .tools .tool_chatbot span,
#app .chatPage #tool_bar .tools .tool_chatbot span {
  white-space: nowrap;
  line-height: 1;
}
#app .myPage #tool_bar .service_title,
#app .chatPage #tool_bar .service_title {
  margin-bottom: -5px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
}
@media screen and (max-height: 640px) {
  #app .myPage #tool_bar .service_title,
  #app .chatPage #tool_bar .service_title {
    margin-bottom: 10px;
  }
}
@media screen and (max-height: 780px) {
  #app .myPage #tool_bar .services .service:nth-of-type(3),
  #app .chatPage #tool_bar .services .service:nth-of-type(3) {
    display: none;
  }
}
@media screen and (max-height: 710px) {
  #app .myPage #tool_bar .services .service:nth-of-type(2),
  #app .chatPage #tool_bar .services .service:nth-of-type(2) {
    display: none;
  }
}
@media screen and (max-height: 640px) {
  #app .myPage #tool_bar .services .service:nth-of-type(1),
  #app .chatPage #tool_bar .services .service:nth-of-type(1) {
    display: none;
  }
}
#app .myPage #tool_bar .services .service,
#app .chatPage #tool_bar .services .service {
  display: block;
}
#app .myPage #tool_bar .services .service a,
#app .chatPage #tool_bar .services .service a {
  display: block;
  width: 55px;
  height: 55px;
  margin: 15px auto;
}
#app .myPage #tool_bar .services .service a img,
#app .chatPage #tool_bar .services .service a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
#app .myPage #tool_bar .services .service.is_trial a,
#app .chatPage #tool_bar .services .service.is_trial a {
  pointer-events: none;
}
#app .myPage #tool_bar .services .service.is_trial a img,
#app .chatPage #tool_bar .services .service.is_trial a img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
@media screen and (max-height: 710px) {
  #app .myPage #tool_bar .service_wrap.is_chatbot .service_title,
  #app .chatPage #tool_bar .service_wrap.is_chatbot .service_title {
    margin-bottom: 10px;
  }
}
@media screen and (max-height: 850px) {
  #app .myPage #tool_bar .service_wrap.is_chatbot .services .service:nth-of-type(3),
  #app .chatPage #tool_bar .service_wrap.is_chatbot .services .service:nth-of-type(3) {
    display: none;
  }
}
@media screen and (max-height: 780px) {
  #app .myPage #tool_bar .service_wrap.is_chatbot .services .service:nth-of-type(2),
  #app .chatPage #tool_bar .service_wrap.is_chatbot .services .service:nth-of-type(2) {
    display: none;
  }
}
@media screen and (max-height: 710px) {
  #app .myPage #tool_bar .service_wrap.is_chatbot .services .service:nth-of-type(1),
  #app .chatPage #tool_bar .service_wrap.is_chatbot .services .service:nth-of-type(1) {
    display: none;
  }
}
#app .myPage #tool_bar .service_all_toggle,
#app .chatPage #tool_bar .service_all_toggle {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 55px;
  height: 55px;
  margin-block: 0 15px;
  margin-inline: auto;
  border-radius: 4px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}
#app .myPage #tool_bar .service_all_toggle:hover,
#app .chatPage #tool_bar .service_all_toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}
#app .myPage #tool_bar .service_all_toggle .service_all_arrow,
#app .chatPage #tool_bar .service_all_toggle .service_all_arrow {
  display: inline-block;
  -webkit-transform: rotate(-90deg) translateY(2px) scale(0.8);
          transform: rotate(-90deg) translateY(2px) scale(0.8);
}
#app .myPage #tool_bar .service_all_toggle.is_active,
#app .chatPage #tool_bar .service_all_toggle.is_active {
  background-color: var(--blue_main);
  opacity: 1;
}
#app .myPage #tool_bar .service_all_toggle.is_active .service_all_arrow,
#app .chatPage #tool_bar .service_all_toggle.is_active .service_all_arrow {
  display: inline-block;
  -webkit-transform: rotate(90deg) translateY(-2px) scale(0.8);
          transform: rotate(90deg) translateY(-2px) scale(0.8);
}
#app .myPage #tool_bar .service_all_toggle.is_new::before,
#app .chatPage #tool_bar .service_all_toggle.is_new::before {
  position: absolute;
  top: -7px;
  right: -5px;
  content: "NEW";
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--red_main);
  padding: 0px 6px;
  border-radius: 6px;
  border: 1px solid #fff;
  line-height: 1.3;
}
#app .myPage #tool_bar .service_all_toggle .is_open,
#app .chatPage #tool_bar .service_all_toggle .is_open {
  display: none;
}
#app .myPage #tool_bar .service_all_toggle.is_active .is_close,
#app .chatPage #tool_bar .service_all_toggle.is_active .is_close {
  display: none;
}
#app .myPage #tool_bar .service_all_toggle.is_active .is_open,
#app .chatPage #tool_bar .service_all_toggle.is_active .is_open {
  display: block;
}
@media screen and (min-width: 768px) {
  #app .myPage #tool_bar ~ :where(#searchLog, #searchChatroom, #userpage),
  #app .chatPage #tool_bar ~ :where(#searchLog, #searchChatroom, #userpage) {
    margin-left: var(--toolBar_width);
  }
}
#app .myPage #service_all_wrap,
#app .chatPage #service_all_wrap {
  position: fixed;
  left: 70px;
  bottom: 0px;
  width: 573px;
  padding: 20px;
  background: #ffffff;
  border: 3px solid var(--navy_main);
  border-left: none;
  border-radius: 0px 4px 4px 0px;
  z-index: 100;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateX(-573px);
          transform: translateX(-573px);
}
@media screen and (max-width: 767px) {
  #app .myPage #service_all_wrap,
  #app .chatPage #service_all_wrap {
    display: none;
  }
}
#app .myPage #service_all_wrap.is_active,
#app .chatPage #service_all_wrap.is_active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  box-shadow: 2px 0px 4px var(--gray_20);
}
#app .myPage #service_all_wrap .service_all_title,
#app .chatPage #service_all_wrap .service_all_title {
  color: var(--navy_main);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
#app .myPage #service_all_wrap .service_all,
#app .chatPage #service_all_wrap .service_all {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#app .myPage #service_all_wrap .service_all .service,
#app .chatPage #service_all_wrap .service_all .service {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid var(--gray_30);
  border-radius: 5px;
}
#app .myPage #service_all_wrap .service_all .service.is_new::after,
#app .chatPage #service_all_wrap .service_all .service.is_new::after {
  position: absolute;
  top: -5px;
  right: -5px;
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--red_main);
  border: 1px solid #fff;
  border-radius: 50%;
}
#app .myPage #service_all_wrap .service_all .service.is_new:hover::after,
#app .chatPage #service_all_wrap .service_all .service.is_new:hover::after {
  background-color: var(--red_sub);
}
#app .myPage #service_all_wrap .service_all .service img,
#app .chatPage #service_all_wrap .service_all .service img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}
#app .myPage #service_all_wrap .service_all .service.is_trial a,
#app .chatPage #service_all_wrap .service_all .service.is_trial a {
  pointer-events: none;
}
#app .myPage #service_all_wrap .service_all .service.is_trial a img,
#app .chatPage #service_all_wrap .service_all .service.is_trial a img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
#app .myPage #service_all_wrap .service_all.recommend,
#app .chatPage #service_all_wrap .service_all.recommend {
  margin-bottom: 20px;
}
#app .myPage #service_all_wrap .service_all.recommend .service,
#app .chatPage #service_all_wrap .service_all.recommend .service {
  width: 125px;
  height: 80px;
}
#app .myPage .user_proficon,
#app .myPage .chat_icon,
#app .chatPage .user_proficon,
#app .chatPage .chat_icon {
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  border: 1px solid var(--gray_icon_border);
}
#app .myPage .icon_status,
#app .myPage .unicorn_icon,
#app .chatPage .icon_status,
#app .chatPage .unicorn_icon {
  width: 14px;
  height: auto;
  margin-right: 3px;
}
#app .myPage .icon_status.lg,
#app .myPage .unicorn_icon.lg,
#app .chatPage .icon_status.lg,
#app .chatPage .unicorn_icon.lg {
  width: 18px;
}
#app .myPage .icon_status.sm,
#app .myPage .unicorn_icon.sm,
#app .chatPage .icon_status.sm,
#app .chatPage .unicorn_icon.sm {
  width: 12px;
}
#app .myPage .tip,
#app .chatPage .tip {
  position: absolute;
  display: none;
  -webkit-animation: anim_tip 0.1s forwards;
          animation: anim_tip 0.1s forwards;
  bottom: -100%;
  z-index: 100;
  text-align: center;
  width: 200px;
  left: -88px;
  pointer-events: none;
}
#app .myPage .tip .tip_inner,
#app .chatPage .tip .tip_inner {
  color: #fff;
  background-color: var(--gray_black);
  font-size: 0.6875rem;
  font-weight: normal;
  padding: 5px 5px 0;
  height: 23px;
  line-height: 12px;
  border-radius: 3px;
  display: inline-block;
}
#app .myPage .tip .tip_inner.line2,
#app .chatPage .tip .tip_inner.line2 {
  height: 3.3em;
}
#app .myPage .tip .tip_inner:after,
#app .chatPage .tip .tip_inner:after {
  content: "▼";
  color: var(--gray_black);
  display: block;
  text-align: center;
  font-size: 0.875rem;
}
@-webkit-keyframes anim_tip {
  0% {
    -webkit-transform: translateY(-38px);
            transform: translateY(-38px);
  }
  100% {
    -webkit-transform: translateY(-43px);
            transform: translateY(-43px);
  }
}
@keyframes anim_tip {
  0% {
    -webkit-transform: translateY(-38px);
            transform: translateY(-38px);
  }
  100% {
    -webkit-transform: translateY(-43px);
            transform: translateY(-43px);
  }
}
@-webkit-keyframes anim_tip_reverse {
  0% {
    -webkit-transform: translateY(-43px);
            transform: translateY(-43px);
  }
  100% {
    -webkit-transform: translateY(-38px);
            transform: translateY(-38px);
  }
}
@keyframes anim_tip_reverse {
  0% {
    -webkit-transform: translateY(-43px);
            transform: translateY(-43px);
  }
  100% {
    -webkit-transform: translateY(-38px);
            transform: translateY(-38px);
  }
}
#app .myPage .starRating,
#app .chatPage .starRating {
  position: relative;
  display: inline-block;
  /* 最大星数に応じてdivのwidthを伸縮させる */
  font-size: 19px;
  /* 塗りのズレを防ぐために奇数で設定すること*/
  line-height: 1em;
  text-shadow: 0 0 1px #000;
}
#app .myPage .starRating_empty,
#app .chatPage .starRating_empty {
  color: var(--gray_40);
}
#app .myPage .starRating_filled,
#app .chatPage .starRating_filled {
  position: absolute;
  /* .starRating_filledと.starRating_emptyを重ねる */
  top: 0;
  /* 左上の基準位置に移動させる */
  overflow: hidden;
  /* widthが足りない時、はみ出た分は表示しない */
  white-space: nowrap;
  /* widthが足りない時に、折り返さないようにする。 */
  color: #fac22a;
}
#app .myPage .dec_arrow,
#app .chatPage .dec_arrow {
  color: var(--gray_20);
  display: block;
  font-size: 2rem;
  -webkit-transform: scale(1, 0.7);
          transform: scale(1, 0.7);
}
#app .myPage .guide_box,
#app .chatPage .guide_box {
  width: 90% !important;
  padding: 30px;
  border: solid 5px var(--gray_10);
  margin: 20px auto;
  border-radius: 10px;
  position: relative;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
#app .myPage .guide_box h2,
#app .chatPage .guide_box h2 {
  font-size: 1.5rem;
  margin-bottom: 25px;
}
#app .myPage .guide_box figure,
#app .chatPage .guide_box figure {
  border-radius: 8px;
  width: 95%;
  margin: 0px 10px 25px;
  max-width: 500px;
  border: solid 5px rgba(var(--blue_main_rgb), 0.3);
}
#app .myPage .guide_box figure img,
#app .chatPage .guide_box figure img {
  width: 100%;
  height: auto;
  border: solid 1px #fff;
  border-radius: 5px;
}
#app .myPage .guide_box p,
#app .chatPage .guide_box p {
  font-size: 1rem;
}
#app .myPage .guide_box p .badge,
#app .chatPage .guide_box p .badge {
  margin-bottom: 5px;
  font-size: 0.8125rem;
}
#app .myPage .guide_box p i,
#app .myPage .guide_box p svg,
#app .chatPage .guide_box p i,
#app .chatPage .guide_box p svg {
  display: block;
  font-size: 2rem;
  margin-top: 15px;
  padding-left: 10px;
  color: var(--gray_20);
}
#app .myPage .guide_box .btn_close,
#app .chatPage .guide_box .btn_close {
  font-size: 1.25rem;
  position: absolute;
  right: 10px;
  top: 10px;
}
#app .myPage section[class*=content_],
#app .chatPage section[class*=content_] {
  margin-bottom: 30px;
}
#app .myPage .content_title,
#app .chatPage .content_title {
  width: 100%;
  line-height: 24px;
  font-size: 1rem;
  font-weight: bold;
  padding: 8px 10px;
  color: var(--navy_main);
}
#app .myPage h2 i,
#app .myPage h3 i,
#app .myPage h2 svg,
#app .myPage h3 svg,
#app .myPage .content_title i,
#app .myPage .content_title svg,
#app .chatPage h2 i,
#app .chatPage h3 i,
#app .chatPage h2 svg,
#app .chatPage h3 svg,
#app .chatPage .content_title i,
#app .chatPage .content_title svg {
  margin-right: 8px;
}
#app .myPage .text_title,
#app .chatPage .text_title {
  font-weight: bold;
  font-size: 0.8125rem;
}
#app .myPage .show_listicon li:before,
#app .chatPage .show_listicon li:before {
  content: "・";
  margin-right: 0px;
}
#app .myPage input[type=checkbox],
#app .myPage input[type=radio],
#app .chatPage input[type=checkbox],
#app .chatPage input[type=radio] {
  position: relative;
  top: 2px;
  margin-right: 5px;
}
#app .myPage .btn[class*=btn_sns_],
#app .chatPage .btn[class*=btn_sns_] {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  line-height: 33px;
  font-size: 1rem;
  text-align: center;
  position: relative;
  margin: 0 5px;
}
#app .myPage .btn_sns_line,
#app .chatPage .btn_sns_line {
  background-color: #1dcd00;
}
#app .myPage .btn_sns_twitter,
#app .chatPage .btn_sns_twitter {
  background-color: #0f1419;
}
#app .myPage .btn_sns_twitter img,
#app .chatPage .btn_sns_twitter img {
  width: 16px;
}
#app .myPage .btn_sns_instagram,
#app .chatPage .btn_sns_instagram {
  background-color: #a636b2;
  font-size: 1.25rem !important;
}
#app .myPage .btn_sns_youtube,
#app .chatPage .btn_sns_youtube {
  background-color: #ff0000;
}
#app .myPage .btn_sns_tiktok img,
#app .chatPage .btn_sns_tiktok img {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}
#app .myPage .btn_sns_blog,
#app .chatPage .btn_sns_blog {
  background-color: var(--blue_main);
  padding-left: 3px !important;
  font-size: 1.125rem !important;
}
#app .myPage .btn_sns_other,
#app .chatPage .btn_sns_other {
  background-color: var(--navy_main);
}
#app .myPage .btn[class*=btn_sns_] .tip,
#app .chatPage .btn[class*=btn_sns_] .tip {
  left: -84px;
  bottom: -17px;
}
#app .myPage .btn[class*=btn_sns_] i,
#app .myPage .btn[class*=btn_sns_] svg,
#app .chatPage .btn[class*=btn_sns_] i,
#app .chatPage .btn[class*=btn_sns_] svg {
  margin-right: 0 !important;
}
@media screen and (min-width: 769px) {
  #app .myPage .btn[class*=btn_sns_]:hover .tip,
  #app .chatPage .btn[class*=btn_sns_]:hover .tip {
    display: block;
  }
}
#app .myPage .balloon_box,
#app .chatPage .balloon_box {
  padding: 10px 13px;
  border-radius: 0.25rem;
  position: relative;
  word-break: break-all;
}
#app .myPage .balloon_box:before,
#app .chatPage .balloon_box:before {
  content: "▲";
  font-size: 1.0625rem;
  position: absolute;
  display: block;
  width: 100%;
  top: -14px;
  left: 0;
  text-align: center;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
#app .myPage .balloon_box.arrow_bottom:before,
#app .chatPage .balloon_box.arrow_bottom:before {
  content: "▼";
  top: auto;
  bottom: -12px;
}
#app .myPage .balloon_box.arrow_bottom_left:before,
#app .chatPage .balloon_box.arrow_bottom_left:before {
  content: "▼";
  top: auto;
  bottom: -12px;
  text-align: left;
  padding-left: 25%;
}
#app .myPage .balloon_box.arrow_bottom_left.min:before,
#app .chatPage .balloon_box.arrow_bottom_left.min:before {
  padding-left: 3px;
}
#app .myPage .balloon_box.arrow_bottom_right:before,
#app .chatPage .balloon_box.arrow_bottom_right:before {
  content: "▼";
  top: auto;
  bottom: -12px;
  text-align: right;
  padding-right: 25%;
}
#app .myPage .balloon_box.arrow_left:before,
#app .chatPage .balloon_box.arrow_left:before {
  text-align: left;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: inline-block;
  width: 30px;
  left: -15px;
  height: 30px;
  top: 0px;
}
#app .myPage .balloon_box.arrow_top_left:before,
#app .chatPage .balloon_box.arrow_top_left:before {
  content: "▲";
  top: -14px;
  left: 15px;
  text-align: left;
}
#app .myPage .balloon_box.is_attention,
#app .chatPage .balloon_box.is_attention {
  background-color: var(--red_bg);
  color: var(--red_main);
}
#app .myPage .balloon_box.is_attention:before,
#app .chatPage .balloon_box.is_attention:before {
  color: var(--red_bg);
}
#app .myPage .balloon_box.bg_lightyellow:before,
#app .chatPage .balloon_box.bg_lightyellow:before {
  color: var(--orange_bg);
}
#app .myPage .balloon_box.bg_lightglay:before,
#app .chatPage .balloon_box.bg_lightglay:before {
  color: var(--gray_5);
}
#app .myPage .balloon_box.bg_lightblue:before,
#app .chatPage .balloon_box.bg_lightblue:before {
  color: var(--navy_bg02);
}
#app .myPage .balloon_box.bg_white:before,
#app .chatPage .balloon_box.bg_white:before {
  color: #fff;
}
#app .myPage .balloon_box.dec_border,
#app .chatPage .balloon_box.dec_border {
  border: solid 1px var(--navy_main);
  background-color: #fff;
}
#app .myPage .balloon_box.dec_border:before,
#app .chatPage .balloon_box.dec_border:before {
  color: #fff;
  text-shadow: 0px -2px 1px var(--navy_main);
}
#app .myPage .morelink_area,
#app .chatPage .morelink_area {
  text-align: center;
  padding: 13px 5px 15px;
  border-top: solid 1px var(--navy_main);
  border-bottom: solid 1px var(--navy_main);
}
#app .myPage .message_linkbox,
#app .chatPage .message_linkbox {
  background: rgba(0, 123, 255, 0.05);
  padding: 5px 10px;
  margin-top: 10px;
  font-size: 0.75rem;
}
#app .myPage .message_linkbox a:before,
#app .chatPage .message_linkbox a:before {
  content: ">";
  font-weight: bold;
  margin-right: 3px;
}
#app .myPage .tab,
#app .chatPage .tab {
  display: -webkit-box;
  display: flex;
  width: 100%;
  border-bottom: solid 1px var(--gray_20);
  padding: 8px 12px 0;
  margin-bottom: 0;
}
#app .myPage .tab li,
#app .chatPage .tab li {
  border: solid 1px var(--gray_20);
  background-color: var(--navy_bg01);
  padding: 8px 15px;
  margin: 0 3px -1px;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  color: var(--navy_main);
  font-size: 0.875rem;
  position: relative;
}
#app .myPage .tab li.current,
#app .chatPage .tab li.current {
  border-bottom-color: #fff;
  color: var(--blue_main);
  font-weight: bold;
  background-color: #fff;
  cursor: default;
}
#app .myPage .tab li.is_error:after,
#app .chatPage .tab li.is_error:after {
  display: block;
  content: "！";
  color: #fff;
  background-color: var(--red_main);
  width: 18px;
  height: 18px;
  line-height: 18px;
  position: absolute;
  text-align: center;
  top: -9px;
  right: -3px;
  border-radius: 50%;
  font-size: 0.75rem;
}
#app .myPage .tab li:hover,
#app .chatPage .tab li:hover {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background-color: rgba(255, 255, 255, 0.9);
}
#app .myPage .tab li i,
#app .myPage .tab li svg,
#app .chatPage .tab li i,
#app .chatPage .tab li svg {
  margin-right: 5px;
}
#app .myPage .tab li .count:before,
#app .chatPage .tab li .count:before {
  content: "(";
  margin-left: 5px;
}
#app .myPage .tab li .count:after,
#app .chatPage .tab li .count:after {
  content: ")";
}
#app .myPage .tab_box,
#app .chatPage .tab_box {
  padding: 15px;
  display: none;
}
#app .myPage .tab_box:first-of-type,
#app .chatPage .tab_box:first-of-type {
  display: block;
}
@media screen and (max-width: 767px) {
  #app .myPage .tab,
  #app .chatPage .tab {
    padding: 8px 5px 0;
  }
  #app .myPage .tab li,
  #app .chatPage .tab li {
    padding: 5px 8px;
    font-size: 0.8125rem;
    margin: 0 2px -1px;
    line-height: 18px;
    text-align: center;
  }
}
#app .myPage .accordion_item,
#app .chatPage .accordion_item {
  background-color: #fff;
}
#app .myPage .accordion-header button,
#app .chatPage .accordion-header button {
  width: 100%;
  border: 0;
  background-color: #fff;
  border-bottom: solid 1px #cdd4e0;
  color: var(--text_main);
  text-align: left;
  padding: 10px 10px;
  font-weight: bold;
  display: -webkit-box;
  display: flex;
}
@media screen and (min-width: px) {
  #app .myPage .accordion-header button:hover,
  #app .chatPage .accordion-header button:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -webkit-transition: 0.2s;
    transition: 0.2s;
    color: var(--blue_main);
  }
}
#app .myPage .accordion-header button i:first-of-type,
#app .myPage .accordion-header button svg:first-of-type,
#app .chatPage .accordion-header button i:first-of-type,
#app .chatPage .accordion-header button svg:first-of-type {
  font-size: 1.25rem;
  color: var(--gray_30);
  margin-right: 8px;
}
#app .myPage .accordion-header button .fa-angle-down,
#app .chatPage .accordion-header button .fa-angle-down {
  font-size: 1.25rem;
  margin-left: auto;
  margin-top: 2px;
  color: var(--gray_10);
}
#app .myPage .accordion-header button:not(.collapsed),
#app .chatPage .accordion-header button:not(.collapsed) {
  color: var(--blue_main);
  background-color: rgba(var(--blue_main_rgb), 0.1);
}
#app .myPage .accordion-header button:not(.collapsed) .fa-angle-down,
#app .chatPage .accordion-header button:not(.collapsed) .fa-angle-down {
  color: var(--blue_main);
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#app .myPage .accordion-header button:not(.collapsed) i:first-of-type,
#app .myPage .accordion-header button:not(.collapsed) svg:first-of-type,
#app .chatPage .accordion-header button:not(.collapsed) i:first-of-type,
#app .chatPage .accordion-header button:not(.collapsed) svg:first-of-type {
  color: var(--blue_main);
}
#app .myPage .accordion_body,
#app .chatPage .accordion_body {
  border-bottom: solid 1px #cdd4e0;
}
#app .myPage .accordion_body .inner,
#app .chatPage .accordion_body .inner {
  padding: 13px 8px;
}
#app .myPage .accordion_body dd:nth-of-type(n + 2),
#app .chatPage .accordion_body dd:nth-of-type(n + 2) {
  margin-top: 20px;
}
#app .myPage .accordion_item .count,
#app .chatPage .accordion_item .count {
  margin-left: 3px;
}
#app .myPage header,
#app .myPage header.is_chat,
#app .chatPage header,
#app .chatPage header.is_chat {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: var(--navy_main);
  z-index: 10000;
}
#app .myPage header#is_chat,
#app .chatPage header#is_chat {
  display: block !important;
}
#app .myPage header > a,
#app .chatPage header > a {
  color: #fff;
}
@media screen and (min-width: 768px) {
  #app .myPage header > a:hover,
  #app .chatPage header > a:hover {
    color: #fff;
    text-decoration: underline;
  }
}
#app .myPage header #content-mainNav,
#app .chatPage header #content-mainNav {
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  -webkit-box-align: center;
          align-items: center;
  -webkit-align-items: center;
  -webkit-box-pack: justify;
          justify-content: space-between;
  padding: 0;
  position: relative;
  background-color: var(--navy_main);
  height: 46px;
}
@media screen and (max-width: 767px) {
  #app .myPage header #content-mainNav,
  #app .chatPage header #content-mainNav {
    height: 45px;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage,
  #app .chatPage {
    /* スマホヘッダー用アプリバナー */
  }
  #app .myPage header.is_headAppBnr #content-mainNav,
  #app .chatPage header.is_headAppBnr #content-mainNav {
    margin-top: 45px;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage header a:hover,
  #app .myPage .chat_item a:hover,
  #app .chatPage header a:hover,
  #app .chatPage .chat_item a:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage #notificationAllRead,
  #app .chatPage #notificationAllRead {
    height: 100svh;
  }
}
#app .myPage .sp_headAppBnr,
#app .chatPage .sp_headAppBnr {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .is_headAppBnr ~ #wrap,
  #app .chatPage .is_headAppBnr ~ #wrap {
    padding: 90px 0 0;
  }
  #app .myPage .is_headAppBnr .sp_headAppBnr,
  #app .chatPage .is_headAppBnr .sp_headAppBnr {
    position: fixed;
    display: block;
    width: 100%;
    height: 45px;
    background-color: #fff099;
    padding: 5px 10px;
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
  }
  #app .myPage .sp_headAppBnr .btn_close,
  #app .chatPage .sp_headAppBnr .btn_close {
    margin-right: 10px;
  }
  #app .myPage .sp_headAppBnr img,
  #app .chatPage .sp_headAppBnr img {
    width: 38px;
    margin-right: 10px;
  }
  #app .myPage .sp_headAppBnr .app_title p,
  #app .chatPage .sp_headAppBnr .app_title p {
    margin-bottom: 0;
  }
  #app .myPage .sp_headAppBnr .app_title p:first-of-type,
  #app .chatPage .sp_headAppBnr .app_title p:first-of-type {
    font-size: 11px;
  }
  #app .myPage .sp_headAppBnr .app_title p:last-of-type,
  #app .chatPage .sp_headAppBnr .app_title p:last-of-type {
    font-weight: bold;
    margin-top: -5px;
  }
}
#app .myPage header .menuBackLayer,
#app .chatPage header .menuBackLayer {
  display: none;
}
#app .myPage header .menuBackLayer.is_show,
#app .chatPage header .menuBackLayer.is_show {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: var(--gray_70_a);
  z-index: 1000;
}
#app .myPage #telNoticeModal.show + header .menuBackLayer.is_show,
#app .chatPage #telNoticeModal.show + header .menuBackLayer.is_show {
  z-index: 1100;
}
#app .myPage header .logoWrap,
#app .chatPage header .logoWrap {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding: 0 0 0 10px;
  height: 100%;
  width: 25%;
  min-width: 340px;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  #app .myPage header .logoWrap,
  #app .chatPage header .logoWrap {
    -webkit-box-flex: 1;
            flex-grow: 1;
    min-width: auto;
    padding: 0 0 0 5px;
  }
}
#app .myPage header > .logo,
#app .chatPage header > .logo {
  padding: 0 0 5px;
  margin: 0;
  font-size: 2rem;
}
#app .myPage header #content-mainNav .logo,
#app .chatPage header #content-mainNav .logo {
  padding: 0;
  font-size: 1rem;
}
#app .myPage header .logo img,
#app .chatPage header .logo img {
  height: 32px;
  width: auto;
}
#app .myPage .toSupporterDm,
#app .chatPage .toSupporterDm {
  position: relative;
}
#app .myPage .toSupporterDm .btn_toSupporterDm,
#app .chatPage .toSupporterDm .btn_toSupporterDm {
  font-size: 14px;
  color: #fff;
  margin-left: 12px;
  padding: 4px 12px;
  border: 2px solid #fff;
  background-color: var(--mint_vivid);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
@media (any-hover: hover) {
  #app .myPage .toSupporterDm .btn_toSupporterDm:hover,
  #app .chatPage .toSupporterDm .btn_toSupporterDm:hover {
    -webkit-transition-property: -webkit-filter;
    transition-property: -webkit-filter;
    transition-property: filter;
    transition-property: filter, -webkit-filter;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    opacity: 1;
    -webkit-filter: brightness(1.05);
            filter: brightness(1.05);
  }
}
#app .myPage .toSupporterDm .btn_toSupporterDm img,
#app .chatPage .toSupporterDm .btn_toSupporterDm img {
  width: 22px;
  height: 22px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 4px;
}
#app .myPage .toSupporterDm .balloon_box,
#app .chatPage .toSupporterDm .balloon_box {
  text-align: center;
  position: absolute;
  top: 45px;
  background-color: #fff;
  border: 1px solid var(--mint_main);
  min-width: 176px;
  box-shadow: 0px 0px 12px 0px var(--gray_20_a);
}
#app .myPage .toSupporterDm .balloon_box::before,
#app .chatPage .toSupporterDm .balloon_box::before {
  color: #fff;
  font-size: 16px;
  -webkit-filter: drop-shadow(0px -2px 0px rgba(var(--mint_main_rgb)));
          filter: drop-shadow(0px -2px 0px rgba(var(--mint_main_rgb)));
}
#app .myPage .toSupporterDm .balloon_box .icon_close,
#app .chatPage .toSupporterDm .balloon_box .icon_close {
  position: absolute;
  top: -12px;
  right: -12px;
  background-color: var(--gray_50);
  border: 2px solid #fff;
  border-radius: 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
}
@media (any-hover: hover) {
  #app .myPage .toSupporterDm .balloon_box .icon_close:hover,
  #app .chatPage .toSupporterDm .balloon_box .icon_close:hover {
    -webkit-transition-property: -webkit-filter;
    transition-property: -webkit-filter;
    transition-property: filter;
    transition-property: filter, -webkit-filter;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    opacity: 1;
    -webkit-filter: brightness(120%);
            filter: brightness(120%);
  }
}
#app .myPage .toSupporterDm .balloon_box .icon_close i,
#app .myPage .toSupporterDm .balloon_box .icon_close svg,
#app .chatPage .toSupporterDm .balloon_box .icon_close i,
#app .chatPage .toSupporterDm .balloon_box .icon_close svg {
  font-size: 1.1875rem;
  width: 12px;
  color: #fff;
  fill: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#app .myPage .toSupporterDm .balloon_box .text,
#app .chatPage .toSupporterDm .balloon_box .text {
  color: var(--mint_main);
  font-weight: bold;
}
#app .myPage .toSupporterDm .balloon_box .subText,
#app .chatPage .toSupporterDm .balloon_box .subText {
  font-size: 0.75rem;
}
#app .myPage .toSupporterDm .balloon_box label,
#app .chatPage .toSupporterDm .balloon_box label {
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  #app .myPage header .logoWrap .btn_toChatPage,
  #app .chatPage header .logoWrap .btn_toChatPage {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage header .logoWrap .btn_toChatPage,
  #app .chatPage header .logoWrap .btn_toChatPage {
    padding: 4px 10px;
    margin-left: 20px;
    font-size: 12px;
    font-weight: bold;
    border: none;
  }
  #app .myPage header .logoWrap .btn_toChatPage i,
  #app .myPage header .logoWrap .btn_toChatPage svg,
  #app .chatPage header .logoWrap .btn_toChatPage i,
  #app .chatPage header .logoWrap .btn_toChatPage svg {
    font-size: 12px;
    width: 13.5px;
    margin-right: 5px;
  }
}
#app .myPage #content-mainNav > .logoWrap > .btn_back,
#app .chatPage #content-mainNav > .logoWrap > .btn_back {
  position: absolute;
  display: -webkit-box !important;
  display: flex !important;
  -webkit-box-align: center;
          align-items: center;
  width: 170px;
  height: 40px;
  font-size: 0.875rem;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 10px 0 5px;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #app .myPage #content-mainNav > .logoWrap > .btn_back,
  #app .chatPage #content-mainNav > .logoWrap > .btn_back {
    position: static;
    margin-left: 30px;
  }
}
#app .myPage #content-mainNav .btn_back i,
#app .myPage #content-mainNav .btn_back svg,
#app .chatPage #content-mainNav .btn_back i,
#app .chatPage #content-mainNav .btn_back svg {
  font-size: 1.5rem;
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.6);
}
#app .myPage .headerMenu,
#app .chatPage .headerMenu {
  position: absolute;
  background-color: #fff;
  z-index: 999;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
#app .myPage .headerMenu.show,
#app .chatPage .headerMenu.show {
  display: -webkit-box;
  display: flex;
}
#app .myPage .headerMenu .menuHeading,
#app .chatPage .headerMenu .menuHeading {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  background-color: var(--navy_main);
  min-height: 52px;
}
#app .myPage .headerMenu .menuHeading .toHomeIcon,
#app .chatPage .headerMenu .menuHeading .toHomeIcon {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background-color: #fff;
  width: 47px;
  height: 30px;
  border-radius: 20px;
  margin-left: 10px;
  color: var(--navy_main);
}
#app .myPage .headerMenu .menuHeading .toHomeIcon i,
#app .myPage .headerMenu .menuHeading .toHomeIcon svg,
#app .chatPage .headerMenu .menuHeading .toHomeIcon i,
#app .chatPage .headerMenu .menuHeading .toHomeIcon svg {
  font-size: 20px;
  width: 22.5px;
  height: auto;
}
#app .myPage .headerMenuListHeading,
#app .chatPage .headerMenuListHeading {
  background-color: var(--navy_bg02);
  padding: 7px 10px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  color: var(--navy_main);
}
#app .myPage .headerMenuListHeading.subHeading,
#app .chatPage .headerMenuListHeading.subHeading {
  background-color: var(--gray_5);
  color: var(--text_main);
}
#app .myPage .headerMenuListHeading i,
#app .myPage .headerMenuListHeading svg,
#app .chatPage .headerMenuListHeading i,
#app .chatPage .headerMenuListHeading svg {
  margin-right: 8px;
}
#app .myPage .headerMenuListHeading .logo_icon,
#app .chatPage .headerMenuListHeading .logo_icon {
  width: 18px;
  margin-right: 5px;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  margin-top: 1px;
}
#app .myPage .headerMenuList,
#app .myPage .headerMenuList ul,
#app .chatPage .headerMenuList,
#app .chatPage .headerMenuList ul {
  margin-bottom: 5px;
}
#app .myPage .headerMenuList li > a,
#app .chatPage .headerMenuList li > a {
  position: relative;
  display: block;
  padding: 15px 10px 12px 20px;
  font-size: 15px;
  color: var(--text_main) !important;
  border-top: 1px solid var(--gray_10);
}
#app .myPage .headerMenuList li:first-of-type > a,
#app .chatPage .headerMenuList li:first-of-type > a {
  border-top: none;
}
#app .myPage .headerMenuList li i,
#app .myPage .headerMenuList li svg,
#app .chatPage .headerMenuList li i,
#app .chatPage .headerMenuList li svg {
  color: var(--gray_30);
  fill: var(--gray_30);
}
#app .myPage .headerMenuList li .icon_outLink,
#app .myPage .headerMenuList li .fa-angle-right,
#app .chatPage .headerMenuList li .icon_outLink,
#app .chatPage .headerMenuList li .fa-angle-right {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--gray_30);
  font-size: 15px;
  width: 7.5px;
  height: auto;
}
#app .myPage .headerMenuList li .icon_mail,
#app .chatPage .headerMenuList li .icon_mail {
  height: 14px;
}
#app .myPage .headerMenuList li .icon_outLink,
#app .chatPage .headerMenuList li .icon_outLink {
  width: 11px;
}
#app .myPage .headerMenuList .chatbot_list i,
#app .myPage .headerMenuList .chatbot_list svg,
#app .chatPage .headerMenuList .chatbot_list i,
#app .chatPage .headerMenuList .chatbot_list svg {
  color: var(--gray_30);
  fill: var(--gray_30);
  font-size: 16px;
  width: 16px;
}
#app .myPage .headerMenuList .chatbot_list .question_icon,
#app .chatPage .headerMenuList .chatbot_list .question_icon {
  position: relative;
  display: inline-block;
  width: 16px;
}
#app .myPage .headerMenuList .chatbot_list .question_icon::before,
#app .chatPage .headerMenuList .chatbot_list .question_icon::before {
  content: "?";
  font-weight: bold;
  font-size: 10px;
  position: absolute;
  top: -1px;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(0.8);
          transform: translateX(-50%) scale(0.8);
  color: #fff;
}
#app .myPage .headerMenuList li .fa-external-link-alt,
#app .chatPage .headerMenuList li .fa-external-link-alt {
  color: var(--gray_30);
  font-size: 0.6875rem;
  margin-right: 8px;
}
#app .myPage .headerMenuList li li > a,
#app .chatPage .headerMenuList li li > a {
  padding: 8px 10px 8px 30px;
  font-size: 14px;
  border-top: none;
}
#app .myPage .headerMenuList li li > a::before,
#app .chatPage .headerMenuList li li > a::before {
  content: "-";
  margin-right: 5px;
}
#app .myPage .headerMenuList li li .fa-angle-right,
#app .chatPage .headerMenuList li li .fa-angle-right {
  top: 12px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  right: 11px;
  font-size: 12px;
  width: 6px;
  height: auto;
}
#app .myPage .headerMenuList a.router-link-active,
#app .chatPage .headerMenuList a.router-link-active {
  background-color: #f4f6fa;
  font-weight: bold;
  pointer-events: none;
}
#app .myPage .headerMenuList a.router-link-active:before,
#app .chatPage .headerMenuList a.router-link-active:before {
  color: #fff;
  background-color: var(--navy_main);
  content: "表示中";
  font-size: 0.625rem;
  margin-right: 5px;
  border-radius: 3px;
  padding: 3px 5px;
  font-weight: normal;
}
#app .myPage .headerMenu .btn_close,
#app .chatPage .headerMenu .btn_close {
  border-radius: 0;
  padding-top: 5px;
  width: 100%;
  position: relative;
  z-index: 2;
}
#app .myPage .headerMenu .btn_close:before,
#app .chatPage .headerMenu .btn_close:before {
  content: "✕";
  margin-right: 5px;
}
#app .myPage footer,
#app .chatPage footer {
  width: 100%;
  background-color: var(--navy_main);
  color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
          justify-content: flex-end;
  flex-wrap: wrap;
  padding: 20px;
}
#app .myPage footer .copyright_area,
#app .chatPage footer .copyright_area {
  align-self: center;
}
#app .myPage footer .copyright_area:first-letter,
#app .chatPage footer .copyright_area:first-letter {
  font-size: 110%;
}
#app .myPage footer .link_area,
#app .chatPage footer .link_area {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage footer .link_area a:not(.btn),
#app .chatPage footer .link_area a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  margin: 0 5px;
}
#app .myPage footer .link_items,
#app .chatPage footer .link_items {
  margin-left: 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage footer .link_items .link_item,
#app .chatPage footer .link_items .link_item {
  text-decoration: none;
  color: #fff;
  padding: 0 10px;
}
#app .myPage footer .link_items .link_item + .link_item,
#app .chatPage footer .link_items .link_item + .link_item {
  border-left: 1px solid var(--gray_30);
}
#app .myPage img.sns_line,
#app .chatPage img.sns_line {
  width: 32px;
  height: 32px;
  margin: 0 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage footer,
  #app .chatPage footer {
    padding: 10px;
  }
  #app .myPage footer .official_link,
  #app .chatPage footer .official_link {
    display: none;
  }
  #app .myPage footer .copyright_area,
  #app .myPage footer .link_item,
  #app .chatPage footer .copyright_area,
  #app .chatPage footer .link_item {
    font-size: 80%;
  }
}
#app .myPage #content-mainNav .btn_mypage,
#app .chatPage #content-mainNav .btn_mypage {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-left: solid 1px rgba(255, 255, 255, 0.5);
  padding: 4px 8px 0 8px;
  max-width: 20%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  position: relative;
  font-weight: bold;
}
#app .myPage #content-mainNav .btn_mypage,
#app .chatPage #content-mainNav .btn_mypage {
  background-color: transparent;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content; /* user-frontでは不要 */
  /* user-frontでは必要だけどfront-mockに反映すると崩れる
  min-width: 100%; */
}
#app .myPage #content-mainNav .btn_mypage [class^=userstatus_],
#app .chatPage #content-mainNav .btn_mypage [class^=userstatus_] {
  position: absolute;
  top: 18px;
  left: 32px;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  padding: 0;
}
#app .myPage #content-mainNav .btn_mypage.is_unicorn [class^=userstatus_],
#app .chatPage #content-mainNav .btn_mypage.is_unicorn [class^=userstatus_] {
  top: 21px;
}
#app .myPage #content-mainNav .btn_mypage [class^=userstatus_]:before,
#app .chatPage #content-mainNav .btn_mypage [class^=userstatus_]:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 12px;
  margin: 0;
}
#app .myPage #content-mainNav .btn_mypage .userstatus_free,
#app .chatPage #content-mainNav .btn_mypage .userstatus_free {
  background-color: #fff;
  border: 1px solid var(--gray_5);
}
#app .myPage #content-mainNav .btn_mypage .userstatus_pengin,
#app .myPage #content-mainNav .btn_mypage .userstatus_yaruze_pengin,
#app .chatPage #content-mainNav .btn_mypage .userstatus_pengin,
#app .chatPage #content-mainNav .btn_mypage .userstatus_yaruze_pengin {
  background-color: #f1e8ff;
  border: 1px solid #f8f5fc;
}
#app .myPage #content-mainNav .btn_mypage .userstatus_iruka,
#app .chatPage #content-mainNav .btn_mypage .userstatus_iruka {
  background-color: #e6f2ff;
  border: 1px solid #f7fbff;
}
#app .myPage #content-mainNav .btn_mypage .userstatus_panda,
#app .chatPage #content-mainNav .btn_mypage .userstatus_panda {
  background-color: #e4f2d0;
  border: 1px solid #f7faf2;
}
#app .myPage #content-mainNav .btn_mypage .userstatus_tora,
#app .chatPage #content-mainNav .btn_mypage .userstatus_tora {
  background-color: #fff2d8;
  border: 1px solid #fffbf2;
}
@media screen and (min-width: 1001px) {
  #app .myPage #content-mainNav .btn_mypage:after,
  #app .chatPage #content-mainNav .btn_mypage:after {
    content: "メニュー";
    font-size: 0.625rem;
    font-weight: normal;
    display: block;
    text-align: left;
    margin: -4px 0 -1px 0;
    -webkit-transform: scale(0.9) translateX(-5%);
            transform: scale(0.9) translateX(-5%);
  }
  #app .myPage #content-mainNav .btn_mypage.is_unicorn:after,
  #app .chatPage #content-mainNav .btn_mypage.is_unicorn:after {
    margin: -6px 0 -1px 1px;
  }
}
#app .myPage #content-mainNav .btn_mypage .user_proficon,
#app .chatPage #content-mainNav .btn_mypage .user_proficon {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}
#app .myPage #content-mainNav .btn_mypage .border_gradient,
#app .chatPage #content-mainNav .btn_mypage .border_gradient {
  display: inline-block;
}
#app .myPage #content-mainNav .btn_mypage.is_unicorn .border_gradient,
#app .chatPage #content-mainNav .btn_mypage.is_unicorn .border_gradient {
  background: -webkit-linear-gradient(left top, #d274fc, #7057fa);
  background: linear-gradient(to right bottom, #d274fc, #7057fa);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 2px;
  box-sizing: border-box;
}
#app .myPage #content-mainNav .btn_mypage .border_inner,
#app .chatPage #content-mainNav .btn_mypage .border_inner {
  display: inline-block;
}
#app .myPage #content-mainNav .btn_mypage.is_unicorn .border_inner,
#app .chatPage #content-mainNav .btn_mypage.is_unicorn .border_inner {
  background: var(--navy_main);
  border-radius: 50%;
}
#app .myPage #content-mainNav .btn_mypage.is_unicorn .user_proficon,
#app .chatPage #content-mainNav .btn_mypage.is_unicorn .user_proficon {
  border: none;
  width: 100%;
  aspect-ratio: 1/1;
}
#app .myPage #content-mainNav .btn_mypage .username,
#app .chatPage #content-mainNav .btn_mypage .username {
  position: relative;
  top: 8px;
  margin-left: 5px;
}
@media screen and (max-width: 1600px) {
  #app .myPage #content-mainNav .btn_mypage [class^=userstatus_],
  #app .chatPage #content-mainNav .btn_mypage [class^=userstatus_] {
    position: absolute;
    top: 12px;
    left: 27px;
  }
  #app .myPage #content-mainNav .btn_mypage.is_unicorn [class^=userstatus_],
  #app .chatPage #content-mainNav .btn_mypage.is_unicorn [class^=userstatus_] {
    top: 14px;
  }
  #app .myPage #content-mainNav .btn_mypage:before,
  #app .myPage #content-mainNav .btn_mypage .username,
  #app .chatPage #content-mainNav .btn_mypage:before,
  #app .chatPage #content-mainNav .btn_mypage .username {
    display: none;
  }
  #app .myPage #content-mainNav .btn_mypage,
  #app .chatPage #content-mainNav .btn_mypage {
    min-width: 50px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    padding: 3px 3px 0;
    height: 45px;
    overflow: hidden;
  }
  #app .myPage #content-mainNav .btn_mypage .border_gradient,
  #app .chatPage #content-mainNav .btn_mypage .border_gradient {
    margin: 0 0 0 -10px;
  }
  #app .myPage #content-mainNav .btn_mypage.is_unicorn .border_gradient,
  #app .chatPage #content-mainNav .btn_mypage.is_unicorn .border_gradient {
    width: 31px;
    height: 31px;
    margin: 0 0 0 -7px;
  }
  #app .myPage #content-mainNav .btn_mypage .user_proficon,
  #app .chatPage #content-mainNav .btn_mypage .user_proficon {
    margin: 0;
    width: 27px;
    height: 27px;
    min-width: 27px;
    min-height: 27px;
  }
  #app .myPage #content-mainNav .btn_mypage:after,
  #app .chatPage #content-mainNav .btn_mypage:after {
    content: "メニュー";
    font-size: 0.625rem;
    display: block;
    margin: -3px 0 0 0;
  }
  #app .myPage #content-mainNav .btn_mypage.is_unicorn:after,
  #app .chatPage #content-mainNav .btn_mypage.is_unicorn:after {
    margin: -5px 0 0 0;
  }
}
#app .myPage header .btn_myPageMenuClose,
#app .chatPage header .btn_myPageMenuClose {
  display: none;
  position: fixed;
  top: 16px;
  right: 360px;
  font-size: 36px;
  color: #fff;
  z-index: 100200;
  cursor: pointer;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#app .myPage header .btn_myPageMenuClose.is_show,
#app .chatPage header .btn_myPageMenuClose.is_show {
  display: block;
}
#app .myPage header .myPageMenu,
#app .chatPage header .myPageMenu {
  display: block;
  position: fixed;
  top: 0;
  right: -340px;
  width: 340px;
  height: 100vh;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-width: none;
  z-index: 100200;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  padding-bottom: 30vh;
}
#app .myPage header .myPageMenu::-webkit-scrollbar,
#app .chatPage header .myPageMenu::-webkit-scrollbar {
  background-color: var(--gray_5);
  height: 0;
}
#app .myPage header .myPageMenu.is_show,
#app .chatPage header .myPageMenu.is_show {
  right: 0;
}
#app .myPage header .myPageMenu .menuHeading,
#app .chatPage header .myPageMenu .menuHeading {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 340px;
  z-index: 100;
}
#app .myPage header .myPageMenu .menuHeading .toHomeIcon,
#app .chatPage header .myPageMenu .menuHeading .toHomeIcon {
  display: none;
}
#app .myPage header .myPageMenu .myPageMenuUserInfoWrap,
#app .chatPage header .myPageMenu .myPageMenuUserInfoWrap {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  background-color: #fff;
  padding: 0 0 10px 0;
  border-bottom: 1px solid var(--gray_60);
  z-index: 100;
}
#app .myPage header .myPageMenu .myPageMenuUserInfo,
#app .chatPage header .myPageMenu .myPageMenuUserInfo {
  position: relative;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 10px 0 90px;
  color: var(--text_main) !important;
}
#app .myPage header .myPageMenu .myPageMenuUserInfo .myPageMenuUserInfoImg,
#app .chatPage header .myPageMenu .myPageMenuUserInfo .myPageMenuUserInfoImg {
  position: absolute;
  width: 80px;
  left: 10px;
}
#app .myPage header .myPageMenu .myPageMenuUserInfo .myPageMenuUserInfoImg img,
#app .chatPage header .myPageMenu .myPageMenuUserInfo .myPageMenuUserInfoImg img {
  width: 65px;
  height: 65px;
  -o-object-fit: cover;
     object-fit: cover;
  border: solid 1px var(--gray_10);
}
#app .myPage header .myPageMenu .myPageMenuUserInfo .username,
#app .chatPage header .myPageMenu .myPageMenuUserInfo .username {
  width: calc(100% - 20px);
  font-size: 0.9375rem;
  font-weight: bold;
  padding-top: 10px;
  margin-bottom: 10px;
}
#app .myPage header .myPageMenu .myPageMenuUserInfo .username a,
#app .chatPage header .myPageMenu .myPageMenuUserInfo .username a {
  color: var(--text_main);
}
#app .myPage header .myPageMenu .myPageMenuUserInfo .userStatusWrap,
#app .chatPage header .myPageMenu .myPageMenuUserInfo .userStatusWrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage header .myPageMenu .myPageMenuUserInfo .userStatusWrap .unicornStatus,
#app .chatPage header .myPageMenu .myPageMenuUserInfo .userStatusWrap .unicornStatus {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--gray_30);
  min-width: 60px;
}
#app .myPage header .myPageMenu .myPageMenuUserInfo .fa-angle-right,
#app .chatPage header .myPageMenu .myPageMenuUserInfo .fa-angle-right {
  position: absolute;
  top: 50%;
  right: 10px;
  font-size: 20px;
  width: 10px;
  height: auto;
  color: var(--gray_30);
  fill: var(--gray_30);
}
#app .myPage header .myPageMenu .followStatusInfo,
#app .chatPage header .myPageMenu .followStatusInfo {
  display: -webkit-box;
  display: flex;
  margin-top: 10px;
  margin-left: 90px;
  color: var(--text_main);
  font-size: 16px;
}
#app .myPage header .myPageMenu .followStatusInfo a,
#app .chatPage header .myPageMenu .followStatusInfo a {
  font-weight: bold;
  color: var(--blue_main) !important;
}
#app .myPage header .myPageMenu .followStatusInfo .follower,
#app .chatPage header .myPageMenu .followStatusInfo .follower {
  margin-left: 10px;
}
#app .myPage header .myPageMenu .btn_logoutWrap,
#app .chatPage header .myPageMenu .btn_logoutWrap {
  padding: 20px;
  border-top: 1px solid var(--gray_10);
}
#app .myPage header .myPageMenu .btn_logout,
#app .chatPage header .myPageMenu .btn_logout {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  width: 200px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}
#app .myPage header .myPageMenu .btn_logout .fa-sign-out-alt,
#app .chatPage header .myPageMenu .btn_logout .fa-sign-out-alt {
  font-size: 20px;
  width: 22.5px;
  height: auto;
  margin-right: 5px;
}
#app .myPage header .myPageMenu .link_profqr,
#app .chatPage header .myPageMenu .link_profqr {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding: 4px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 8px auto;
  color: var(--blue_main);
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}
@media (any-hover: hover) {
  #app .myPage header .myPageMenu .link_profqr:hover,
  #app .chatPage header .myPageMenu .link_profqr:hover {
    opacity: 0.7;
  }
}
#app .myPage header .myPageMenu .btn_change,
#app .chatPage header .myPageMenu .btn_change {
  margin: 10px auto 0;
  font-size: 0.8125rem;
  display: block;
  width: 200px;
}
@media screen and (max-width: 767px) {
  #app .myPage header .myPageMenu,
  #app .chatPage header .myPageMenu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    padding-top: 0;
    overflow-y: scroll;
    border: none;
    z-index: 100200;
  }
  #app .myPage header .myPageMenu.is_show,
  #app .chatPage header .myPageMenu.is_show {
    right: 0;
  }
  #app .myPage header .myPageMenu .menuHeading,
  #app .chatPage header .myPageMenu .menuHeading {
    position: relative;
    top: auto;
    width: 100%;
  }
  #app .myPage header .myPageMenu .menuHeading .toHomeIcon,
  #app .chatPage header .myPageMenu .menuHeading .toHomeIcon {
    display: -webkit-box;
    display: flex;
  }
  #app .myPage header .myPageMenu .myPageMenuUserInfoWrap,
  #app .chatPage header .myPageMenu .myPageMenuUserInfoWrap {
    position: relative;
    top: auto;
    width: 100%;
  }
  #app .myPage header .btn_myPageMenuClose,
  #app .chatPage header .btn_myPageMenuClose {
    right: 320px;
  }
}
@media screen and (max-width: 320px) {
  #app .myPage header .myPageMenu,
  #app .chatPage header .myPageMenu {
    right: -280px;
    width: 280px;
  }
  #app .myPage header .myPageMenu.is_show,
  #app .chatPage header .myPageMenu.is_show {
    right: 0;
  }
  #app .myPage header .btn_myPageMenuClose,
  #app .chatPage header .btn_myPageMenuClose {
    right: 286px;
  }
}
#app .myPage #content-mainNav .form_data_area,
#app .chatPage #content-mainNav .form_data_area {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-flex: 10;
          flex-grow: 10;
  flex-shrink: 1;
  border-left: solid 1px rgba(255, 255, 255, 0.5);
  padding-left: 10px;
  height: 100%;
}
#app .myPage #content-mainNav .form_data_area + div,
#app .chatPage #content-mainNav .form_data_area + div {
  max-width: 25%;
}
#app .myPage #content-mainNav .headerSearchType,
#app .chatPage #content-mainNav .headerSearchType {
  width: auto;
  height: 32px;
  min-height: 32px;
  border-radius: 5px;
  padding: 5px 20px 5px 5px;
  margin-right: 10px;
  font-size: 12px;
}
@media screen and (max-width: 1000px) {
  #app .myPage #content-mainNav .headerSearchType,
  #app .chatPage #content-mainNav .headerSearchType {
    display: none;
  }
}
#app .myPage #content-mainNav .headerSearch,
#app .chatPage #content-mainNav .headerSearch {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-flex: 1;
          flex-grow: 1;
  margin-right: 10px;
}
#app .myPage #content-mainNav .input_search,
#app .chatPage #content-mainNav .input_search {
  width: 100%;
  max-width: 300px;
  height: 32px;
  border-radius: 5px 0 0 5px;
  border-right: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-size: 12px;
  background-color: var(--gray_5);
}
#app .myPage #content-mainNav .input_search:focus,
#app .chatPage #content-mainNav .input_search:focus {
  background-color: rgb(255, 255, 255);
  box-shadow: none;
}
#app .myPage #content-mainNav .btn_headerSearch,
#app .chatPage #content-mainNav .btn_headerSearch {
  flex-shrink: 0;
  border: 1px solid #fff;
  width: 40px;
  background-color: var(--navy_main);
  height: 30px;
  border-radius: 0 5px 5px 0;
  color: #fff;
}
#app .myPage #content-mainNav .delete_icon,
#app .chatPage #content-mainNav .delete_icon {
  display: none;
}
#app .myPage .searchSuggestWrap,
#app .chatPage .searchSuggestWrap {
  position: absolute;
  top: 38px;
  width: 400px;
  max-width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 12px 0px var(--gray_40_a);
  height: 0;
  overflow-y: auto;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  z-index: 20;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchSuggestWrap,
  #app .chatPage .searchSuggestWrap {
    position: fixed;
    top: 89px;
    left: 0;
    width: 100vw;
  }
  #app .myPage .searchSuggestWrap.is_close,
  #app .chatPage .searchSuggestWrap.is_close {
    height: 0 !important;
    padding-block: 0 !important;
  }
  #app .myPage .searchSuggestWrap.is_close + .suggestBackLayer,
  #app .chatPage .searchSuggestWrap.is_close + .suggestBackLayer {
    display: none !important;
  }
}
#app .myPage .searchSuggestWrap .moreLink,
#app .chatPage .searchSuggestWrap .moreLink {
  font-size: 0.875rem;
  font-weight: bold;
  text-align: right;
  margin-right: 16px;
  margin-block: 12px 24px;
}
#app .myPage .searchSuggestWrap .noResult,
#app .chatPage .searchSuggestWrap .noResult {
  color: var(--gray_50);
  font-size: 0.875rem;
  margin-inline: 16px;
  margin-bottom: 24px;
}
#app .myPage .searchSuggestWrap .btn_close_wrap,
#app .chatPage .searchSuggestWrap .btn_close_wrap {
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 12px;
}
#app .myPage .searchSuggestWrap .btn_close,
#app .chatPage .searchSuggestWrap .btn_close {
  color: #fff;
  font-size: 0.875rem;
  font-weight: bold;
  background-color: var(--gray_60);
  width: 100%;
  padding-block: 8px;
}
#app .myPage .input_search:focus ~ .searchSuggestWrap,
#app .myPage .searchSuggestWrap:hover,
#app .chatPage .input_search:focus ~ .searchSuggestWrap,
#app .chatPage .searchSuggestWrap:hover {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  max-height: calc(100svh - 80px);
  padding-block: 16px 20px;
}
@media screen and (max-width: 767px) {
  #app .myPage .input_search:focus ~ .searchSuggestWrap,
  #app .myPage .searchSuggestWrap:hover,
  #app .chatPage .input_search:focus ~ .searchSuggestWrap,
  #app .chatPage .searchSuggestWrap:hover {
    padding-bottom: 0;
  }
  #app .myPage .input_search:focus ~ .searchSuggestWrap .btn_close_wrap,
  #app .myPage .searchSuggestWrap:hover .btn_close_wrap,
  #app .chatPage .input_search:focus ~ .searchSuggestWrap .btn_close_wrap,
  #app .chatPage .searchSuggestWrap:hover .btn_close_wrap {
    display: block;
  }
  #app .myPage .input_search:focus ~ .searchSuggestWrap + .suggestBackLayer,
  #app .myPage .searchSuggestWrap:hover + .suggestBackLayer,
  #app .chatPage .input_search:focus ~ .searchSuggestWrap + .suggestBackLayer,
  #app .chatPage .searchSuggestWrap:hover + .suggestBackLayer {
    display: block;
  }
}
#app .myPage .searchSuggest_title,
#app .chatPage .searchSuggest_title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: justify;
          justify-content: space-between;
  color: var(--navy_main);
  font-size: 0.875rem;
  font-weight: bold;
  padding-inline: 16px;
  margin-bottom: 8px;
}
#app .myPage .searchSuggest_title .inner,
#app .chatPage .searchSuggest_title .inner {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage .searchSuggest_title .option,
#app .chatPage .searchSuggest_title .option {
  font-size: 0.75rem;
  font-weight: normal;
  margin-bottom: 0;
  display: inline-block;
  width: calc(100% - 60px);
}
#app .myPage .searchSuggest_title .option span,
#app .chatPage .searchSuggest_title .option span {
  display: inline-block;
  width: calc(100% - 2em);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
#app .myPage .searchSuggest_clear .searchSuggest_clear_btn,
#app .chatPage .searchSuggest_clear .searchSuggest_clear_btn {
  color: var(--blue_main);
  font-size: 0.75rem;
  background: none;
  border: none;
}
#app .myPage .searchSuggestWord,
#app .chatPage .searchSuggestWord {
  width: 100%;
  padding-inline: 16px;
  margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchSuggestWord,
  #app .chatPage .searchSuggestWord {
    margin-bottom: 32px;
  }
}
#app .myPage .searchSuggestWord:has(.spinner-border),
#app .chatPage .searchSuggestWord:has(.spinner-border) {
  text-align: center;
}
#app .myPage .searchSuggestWord li a,
#app .chatPage .searchSuggestWord li a {
  display: block;
  font-size: 0.8125rem;
  padding: 2px 8px;
  background-color: var(--blue_bg);
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchSuggestWord li a,
  #app .chatPage .searchSuggestWord li a {
    padding: 8px;
  }
}
#app .myPage .searchSuggestWord li + li,
#app .chatPage .searchSuggestWord li + li {
  margin-top: 6px;
}
#app .myPage .searchSuggestChat_wrap,
#app .chatPage .searchSuggestChat_wrap {
  margin-bottom: 30px;
}
#app .myPage .searchSuggestChat_wrap:has(.moreLink),
#app .chatPage .searchSuggestChat_wrap:has(.moreLink) {
  margin-bottom: 0;
}
#app .myPage .searchSuggestChat:has(.spinner-border),
#app .chatPage .searchSuggestChat:has(.spinner-border) {
  text-align: center;
}
#app .myPage .searchSuggestChat .chat_item,
#app .chatPage .searchSuggestChat .chat_item {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  border-bottom: solid 1px var(--gray_5);
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  position: relative;
  /*LC公式*/
  /*オフ会表示*/
}
#app .myPage .searchSuggestChat .chat_item:first-of-type,
#app .chatPage .searchSuggestChat .chat_item:first-of-type {
  border-top: solid 1px var(--gray_5);
}
#app .myPage .searchSuggestChat .chat_item.is_lc:before, #app .myPage .searchSuggestChat .chat_item.is_off:before,
#app .chatPage .searchSuggestChat .chat_item.is_lc:before,
#app .chatPage .searchSuggestChat .chat_item.is_off:before {
  font-size: 0.5625rem;
  letter-spacing: 1px;
  position: absolute;
  z-index: 1;
  font-weight: bold;
  -webkit-transform: rotate(-45deg) scale(0.8);
          transform: rotate(-45deg) scale(0.8);
}
#app .myPage .searchSuggestChat .chat_item.is_lc:after, #app .myPage .searchSuggestChat .chat_item.is_off:after,
#app .chatPage .searchSuggestChat .chat_item.is_lc:after,
#app .chatPage .searchSuggestChat .chat_item.is_off:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
#app .myPage .searchSuggestChat .chat_item.is_lc:before,
#app .chatPage .searchSuggestChat .chat_item.is_lc:before {
  content: "公式";
  color: #000;
  left: -2px;
  top: -1px;
}
#app .myPage .searchSuggestChat .chat_item.is_lc:after,
#app .chatPage .searchSuggestChat .chat_item.is_lc:after {
  border-color: #82f1ec transparent transparent transparent;
}
#app .myPage .searchSuggestChat .chat_item.is_off:before,
#app .chatPage .searchSuggestChat .chat_item.is_off:before {
  content: "オフ会";
  color: #fff;
  font-weight: normal;
  left: -7px;
  top: 0;
  -webkit-transform: rotate(-45deg) scale(0.65);
          transform: rotate(-45deg) scale(0.65);
}
#app .myPage .searchSuggestChat .chat_item.is_off:after,
#app .chatPage .searchSuggestChat .chat_item.is_off:after {
  border-color: var(--orange_main) transparent transparent transparent;
}
#app .myPage .searchSuggestChat .chat_link,
#app .myPage .searchSuggestChat .chat_item > a,
#app .chatPage .searchSuggestChat .chat_link,
#app .chatPage .searchSuggestChat .chat_item > a {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  width: 100%;
  padding: 6px 16px;
}
#app .myPage .searchSuggestChat .chat_thumb,
#app .chatPage .searchSuggestChat .chat_thumb {
  text-align: center;
  margin-bottom: 0;
  border-radius: 50%;
}
#app .myPage .searchSuggestChat .chat_icon,
#app .chatPage .searchSuggestChat .chat_icon {
  width: 35px;
  height: 35px;
  border: solid 1px var(--gray_icon_border);
  -o-object-fit: cover;
     object-fit: cover;
  min-width: 35px;
  min-height: 35px;
  background-color: #fff;
}
#app .myPage .searchSuggestChat .chat_name,
#app .chatPage .searchSuggestChat .chat_name {
  margin-bottom: 0;
  width: 100%;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#app .myPage .suggestBackLayer,
#app .chatPage .suggestBackLayer {
  display: none;
  position: fixed;
  top: 90px;
  left: 0;
  width: 100vw;
  height: calc(100svh - 90px);
  background-color: var(--gray_40_a);
}
@media screen and (max-width: 767px) {
  #app .myPage .searchSuggestWrap.only_wordHistory,
  #app .chatPage .searchSuggestWrap.only_wordHistory {
    position: absolute;
    top: 40px;
    left: 10px;
    width: calc(100% - 20px);
    z-index: 150;
  }
}
#app .myPage .searchSuggestWrap.only_wordHistory .searchSuggestWord a,
#app .chatPage .searchSuggestWrap.only_wordHistory .searchSuggestWord a {
  text-decoration: none !important;
}
@media screen and (max-width: 767px) {
  #app .myPage,
  #app .chatPage {
    /* 検索ワード削除用のためおそらく不要
    #content-mainNav .is_search .delete_icon {
      position: absolute;
      display: block;
      color: var(--navy_main);
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
    } */
  }
  #app .myPage #content-mainNav .form_data_area,
  #app .chatPage #content-mainNav .form_data_area {
    margin-right: auto;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
    width: 50px;
    -webkit-box-flex: 0;
            flex-grow: 0;
    padding-left: 0;
    margin-left: 10px;
  }
  #app .myPage #content-mainNav input::-webkit-input-placeholder, #app .chatPage #content-mainNav input::-webkit-input-placeholder {
    font-size: 0.75rem;
  }
  #app .myPage #content-mainNav input::-moz-placeholder, #app .chatPage #content-mainNav input::-moz-placeholder {
    font-size: 0.75rem;
  }
  #app .myPage #content-mainNav input::placeholder,
  #app .chatPage #content-mainNav input::placeholder {
    font-size: 0.75rem;
  }
  #app .myPage #content-mainNav .headerSearch,
  #app .chatPage #content-mainNav .headerSearch {
    width: 100%;
    height: 100%;
    margin-right: 0;
  }
  #app .myPage #content-mainNav .headerSearchType,
  #app .myPage #content-mainNav .headerSearch .input_search,
  #app .chatPage #content-mainNav .headerSearchType,
  #app .chatPage #content-mainNav .headerSearch .input_search {
    display: none;
  }
  #app .myPage #content-mainNav .btn_headerSearch,
  #app .chatPage #content-mainNav .btn_headerSearch {
    border: none;
    width: 100%;
    background-color: transparent;
    height: 100%;
    border-radius: 0;
    color: #fff;
  }
  #app .myPage #content-mainNav .btn_headerSearch i,
  #app .myPage #content-mainNav .btn_headerSearch svg,
  #app .chatPage #content-mainNav .btn_headerSearch i,
  #app .chatPage #content-mainNav .btn_headerSearch svg {
    font-size: 24px;
  }
}
#app .myPage #content-mainNav .header_searchBtn_wrap,
#app .chatPage #content-mainNav .header_searchBtn_wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  margin-left: 10px;
}
#app .myPage #content-mainNav .header_searchBtn_wrap .text,
#app .chatPage #content-mainNav .header_searchBtn_wrap .text {
  color: #fff;
  margin-right: 2px;
  margin-top: 12px;
  white-space: nowrap;
  font-size: 11px;
}
#app .myPage #content-mainNav .header_searchBtn,
#app .chatPage #content-mainNav .header_searchBtn {
  position: relative;
}
#app .myPage #content-mainNav .header_searchBtn .btn_search,
#app .chatPage #content-mainNav .header_searchBtn .btn_search {
  background-color: var(--navy_main);
  border: solid 1px #fff;
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  margin-left: 10px;
  height: 30px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  color: #fff;
  fill: #fff;
}
#app .myPage #content-mainNav .header_searchBtn .btn_search i,
#app .myPage #content-mainNav .header_searchBtn .btn_search svg,
#app .chatPage #content-mainNav .header_searchBtn .btn_search i,
#app .chatPage #content-mainNav .header_searchBtn .btn_search svg {
  font-size: 16px;
  width: 16px;
}
#app .myPage #content-mainNav .header_searchBtn .btn_search span,
#app .chatPage #content-mainNav .header_searchBtn .btn_search span {
  font-size: 11px;
  margin-left: 5px;
  white-space: nowrap;
  line-height: 1;
}
#app .myPage #content-mainNav .header_searchBtn .btn_search .btn_search,
#app .chatPage #content-mainNav .header_searchBtn .btn_search .btn_search {
  margin-left: 10px;
}
#app .myPage #content-mainNav .header_searchBtn .btn_search .btn_search .fa-users + span,
#app .chatPage #content-mainNav .header_searchBtn .btn_search .btn_search .fa-users + span {
  margin-left: 10px;
}
#app .myPage #content-mainNav .header_searchBtn .tip,
#app .chatPage #content-mainNav .header_searchBtn .tip {
  position: absolute;
  top: 80px;
  left: -72px;
}
#app .myPage #content-mainNav .header_searchBtn .tip .tip_inner:after,
#app .chatPage #content-mainNav .header_searchBtn .tip .tip_inner:after {
  content: "▲";
  position: absolute;
  top: -7px;
  left: 93px;
}
#app .myPage #content-mainNav .header_searchBtn.searchChat .btn_search,
#app .chatPage #content-mainNav .header_searchBtn.searchChat .btn_search {
  margin-left: 0;
  border-radius: 5px 0 0 5px;
}
#app .myPage #content-mainNav .header_searchBtn.searchChat .tip,
#app .chatPage #content-mainNav .header_searchBtn.searchChat .tip {
  left: -82px;
}
#app .myPage #content-mainNav .header_searchBtn.searchChat .tip .tip_inner::before,
#app .chatPage #content-mainNav .header_searchBtn.searchChat .tip .tip_inner::before {
  content: "チャットを探す";
}
#app .myPage #content-mainNav .header_searchBtn.searchChat i,
#app .myPage #content-mainNav .header_searchBtn.searchChat svg,
#app .chatPage #content-mainNav .header_searchBtn.searchChat i,
#app .chatPage #content-mainNav .header_searchBtn.searchChat svg {
  -webkit-transform: translateX(-2px);
          transform: translateX(-2px);
}
#app .myPage #content-mainNav .header_searchBtn.searchUser .btn_search,
#app .chatPage #content-mainNav .header_searchBtn.searchUser .btn_search {
  margin-left: 0;
  border-radius: 0 5px 5px 0;
  border-left: none;
}
#app .myPage #content-mainNav .header_searchBtn.searchUser .tip,
#app .chatPage #content-mainNav .header_searchBtn.searchUser .tip {
  left: -82px;
}
#app .myPage #content-mainNav .header_searchBtn.searchUser .tip .tip_inner::before,
#app .chatPage #content-mainNav .header_searchBtn.searchUser .tip .tip_inner::before {
  content: "ユーザーを探す";
}
#app .myPage #content-mainNav .header_searchBtn.searchTrend .tip .tip_inner::before,
#app .chatPage #content-mainNav .header_searchBtn.searchTrend .tip .tip_inner::before {
  content: "トレンド";
}
#app .myPage #content-mainNav .header_searchBtn.searchTweet .tip .tip_inner::before,
#app .chatPage #content-mainNav .header_searchBtn.searchTweet .tip .tip_inner::before {
  content: "つぶやき";
}
@media screen and (max-width: 1200px) {
  #app .myPage #content-mainNav .header_searchBtn:hover .tip,
  #app .chatPage #content-mainNav .header_searchBtn:hover .tip {
    display: block;
  }
  #app .myPage #content-mainNav .btn_search,
  #app .chatPage #content-mainNav .btn_search {
    padding: 1px 10px;
  }
  #app .myPage #content-mainNav .btn_search span,
  #app .chatPage #content-mainNav .btn_search span {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage #content-mainNav .header_searchBtn_wrap,
  #app .chatPage #content-mainNav .header_searchBtn_wrap {
    display: none;
  }
}
#app .myPage #content-mainNav .btn_notification,
#app .chatPage #content-mainNav .btn_notification {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-left: solid 1px rgba(255, 255, 255, 0.5);
  padding: 13px 25px 10px 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  position: relative;
  font-weight: bold;
  max-width: none;
}
#app .myPage #content-mainNav .btn_notification.collapsed,
#app .chatPage #content-mainNav .btn_notification.collapsed {
  background-color: transparent;
}
#app .myPage #content-mainNav .btn_notification:before,
#app .chatPage #content-mainNav .btn_notification:before {
  content: "▲";
  color: rgba(255, 255, 255, 0.7);
  margin-left: 5px;
  font-size: 0.625rem;
  position: absolute;
  right: 8px;
  top: 12px;
}
#app .myPage #content-mainNav .btn_notification.collapsed:before,
#app .chatPage #content-mainNav .btn_notification.collapsed:before {
  content: "▼";
}
#app .myPage #content-mainNav .btn_notification .notificationIcon i,
#app .chatPage #content-mainNav .btn_notification .notificationIcon i {
  font-size: 1.4375rem;
  margin-top: -3px;
}
#app .myPage #content-mainNav .btn_notification .notificationIcon svg,
#app .chatPage #content-mainNav .btn_notification .notificationIcon svg {
  width: 15.5px;
  height: auto;
  margin-top: -3px;
}
@media screen and (min-width: 768px) {
  #app .myPage #content-mainNav .btn_notification .notificationIcon i,
  #app .myPage #content-mainNav .btn_notification .notificationIcon svg,
  #app .chatPage #content-mainNav .btn_notification .notificationIcon i,
  #app .chatPage #content-mainNav .btn_notification .notificationIcon svg {
    margin-left: 3px;
  }
}
#app .myPage #content-mainNav .btn_notification .notificationIcon.is_notifice,
#app .chatPage #content-mainNav .btn_notification .notificationIcon.is_notifice {
  position: relative;
}
#app .myPage #content-mainNav .btn_notification .notificationIcon.is_notifice:after,
#app .chatPage #content-mainNav .btn_notification .notificationIcon.is_notifice:after {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  right: -5px;
  top: -3px;
  border-radius: 50%;
  border: solid 1px #fff;
  background-color: var(--red_main);
}
#app .myPage #notificationMenu,
#app .chatPage #notificationMenu {
  position: absolute;
  right: 0;
  top: 100%;
  border-radius: 0 0 5px 5px;
  border: solid 3px var(--navy_main);
  border-top-width: 0;
  color: var(--navy_main);
  background-color: var(--navy_main);
  z-index: 999;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  box-shadow: 0 2px 3px var(--gray_30);
  width: 550px;
}
@media screen and (max-width: 767px) {
  #app .myPage #notificationMenu,
  #app .chatPage #notificationMenu {
    width: 100%;
  }
}
#app .myPage #notificationMenu .nav_user_status,
#app .chatPage #notificationMenu .nav_user_status {
  text-align: center;
  border-bottom: solid 1px var(--navy_main);
  font-weight: bold;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 3px;
}
#app .myPage #notificationMenu .notificationColumn,
#app .chatPage #notificationMenu .notificationColumn {
  display: -webkit-box;
  display: flex;
  position: relative;
  min-height: 80px;
  background-color: #fff;
}
#app .myPage #notificationMenu .notificationCategory,
#app .chatPage #notificationMenu .notificationCategory {
  -webkit-box-flex: 0;
          flex: 0 0 40%;
  height: 70svh;
  background: var(--gray_5);
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#app .myPage #notificationMenu .notificationCategory::before,
#app .chatPage #notificationMenu .notificationCategory::before {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background: var(--blue_main);
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(40% - 2px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  #app .myPage #notificationMenu .notificationCategory::before,
  #app .chatPage #notificationMenu .notificationCategory::before {
    left: 58px;
  }
}
#app .myPage #notificationMenu .notificationCategory::-webkit-scrollbar,
#app .chatPage #notificationMenu .notificationCategory::-webkit-scrollbar {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage #notificationMenu .notificationCategory,
  #app .chatPage #notificationMenu .notificationCategory {
    -webkit-box-flex: 0;
            flex: 0 0 60px;
  }
}
#app .myPage #notificationMenu .spinner-border,
#app .chatPage #notificationMenu .spinner-border {
  position: absolute;
  top: calc(50% - 13px);
  left: calc(50% - 13px);
  z-index: 1;
}
#app .myPage #notificationMenu .notificationCategory_inner,
#app .chatPage #notificationMenu .notificationCategory_inner {
  height: 100%;
  width: calc(100% - 2px);
}
#app .myPage #notificationMenu .category_item,
#app .chatPage #notificationMenu .category_item {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  gap: 15px;
  padding: 8px 10px;
  background: var(--gray_5);
  border-bottom: 1px solid var(--gray_20);
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 767px) {
  #app .myPage #notificationMenu .category_item,
  #app .chatPage #notificationMenu .category_item {
    padding-right: 15px;
  }
}
#app .myPage #notificationMenu .category_item:not(.is_active):hover,
#app .chatPage #notificationMenu .category_item:not(.is_active):hover {
  opacity: 0.7;
}
#app .myPage #notificationMenu .category_item.is_active,
#app .chatPage #notificationMenu .category_item.is_active {
  background: #fff;
  border: 1px solid #fff;
  outline: 2px solid var(--blue_main);
  z-index: 2;
}
#app .myPage #notificationMenu .category_item.is_active::before, #app .myPage #notificationMenu .category_item.is_active::after,
#app .chatPage #notificationMenu .category_item.is_active::before,
#app .chatPage #notificationMenu .category_item.is_active::after {
  content: "";
  display: block;
  width: 2px;
  height: calc(100% + 2px);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
}
#app .myPage #notificationMenu .category_item.is_active::before,
#app .chatPage #notificationMenu .category_item.is_active::before {
  background: #fff;
  right: -3px;
  width: 4px;
}
#app .myPage #notificationMenu .category_item.is_active::after,
#app .chatPage #notificationMenu .category_item.is_active::after {
  background: var(--navy_main);
  left: -3px;
}
#app .myPage #notificationMenu .category_item.is_active .icon_blue,
#app .chatPage #notificationMenu .category_item.is_active .icon_blue {
  background: #e0f8f6;
}
#app .myPage #notificationMenu .category_item.is_active .icon_yellow,
#app .chatPage #notificationMenu .category_item.is_active .icon_yellow {
  background: #fbf2a3;
}
#app .myPage #notificationMenu .category_item.is_active .icon_orange,
#app .chatPage #notificationMenu .category_item.is_active .icon_orange {
  background: #ffe9d0;
}
#app .myPage #notificationMenu .category_item.is_active .icon_green,
#app .chatPage #notificationMenu .category_item.is_active .icon_green {
  background: #eafcd9;
}
#app .myPage #notificationMenu .category_item.is_active .icon_pink,
#app .chatPage #notificationMenu .category_item.is_active .icon_pink {
  background: #f9e4e6;
}
#app .myPage #notificationMenu .category_item.is_active .icon_beige,
#app .chatPage #notificationMenu .category_item.is_active .icon_beige {
  background: #f8edd6;
}
#app .myPage #notificationMenu .category_item.is_active .icon_gray,
#app .chatPage #notificationMenu .category_item.is_active .icon_gray {
  background: #f0f2f4;
}
#app .myPage #notificationMenu .category_item.is_active .text_block p,
#app .myPage #notificationMenu .category_item.is_active .text_block time,
#app .chatPage #notificationMenu .category_item.is_active .text_block p,
#app .chatPage #notificationMenu .category_item.is_active .text_block time {
  color: var(--blue_main);
}
#app .myPage #notificationMenu .category_item .logo_icon,
#app .chatPage #notificationMenu .category_item .logo_icon {
  -webkit-box-flex: 0;
          flex: 0 0 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  background: #fff;
  position: relative;
}
#app .myPage #notificationMenu .category_item .logo_icon i,
#app .myPage #notificationMenu .category_item .logo_icon svg,
#app .chatPage #notificationMenu .category_item .logo_icon i,
#app .chatPage #notificationMenu .category_item .logo_icon svg {
  font-size: 16px;
  width: 16px;
}
#app .myPage #notificationMenu .category_item .logo_icon.icon_blue i, #app .myPage #notificationMenu .category_item .logo_icon.icon_blue svg,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_blue i,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_blue svg {
  color: #80d0cd;
  fill: #80d0cd;
}
#app .myPage #notificationMenu .category_item .logo_icon.icon_yellow i, #app .myPage #notificationMenu .category_item .logo_icon.icon_yellow svg,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_yellow i,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_yellow svg {
  font-size: 14px;
  color: #c1b121;
  fill: #c1b121;
}
#app .myPage #notificationMenu .category_item .logo_icon.icon_orange i, #app .myPage #notificationMenu .category_item .logo_icon.icon_orange svg,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_orange i,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_orange svg {
  color: #da8521;
  fill: #da8521;
}
#app .myPage #notificationMenu .category_item .logo_icon.icon_green i, #app .myPage #notificationMenu .category_item .logo_icon.icon_green svg,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_green i,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_green svg {
  font-size: 18px;
  color: #91c65b;
  fill: #91c65b;
}
#app .myPage #notificationMenu .category_item .logo_icon.icon_pink i, #app .myPage #notificationMenu .category_item .logo_icon.icon_pink svg,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_pink i,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_pink svg {
  font-size: 15px;
  color: #cf7b85;
  fill: #cf7b85;
}
#app .myPage #notificationMenu .category_item .logo_icon.icon_purple i, #app .myPage #notificationMenu .category_item .logo_icon.icon_purple svg,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_purple i,
#app .chatPage #notificationMenu .category_item .logo_icon.icon_purple svg {
  font-size: 14px;
  color: #c3a2e0;
  fill: #c3a2e0;
}
#app .myPage #notificationMenu .category_item .logo_icon .notification_num,
#app .chatPage #notificationMenu .category_item .logo_icon .notification_num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red_main);
  display: grid;
  place-content: center;
  color: #fff;
  font-size: 10px;
  position: absolute;
  top: 0;
  right: -25%;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  #app .myPage #notificationMenu .category_item .text_block,
  #app .chatPage #notificationMenu .category_item .text_block {
    display: none;
  }
}
#app .myPage #notificationMenu .category_item .text_block p,
#app .chatPage #notificationMenu .category_item .text_block p {
  font-size: 13px;
  color: var(--text_main);
  font-weight: bold;
  margin-bottom: 0;
}
#app .myPage #notificationMenu .category_item .text_block time,
#app .chatPage #notificationMenu .category_item .text_block time {
  display: block;
  font-size: 10px;
  color: var(--gray_60);
  margin-bottom: 0;
}
#app .myPage #notificationMenu .navbar-nav,
#app .chatPage #notificationMenu .navbar-nav {
  -webkit-box-flex: 0;
          flex: 0 1 100%;
  background-color: #fff;
  padding-bottom: 15px;
  font-size: 0.875rem;
  min-height: 100px;
  max-height: 70svh;
  overflow-y: auto;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  position: relative;
}
#app .myPage #notificationMenu .navbar-nav.is_active,
#app .chatPage #notificationMenu .navbar-nav.is_active {
  display: -webkit-box;
  display: flex;
}
#app .myPage #notificationMenu .nav-item,
#app .chatPage #notificationMenu .nav-item {
  color: var(--gray_40);
  padding: 13px 10px;
  border-bottom: 1px solid var(--gray_10);
}
#app .myPage #notificationMenu .nav-item.nav_headingSp,
#app .chatPage #notificationMenu .nav-item.nav_headingSp {
  font-size: 14px;
  font-weight: bold;
  color: var(--navy_main);
  padding: 16px 15px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background: #fff;
}
@media screen and (min-width: 768px) {
  #app .myPage #notificationMenu .nav-item.nav_headingSp,
  #app .chatPage #notificationMenu .nav-item.nav_headingSp {
    display: none;
  }
}
#app .myPage #notificationMenu .nav-item > .notificationTitle,
#app .chatPage #notificationMenu .nav-item > .notificationTitle {
  position: relative;
  color: var(--navy_main);
  fill: var(--navy_main);
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage #notificationMenu .user_icon,
#app .chatPage #notificationMenu .user_icon {
  -webkit-box-flex: 0;
          flex: 0 0 28px;
  height: 28px;
  margin-right: 8px;
  margin-bottom: auto;
  border: 1px solid var(--gray_5);
  border-radius: 50%;
}
#app .myPage #notificationMenu .user_icon i,
#app .myPage #notificationMenu .user_icon svg,
#app .chatPage #notificationMenu .user_icon i,
#app .chatPage #notificationMenu .user_icon svg {
  font-size: 16px;
  width: 16px;
}
#app .myPage #notificationMenu .user_icon[class*=icon_],
#app .chatPage #notificationMenu .user_icon[class*=icon_] {
  border: none;
  display: grid;
  place-content: center;
}
#app .myPage #notificationMenu .user_icon.icon_blue,
#app .chatPage #notificationMenu .user_icon.icon_blue {
  background: #e0f8f6;
}
#app .myPage #notificationMenu .user_icon.icon_blue i,
#app .myPage #notificationMenu .user_icon.icon_blue svg,
#app .chatPage #notificationMenu .user_icon.icon_blue i,
#app .chatPage #notificationMenu .user_icon.icon_blue svg {
  color: #80d0cd;
  fill: #80d0cd;
}
#app .myPage #notificationMenu .user_icon.icon_green,
#app .chatPage #notificationMenu .user_icon.icon_green {
  background: #eafcd9;
}
#app .myPage #notificationMenu .user_icon.icon_green i,
#app .myPage #notificationMenu .user_icon.icon_green svg,
#app .chatPage #notificationMenu .user_icon.icon_green i,
#app .chatPage #notificationMenu .user_icon.icon_green svg {
  font-size: 18px;
  color: #91c65b;
  fill: #91c65b;
}
#app .myPage #notificationMenu .user_icon.icon_pink,
#app .chatPage #notificationMenu .user_icon.icon_pink {
  background: #f9e4e6;
}
#app .myPage #notificationMenu .user_icon.icon_pink i,
#app .myPage #notificationMenu .user_icon.icon_pink svg,
#app .chatPage #notificationMenu .user_icon.icon_pink i,
#app .chatPage #notificationMenu .user_icon.icon_pink svg {
  font-size: 15px;
  color: #cf7b85;
  fill: #cf7b85;
}
#app .myPage #notificationMenu .user_icon img,
#app .chatPage #notificationMenu .user_icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
#app .myPage #notificationMenu .nav-item > .notificationTitle a,
#app .chatPage #notificationMenu .nav-item > .notificationTitle a {
  color: var(--navy_main);
  text-decoration: underline;
  padding: 0 3px 0 0;
}
#app .myPage #notificationMenu .nav-item > .notificationTitle > svg,
#app .chatPage #notificationMenu .nav-item > .notificationTitle > svg {
  width: 22px;
  height: auto;
  max-height: 23px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  padding-right: 2px;
  vertical-align: middle;
}
#app .myPage #notificationMenu .nav-item > .notificationTitle .unicorn_icon,
#app .chatPage #notificationMenu .nav-item > .notificationTitle .unicorn_icon {
  vertical-align: -2px;
}
#app .myPage #notificationMenu .nav-item > .notificationDetail,
#app .chatPage #notificationMenu .nav-item > .notificationDetail {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#app .myPage #notificationMenu .nav-item > a > svg,
#app .chatPage #notificationMenu .nav-item > a > svg {
  padding-right: 5px;
}
#app .myPage #notificationMenu .nav-item > a > svg,
#app .chatPage #notificationMenu .nav-item > a > svg {
  width: 7px;
}
#app .myPage #notificationMenu .nav-item > .infoLink,
#app .myPage #notificationMenu .nav-item > .infoText,
#app .chatPage #notificationMenu .nav-item > .infoLink,
#app .chatPage #notificationMenu .nav-item > .infoText {
  display: block;
  padding: 0;
  margin-bottom: 0;
  font-size: 12px;
  text-align: right;
}
#app .myPage #notificationMenu .nav-item > .infoLink > svg,
#app .chatPage #notificationMenu .nav-item > .infoLink > svg {
  display: inline-block;
  vertical-align: middle;
  fill: var(--gray_40);
  width: 10px;
  height: auto;
  vertical-align: baseline;
}
#app .myPage #notificationMenu .nav-item > .infoLink a,
#app .chatPage #notificationMenu .nav-item > .infoLink a {
  color: var(--blue_main);
  text-decoration: none;
}
#app .myPage #notificationMenu .nav-item > .infoText,
#app .chatPage #notificationMenu .nav-item > .infoText {
  font-size: 10px;
}
#app .myPage #notificationMenu .nav-item > .infoText > span,
#app .chatPage #notificationMenu .nav-item > .infoText > span {
  padding-left: 8px;
}
#app .myPage #notificationMenu .nav-item.is_noInfo,
#app .chatPage #notificationMenu .nav-item.is_noInfo {
  padding: 24px 0 8px;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  border-bottom: none;
}
#app .myPage #notificationMenu .nav-item.is_noInfo .noInfoText,
#app .chatPage #notificationMenu .nav-item.is_noInfo .noInfoText {
  margin: 0;
  font-size: 16px;
  color: var(--text_main);
}
#app .myPage #notificationMenu .linkToSetting,
#app .chatPage #notificationMenu .linkToSetting {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  position: relative;
  z-index: 2;
  padding: 8px;
}
#app .myPage #notificationMenu .linkToSetting .btn_allRead,
#app .chatPage #notificationMenu .linkToSetting .btn_allRead {
  padding: 6px 10px;
  width: auto;
  background: #fff;
  border: 1px solid var(--navy_main);
  border-radius: 4px;
  font-size: 12px;
  color: var(--navy_main);
}
#app .myPage #notificationMenu .linkToSetting .btn_allRead i,
#app .myPage #notificationMenu .linkToSetting .btn_allRead svg,
#app .chatPage #notificationMenu .linkToSetting .btn_allRead i,
#app .chatPage #notificationMenu .linkToSetting .btn_allRead svg {
  font-size: 12px;
  width: 12px;
  height: auto;
}
@media screen and (max-width: 400px) {
  #app .myPage #notificationMenu .linkToSetting .linkText,
  #app .chatPage #notificationMenu .linkToSetting .linkText {
    font-size: 0.8125rem;
  }
}
@media screen and (max-width: 1000px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが1000pxまで　*/
  }
  #app .myPage #content-mainNav .btn_notification:before,
  #app .chatPage #content-mainNav .btn_notification:before {
    display: none;
  }
  #app .myPage #content-mainNav .btn_notification,
  #app .chatPage #content-mainNav .btn_notification {
    min-width: 50px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    padding: 3px 8px 0 3px;
    height: 45px;
    overflow: hidden;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage header#is_chat #content-mainNav .btn_notification,
  #app .chatPage header#is_chat #content-mainNav .btn_notification {
    margin-left: 0;
  }
}
#app .myPage #notificationMenu a.log_link,
#app .chatPage #notificationMenu a.log_link {
  display: inline-block;
  padding-left: 1em;
  text-indent: -1em;
  color: var(--blue_main);
  font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが768px以上　※PC表示*/
  }
  #app .myPage .btn_mypage:not(.collapsed) + #mypageMenu + .modal,
  #app .myPage .btn_notification:not(.collapsed) + #notificationMenu + .modal,
  #app .myPage .form_data_area.is_active .modal,
  #app .chatPage .btn_mypage:not(.collapsed) + #mypageMenu + .modal,
  #app .chatPage .btn_notification:not(.collapsed) + #notificationMenu + .modal,
  #app .chatPage .form_data_area.is_active .modal {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    display: block;
    z-index: 998;
  }
}
#app .myPage .message_box,
#app .chatPage .message_box {
  position: fixed;
  top: 45px;
  width: calc(100% - var(--toolBar_width));
  margin-left: var(--toolBar_width);
  z-index: 1059;
  overflow: hidden;
  -webkit-animation: message_box 0.3s ease-out forwards;
          animation: message_box 0.3s ease-out forwards;
}
@media screen and (max-width: 767px) {
  #app .myPage .message_box,
  #app .chatPage .message_box {
    width: 100%;
    margin-left: 0;
  }
}
@-webkit-keyframes message_box {
  0% {
    height: 0;
  }
  100% {
    height: 36px;
  }
}
@keyframes message_box {
  0% {
    height: 0;
  }
  100% {
    height: 36px;
  }
}
#app .myPage #wrap.is_account .message_box,
#app .chatPage #wrap.is_account .message_box {
  width: 100%;
  margin-left: 0;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
@media screen and (max-width: 767px) {
  #app .myPage,
  #app .chatPage {
    /* スマホヘッダーアプリバナー表示時 */
  }
  #app .myPage .is_headAppBnr ~ #wrap .message_box,
  #app .chatPage .is_headAppBnr ~ #wrap .message_box {
    top: 90px;
  }
}
#app .myPage .message_box p[class*=alert_],
#app .chatPage .message_box p[class*=alert_] {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  height: 36px;
  font-size: 0.8125rem;
  font-weight: bold;
  padding-inline: 3px;
  color: #fff;
  margin-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--gray_20);
}
#app .myPage .message_box .alert_success,
#app .chatPage .message_box .alert_success {
  background-color: var(--blue_main);
}
#app .myPage .message_box .alert_warning,
#app .chatPage .message_box .alert_warning {
  background-color: var(--orange_main);
}
#app .myPage .message_box a,
#app .chatPage .message_box a {
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが768px以上　※PC表示*/
  }
  #app .myPage .message_box p[class*=alert_],
  #app .chatPage .message_box p[class*=alert_] {
    font-size: 0.875rem;
    padding-inline: 8px;
  }
}
#app .myPage #reportModal .modal-body,
#app .chatPage #reportModal .modal-body {
  padding-bottom: 0;
}
#app .myPage #reportModal .reportEtc.hide textarea,
#app .chatPage #reportModal .reportEtc.hide textarea {
  height: 0;
  padding: 0;
  border: none;
  opacity: 0;
  min-height: 0;
}
#app .myPage #reportModal .reportEtc textarea,
#app .chatPage #reportModal .reportEtc textarea {
  height: 5rem;
  opacity: 1;
  -webkit-transition: height 0.5s, padding 0.5s, border 0.5s;
  transition: height 0.5s, padding 0.5s, border 0.5s;
}
#app .myPage #reportModal.afterSend form,
#app .chatPage #reportModal.afterSend form {
  display: none;
}
#app .myPage #reportModal .custom-control-label::before,
#app .myPage #reportModal .custom-control-label::after,
#app .chatPage #reportModal .custom-control-label::before,
#app .chatPage #reportModal .custom-control-label::after {
  top: 0.15rem;
}
#app .myPage #reportModal .custom-radio label,
#app .chatPage #reportModal .custom-radio label {
  max-width: calc(100% - 30px);
}
#app .myPage #reportModal .afterMessage,
#app .chatPage #reportModal .afterMessage {
  display: none;
}
#app .myPage #reportModal.afterSend .afterMessage,
#app .chatPage #reportModal.afterSend .afterMessage {
  display: block;
}
#app .myPage #reportModal.afterSend .modal-footer button,
#app .chatPage #reportModal.afterSend .modal-footer button {
  display: none;
}
#app .myPage #reportModal .modal-footer button.closeReport,
#app .chatPage #reportModal .modal-footer button.closeReport {
  display: none;
}
#app .myPage #reportModal.afterSend .modal-footer button.closeReport,
#app .chatPage #reportModal.afterSend .modal-footer button.closeReport {
  display: block;
}
#app .myPage #reportModal .caution_list,
#app .chatPage #reportModal .caution_list {
  margin-bottom: 10px;
  padding: 5px 10px;
}
#app .myPage #reportModal .caution_list li,
#app .chatPage #reportModal .caution_list li {
  font-size: 80%;
  position: relative;
  padding-left: 1rem;
  line-height: 18px;
  margin: 5px 0;
}
#app .myPage #reportModal .caution_list li::before,
#app .chatPage #reportModal .caution_list li::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
#app .myPage #reportModal input[type=radio],
#app .chatPage #reportModal input[type=radio] {
  vertical-align: top;
  top: 4px;
}
#app .myPage .modal-body .form_data_area textarea,
#app .myPage .modal-body .form_data_area .fr-element,
#app .myPage .modal-body .form_data_area .fr-code,
#app .chatPage .modal-body .form_data_area textarea,
#app .chatPage .modal-body .form_data_area .fr-element,
#app .chatPage .modal-body .form_data_area .fr-code {
  min-height: 35vh;
}
#app .myPage .modal-body .form_data_area .form_label.is_chatname,
#app .chatPage .modal-body .form_data_area .form_label.is_chatname {
  min-width: 130px;
  text-align: right;
  padding-right: 5px;
  font-size: 0.875rem;
}
#app .myPage .modal-body .form_data_area .form_label.is_chatname + input[type=text],
#app .chatPage .modal-body .form_data_area .form_label.is_chatname + input[type=text] {
  width: calc(100% - 130px);
}
@media screen and (max-width: 767px) {
  #app .myPage .modal-body .form_data_area .form_label.is_chatname + input[type=text],
  #app .chatPage .modal-body .form_data_area .form_label.is_chatname + input[type=text] {
    width: 100%;
  }
}
#app .myPage .modal-body .form_data_area .form_unit,
#app .chatPage .modal-body .form_data_area .form_unit {
  min-width: 90px;
  text-align: left;
  font-size: 0.8125rem;
  padding-left: 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .modal-body .form_data_area .form_label.is_chatname,
  #app .chatPage .modal-body .form_data_area .form_label.is_chatname {
    font-size: 0.875rem;
    min-width: 100%;
    text-align: left;
  }
  #app .myPage .modal-body .form_data_area .form_unit,
  #app .chatPage .modal-body .form_data_area .form_unit {
    display: block;
    margin-left: auto;
    text-align: right;
  }
}
#app .myPage #joinChatModal,
#app .myPage #joinOffMeetingModal,
#app .chatPage #joinChatModal,
#app .chatPage #joinOffMeetingModal {
  z-index: 20001;
}
#app .myPage #joinChatModal .modal-content .text_title,
#app .myPage #joinOffMeetingModal .modal-content .text_title,
#app .chatPage #joinChatModal .modal-content .text_title,
#app .chatPage #joinOffMeetingModal .modal-content .text_title {
  margin-bottom: 10px;
  margin-top: 20px;
  font-size: 16px;
}
#app .myPage #joinChatModal .modal-content .text_title .chat_name,
#app .myPage #joinOffMeetingModal .modal-content .text_title .chat_name,
#app .chatPage #joinChatModal .modal-content .text_title .chat_name,
#app .chatPage #joinOffMeetingModal .modal-content .text_title .chat_name {
  display: inline-block;
  margin-right: 10px;
  line-height: 1.4;
}
#app .myPage #joinChatModal .modal-content .text_title .chat_caution,
#app .myPage #joinOffMeetingModal .modal-content .text_title .chat_caution,
#app .chatPage #joinChatModal .modal-content .text_title .chat_caution,
#app .chatPage #joinOffMeetingModal .modal-content .text_title .chat_caution {
  font-size: 14px;
  color: #fff;
  background: var(--orange_main);
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 5px;
}
#app .myPage #joinChatModal .text_content_outline,
#app .myPage #joinOffMeetingModal .text_content_outline,
#app .chatPage #joinChatModal .text_content_outline,
#app .chatPage #joinOffMeetingModal .text_content_outline {
  border-radius: 3px;
  position: relative;
  border: 2px solid var(--orange_main);
}
@media screen and (max-width: 767px) {
  #app .myPage #joinChatModal .modal-content .text_title,
  #app .myPage #joinOffMeetingModal .modal-content .text_title,
  #app .chatPage #joinChatModal .modal-content .text_title,
  #app .chatPage #joinOffMeetingModal .modal-content .text_title {
    font-size: 14px;
  }
  #app .myPage #joinChatModal .modal-content .text_title .chat_caution,
  #app .myPage #joinOffMeetingModal .modal-content .text_title .chat_caution,
  #app .chatPage #joinChatModal .modal-content .text_title .chat_caution,
  #app .chatPage #joinOffMeetingModal .modal-content .text_title .chat_caution {
    font-size: 12px;
  }
}
#app .myPage #joinOffMeetingModal .chat_title .icon_accepting,
#app .chatPage #joinOffMeetingModal .chat_title .icon_accepting {
  color: var(--orange_main);
  font-size: 1rem;
  font-weight: bold;
  display: block;
}
#app .myPage #joinOffMeetingModal .text_content dd,
#app .chatPage #joinOffMeetingModal .text_content dd {
  margin-bottom: 15px;
}
#app .myPage #joinOffMeetingModal .text_content dd.date,
#app .chatPage #joinOffMeetingModal .text_content dd.date {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: start;
          align-items: flex-start;
  gap: 4px;
}
#app .myPage #joinOffMeetingModal .icon_box,
#app .chatPage #joinOffMeetingModal .icon_box {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  border: solid 1px var(--gray_20);
  border-radius: 5px;
  padding: 5px;
  min-height: 65px;
  max-height: 78px;
  overflow-y: auto;
}
#app .myPage #joinOffMeetingModal .icon_box .tip,
#app .chatPage #joinOffMeetingModal .icon_box .tip {
  left: -5px;
  text-align: left;
  font-weight: normal;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
#app .myPage #joinOffMeetingModal .icon_box .tip_inner:after,
#app .chatPage #joinOffMeetingModal .icon_box .tip_inner:after {
  text-align: left;
  margin-left: 5px;
}
#app .myPage #joinOffMeetingModal .icon_box li,
#app .chatPage #joinOffMeetingModal .icon_box li {
  margin: 3px 2px;
  position: relative;
  line-height: 23px;
}
#app .myPage #joinOffMeetingModal .icon_box img,
#app .chatPage #joinOffMeetingModal .icon_box img {
  width: 23px;
  height: 23px;
  border: solid 1px var(--gray_10);
}
#app .myPage #joinOffMeetingModal .off_meeting_status,
#app .chatPage #joinOffMeetingModal .off_meeting_status {
  font-size: 0.6875rem;
  font-weight: bold;
}
#app .myPage #joinOffMeetingModal .add_favEvent_box,
#app .chatPage #joinOffMeetingModal .add_favEvent_box {
  border-radius: 3px;
  margin: 20px 0;
  padding: 15px;
}
#app .myPage #joinOffMeetingModal .add_favEvent_box .fav_register,
#app .chatPage #joinOffMeetingModal .add_favEvent_box .fav_register {
  font-size: 12px;
}
#app .myPage #joinOffMeetingModal .add_favEvent_box .fav_cancel,
#app .chatPage #joinOffMeetingModal .add_favEvent_box .fav_cancel {
  color: var(--blue_main);
  font-weight: bold;
  font-size: 12px;
}
#app .myPage #joinOffMeetingModal .add_favEvent_box .fav_cancel i,
#app .chatPage #joinOffMeetingModal .add_favEvent_box .fav_cancel i {
  font-weight: 600;
}
#app .myPage #joinOffMeetingModal .add_favEvent_box .fav_cancel button,
#app .chatPage #joinOffMeetingModal .add_favEvent_box .fav_cancel button {
  font-size: inherit;
}
#app .myPage #joinOffMeetingModal .modal-footer .fav,
#app .chatPage #joinOffMeetingModal .modal-footer .fav {
  border: 1px solid var(--blue_main);
  color: var(--blue_main);
  width: 140px;
  padding-inline: 0;
  position: relative;
  text-align: center;
}
#app .myPage #joinOffMeetingModal .modal-footer .fav i,
#app .chatPage #joinOffMeetingModal .modal-footer .fav i {
  font-weight: 400;
}
#app .myPage #joinOffMeetingModal .modal-footer .fav svg,
#app .chatPage #joinOffMeetingModal .modal-footer .fav svg {
  background: var(--blue_main);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg class="svg-inline--fa fa-heart" aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"></path></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg class="svg-inline--fa fa-heart" aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"></path></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  margin-right: 5px;
}
#app .myPage #joinOffMeetingModal .modal-footer .fav .tip,
#app .chatPage #joinOffMeetingModal .modal-footer .fav .tip {
  bottom: -32%;
  left: -23%;
}
#app .myPage #joinOffMeetingModal .modal-footer .fav .text_registered,
#app .chatPage #joinOffMeetingModal .modal-footer .fav .text_registered {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage #joinOffMeetingModal .modal-footer .fav,
  #app .chatPage #joinOffMeetingModal .modal-footer .fav {
    width: 60px;
  }
  #app .myPage #joinOffMeetingModal .modal-footer .fav .text_normal,
  #app .myPage #joinOffMeetingModal .modal-footer .fav .text_registered,
  #app .chatPage #joinOffMeetingModal .modal-footer .fav .text_normal,
  #app .chatPage #joinOffMeetingModal .modal-footer .fav .text_registered {
    display: none;
  }
}
#app .myPage #joinOffMeetingModal .modal-footer .fav.is_active i,
#app .chatPage #joinOffMeetingModal .modal-footer .fav.is_active i {
  font-weight: 900;
}
#app .myPage #joinOffMeetingModal .modal-footer .fav.is_active svg,
#app .chatPage #joinOffMeetingModal .modal-footer .fav.is_active svg {
  background: initial;
  -webkit-mask-image: initial;
          mask-image: initial;
}
@media screen and (max-width: 767px) {
  #app .myPage #joinOffMeetingModal .modal-footer .fav.is_active svg,
  #app .chatPage #joinOffMeetingModal .modal-footer .fav.is_active svg {
    margin-right: initial;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage #joinOffMeetingModal .modal-footer .fav.is_active .text_normal,
  #app .chatPage #joinOffMeetingModal .modal-footer .fav.is_active .text_normal {
    display: none;
  }
  #app .myPage #joinOffMeetingModal .modal-footer .fav.is_active .text_registered,
  #app .chatPage #joinOffMeetingModal .modal-footer .fav.is_active .text_registered {
    display: inline-block;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage #joinOffMeetingModal .modal-footer .fav:not(.is_active):hover .tip:not(.is_active),
  #app .chatPage #joinOffMeetingModal .modal-footer .fav:not(.is_active):hover .tip:not(.is_active) {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage #joinOffMeetingModal .modal-footer .fav.is_active:hover .tip.is_active,
  #app .chatPage #joinOffMeetingModal .modal-footer .fav.is_active:hover .tip.is_active {
    display: block;
  }
}
#app .myPage #joinOffMeetingModal .modal-footer.not_accept,
#app .chatPage #joinOffMeetingModal .modal-footer.not_accept {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
@media screen and (min-width: 768px) {
  #app .myPage #joinOffMeetingModal .icon_box li:hover .tip,
  #app .chatPage #joinOffMeetingModal .icon_box li:hover .tip {
    display: block;
  }
  #app .myPage #joinOffMeetingModal .icon_box li:nth-child(-n+27):hover .tip,
  #app .chatPage #joinOffMeetingModal .icon_box li:nth-child(-n+27):hover .tip {
    bottom: auto;
    top: 70px;
  }
  #app .myPage #joinOffMeetingModal .icon_box li:nth-child(-n+27):hover .tip .tip_inner::after,
  #app .chatPage #joinOffMeetingModal .icon_box li:nth-child(-n+27):hover .tip .tip_inner::after {
    content: "▲";
    position: absolute;
    top: -5px;
  }
}
#app .myPage #joinChatModal .modal-body .chat_text,
#app .myPage #joinOffMeetingModal .modal-body .chat_text,
#app .chatPage #joinChatModal .modal-body .chat_text,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text {
  margin-left: auto;
  width: calc(100% - 125px);
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  margin-bottom: 10px;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author.is_official .chat_link,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author.is_official .chat_link,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author.is_official .chat_link,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author.is_official .chat_link {
  margin-top: 0;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label,
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label {
  margin-bottom: 0;
  display: -webkit-box;
  display: flex;
  font-size: 11px;
  border-bottom: var(--gray_20) 1px solid;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label dt,
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label dt,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dt,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label dt,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label dt,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label dt,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dt,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label dt {
  margin-bottom: 0;
  margin-right: 5px;
  flex-shrink: 0;
  font-weight: normal;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd,
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label dd,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label dd,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label dd,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label dd {
  margin-bottom: 0;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd small,
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label dd small,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd small,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label dd small,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd small,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label dd small,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd small,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label dd small {
  font-size: 10px;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd [class^=userstatus_],
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label dd [class^=userstatus_],
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd [class^=userstatus_],
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label dd [class^=userstatus_],
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd [class^=userstatus_],
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_info_label dd [class^=userstatus_],
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd [class^=userstatus_],
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_info_label dd [class^=userstatus_] {
  padding: 3px 5px;
  margin-bottom: 2px;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label.chat_admin dd > div,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label.chat_admin dd > div,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label.chat_admin dd > div,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label.chat_admin dd > div {
  position: relative;
  display: -webkit-inline-box;
  display: inline-flex;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label.chat_number dd,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label.chat_number dd,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label.chat_number dd,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label.chat_number dd {
  width: 3rem;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd .author_img,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd .author_img,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd .author_img,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd .author_img {
  width: 15px;
  height: 15px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
  /*margin-right: 3px; user-frontでは必要*/
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd > div > a:hover,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd > div > a:hover,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd > div > a:hover,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd > div > a:hover {
  text-decoration: none;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd > div > a:hover .author_img,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd > div > a:hover .author_img,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label dd > div > a:hover .author_img,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label dd > div > a:hover .author_img {
  opacity: 0.7;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_link,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_link,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link {
  display: -webkit-box;
  display: flex;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .chat_info_label dd,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .chat_info_label dd,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .chat_info_label dd,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .chat_info_label dd {
  width: 195px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .btn-copy,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .btn-copy,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .btn-copy,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .btn-copy {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  border: var(--gray_20) 1px solid;
}
#app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .btn-copy img,
#app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .btn-copy img,
#app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .btn-copy img,
#app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .btn-copy img {
  width: 10px;
}
@media screen and (max-width: 767px) {
  #app .myPage #joinChatModal .modal-body .chat_text,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text,
  #app .chatPage #joinChatModal .modal-body .chat_text,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text {
    width: 100%;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author {
    margin-bottom: 10px;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label {
    padding: 3px 0;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label.chat_admin,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label.chat_admin,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label.chat_admin,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label.chat_admin {
    width: 100%;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author .author_label.chat_admin dd,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label.chat_admin dd,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author .author_label.chat_admin dd,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .author_label.chat_admin dd {
    width: auto;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_link,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_link,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link {
    margin-top: 0;
    margin-left: 5px;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author.is_official .chat_link,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author.is_official .chat_link,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author.is_official .chat_link,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author.is_official .chat_link {
    width: 100%;
    margin-left: 0;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author.is_official .chat_link .chat_info_label dd,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author.is_official .chat_link .chat_info_label dd,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author.is_official .chat_link .chat_info_label dd,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author.is_official .chat_link .chat_info_label dd {
    display: block;
    width: 134px;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .chat_info_label,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .chat_info_label,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .chat_info_label,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .chat_info_label {
    padding: 3px 0;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .chat_info_label dd,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .chat_info_label dd,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_link .chat_info_label dd,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link .chat_info_label dd {
    display: none;
  }
  #app .myPage #joinChatModal .modal-body .chat_text .modal_author .chat_link button,
  #app .myPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link button,
  #app .chatPage #joinChatModal .modal-body .chat_text .modal_author .chat_link button,
  #app .chatPage #joinOffMeetingModal .modal-body .chat_text .modal_author .chat_link button {
    margin: 3px 0 0 0;
  }
}
#app .myPage #joinChatModal .modal_chatInfo,
#app .myPage #joinOffMeetingModal .modal_chatInfo,
#app .chatPage #joinChatModal .modal_chatInfo,
#app .chatPage #joinOffMeetingModal .modal_chatInfo {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  margin: 5px 5px 0 5px;
}
#app .myPage #joinChatModal .modal_chatInfo .chat_icon,
#app .myPage #joinOffMeetingModal .modal_chatInfo .chat_icon,
#app .chatPage #joinChatModal .modal_chatInfo .chat_icon,
#app .chatPage #joinOffMeetingModal .modal_chatInfo .chat_icon {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
#app .myPage #joinChatModal .modal_chatInfo .chat_title,
#app .myPage #joinOffMeetingModal .modal_chatInfo .chat_title,
#app .chatPage #joinChatModal .modal_chatInfo .chat_title,
#app .chatPage #joinOffMeetingModal .modal_chatInfo .chat_title {
  font-size: 23px;
  line-height: 1.4;
  font-weight: bold;
  margin-bottom: 0;
  margin-left: 20px;
}
#app .myPage #joinChatModal .text_content,
#app .myPage #joinOffMeetingModal .text_content,
#app .chatPage #joinChatModal .text_content,
#app .chatPage #joinOffMeetingModal .text_content {
  max-height: 30vh;
  overflow: auto;
  margin-bottom: 0;
  -webkit-overflow-scrolling: touch;
  padding: 20px 10px 20px 20px;
  z-index: 10;
}
#app .myPage #joinOffMeetingModal .chatMainImg,
#app .chatPage #joinOffMeetingModal .chatMainImg {
  position: relative;
}
#app .myPage #joinOffMeetingModal .chatMainImg .cover, #app .myPage #joinOffMeetingModal .chatMainImg.is_before .text_close, #app .myPage #joinOffMeetingModal .chatMainImg.is_close .text_before,
#app .chatPage #joinOffMeetingModal .chatMainImg .cover,
#app .chatPage #joinOffMeetingModal .chatMainImg.is_before .text_close,
#app .chatPage #joinOffMeetingModal .chatMainImg.is_close .text_before {
  display: none;
}
#app .myPage #joinOffMeetingModal .chatMainImg.is_before .cover, #app .myPage #joinOffMeetingModal .chatMainImg.is_close .cover,
#app .chatPage #joinOffMeetingModal .chatMainImg.is_before .cover,
#app .chatPage #joinOffMeetingModal .chatMainImg.is_close .cover {
  position: absolute;
  display: block;
  top: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(112, 112, 112, 0.8);
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
@media screen and (max-width: 767px) {
  #app .myPage #joinChatModal .modal_chatInfo,
  #app .myPage #joinOffMeetingModal .modal_chatInfo,
  #app .chatPage #joinChatModal .modal_chatInfo,
  #app .chatPage #joinOffMeetingModal .modal_chatInfo {
    margin: 0 0 10px 0;
  }
  #app .myPage #joinChatModal .modal_chatInfo .chat_icon,
  #app .myPage #joinOffMeetingModal .modal_chatInfo .chat_icon,
  #app .chatPage #joinChatModal .modal_chatInfo .chat_icon,
  #app .chatPage #joinOffMeetingModal .modal_chatInfo .chat_icon {
    width: 80px;
    height: 80px;
  }
  #app .myPage #joinChatModal .modal_chatInfo .chat_title,
  #app .myPage #joinOffMeetingModal .modal_chatInfo .chat_title,
  #app .chatPage #joinChatModal .modal_chatInfo .chat_title,
  #app .chatPage #joinOffMeetingModal .modal_chatInfo .chat_title {
    font-size: 16px;
    margin-left: 15px;
  }
  #app .myPage #joinOffMeetingModal .chatMainImg.is_before .cover, #app .myPage #joinOffMeetingModal .chatMainImg.is_close .cover,
  #app .chatPage #joinOffMeetingModal .chatMainImg.is_before .cover,
  #app .chatPage #joinOffMeetingModal .chatMainImg.is_close .cover {
    width: 80px;
    height: 80px;
  }
}
#app .myPage #joinChatModal .modal-footer .check_area,
#app .myPage #joinOffMeetingModal .modal-footer .check_area,
#app .chatPage #joinChatModal .modal-footer .check_area,
#app .chatPage #joinOffMeetingModal .modal-footer .check_area {
  width: 100%;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 0 5px 8px;
  border-radius: 5px;
}
#app .myPage #joinChatModal .modal-footer .check_area.is_approval,
#app .myPage #joinOffMeetingModal .modal-footer .check_area.is_approval,
#app .chatPage #joinChatModal .modal-footer .check_area.is_approval,
#app .chatPage #joinOffMeetingModal .modal-footer .check_area.is_approval {
  color: var(--orange_main);
  padding: 8px 5px 8px;
  margin: -25px -12px 10px;
  width: calc(100% + 24px);
}
#app .myPage #joinChatModal .modal-footer .check_area label,
#app .myPage #joinOffMeetingModal .modal-footer .check_area label,
#app .chatPage #joinChatModal .modal-footer .check_area label,
#app .chatPage #joinOffMeetingModal .modal-footer .check_area label {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  #app .myPage #joinChatModal .text_content_outline,
  #app .myPage #joinOffMeetingModal .text_content_outline,
  #app .chatPage #joinChatModal .text_content_outline,
  #app .chatPage #joinOffMeetingModal .text_content_outline {
    margin-left: -5px;
    margin-right: -5px;
  }
  #app .myPage #joinChatModal .text_content,
  #app .myPage #joinOffMeetingModal .text_content,
  #app .chatPage #joinChatModal .text_content,
  #app .chatPage #joinOffMeetingModal .text_content {
    max-height: 30vh;
    padding: 10px 0 10px 10px;
  }
  #app .myPage .modal-body .target_memberlist,
  #app .chatPage .modal-body .target_memberlist {
    height: 27vh;
  }
  #app .myPage .target_memberlist.is_edit li label,
  #app .chatPage .target_memberlist.is_edit li label {
    padding-left: 5px;
  }
  #app .myPage .target_memberlist li .username,
  #app .chatPage .target_memberlist li .username {
    font-size: 0.875rem;
    line-height: 1.2rem;
  }
  #app .myPage .target_memberlist li input[type=checkbox],
  #app .chatPage .target_memberlist li input[type=checkbox] {
    top: 14px;
    left: 8px;
  }
  #app .myPage .target_memberlist li input[type=checkbox]:checked + label .username small,
  #app .chatPage .target_memberlist li input[type=checkbox]:checked + label .username small {
    display: none;
  }
  #app .myPage .target_memberlist li select,
  #app .chatPage .target_memberlist li select {
    right: 5px;
    top: 8px;
  }
  #app .myPage .target_memberlist.is_edit li select,
  #app .chatPage .target_memberlist.is_edit li select {
    right: 30px;
  }
  #app .myPage .target_memberlist.is_judge .btn_radiobox label,
  #app .chatPage .target_memberlist.is_judge .btn_radiobox label {
    font-size: 0.8125rem;
    padding: 4px 8px 4px 23px;
  }
  #app .myPage .target_memberlist.is_judge .btn_radiobox input[type=radio],
  #app .chatPage .target_memberlist.is_judge .btn_radiobox input[type=radio] {
    top: 6px;
    left: 5px;
  }
  #app .myPage .accordion_body .form_box .btn_outline_blue,
  #app .chatPage .accordion_body .form_box .btn_outline_blue {
    font-size: 1rem;
    padding: 5px 30px !important;
  }
  #app .myPage .accordion_body .form_box .btn_edit_member,
  #app .chatPage .accordion_body .form_box .btn_edit_member {
    font-size: 0.875rem !important;
  }
}
#app .myPage .modal-content .form-label,
#app .chatPage .modal-content .form-label {
  margin-bottom: 3px;
  font-size: 0.8125rem;
}
#app .myPage .modal-content .balloon_box.arrow_bottom_left:before,
#app .chatPage .modal-content .balloon_box.arrow_bottom_left:before {
  padding-left: 10%;
}
#app .myPage .modal-footer .balloon_box,
#app .chatPage .modal-footer .balloon_box {
  width: 100%;
  font-size: 0.8125rem;
  line-height: 1.2rem;
  font-weight: bold;
}
#app .myPage .modal-footer .balloon_box.bg_lightyellow,
#app .myPage .modal-footer .alert.bg_lightyellow,
#app .chatPage .modal-footer .balloon_box.bg_lightyellow,
#app .chatPage .modal-footer .alert.bg_lightyellow {
  color: var(--orange_main);
}
#app .myPage .modal-footer.join_chat,
#app .chatPage .modal-footer.join_chat {
  padding-top: 25px;
}
#app .myPage .modal-footer.join_chat button,
#app .chatPage .modal-footer.join_chat button {
  margin-bottom: 20px;
}
#app .myPage .modal-footer.join_chat button:not(:last-of-type),
#app .chatPage .modal-footer.join_chat button:not(:last-of-type) {
  margin-right: 15px;
}
@media screen and (max-width: 767px) {
  #app .myPage .modal-footer.join_chat button:not(:last-of-type),
  #app .chatPage .modal-footer.join_chat button:not(:last-of-type) {
    margin-right: 5px;
  }
}
#app .myPage .modal-footer.join_chat .btn_join,
#app .chatPage .modal-footer.join_chat .btn_join {
  min-width: 230px;
}
@media screen and (max-width: 767px) {
  #app .myPage .modal-footer.join_chat .btn_join,
  #app .chatPage .modal-footer.join_chat .btn_join {
    min-width: 120px;
  }
}
#app .myPage .modal-footer.join_chat .btn_nojoin,
#app .chatPage .modal-footer.join_chat .btn_nojoin {
  min-width: 145px;
}
@media screen and (max-width: 767px) {
  #app .myPage .modal-footer.join_chat .btn_nojoin,
  #app .chatPage .modal-footer.join_chat .btn_nojoin {
    min-width: auto;
  }
}
#app .myPage .modal-footer.join_chat .statusArea,
#app .chatPage .modal-footer.join_chat .statusArea {
  width: 100%;
  text-align: right;
  margin: -20px 0 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .modal-footer.join_chat .statusArea,
  #app .chatPage .modal-footer.join_chat .statusArea {
    margin: 5px 0;
  }
}
#app .myPage .modal-footer.join_chat .textCount,
#app .chatPage .modal-footer.join_chat .textCount {
  display: inline-block;
  font-size: 12px;
  margin-bottom: 0;
}
#app .myPage .modal-footer.join_chat .currentTextNum,
#app .chatPage .modal-footer.join_chat .currentTextNum {
  font-size: 12px;
}
#app .myPage .modal-footer.join_chat .currentTextNum.is_over,
#app .chatPage .modal-footer.join_chat .currentTextNum.is_over {
  color: var(--red_main);
  font-weight: bold;
}
#app .myPage .modal-footer.join_chat .maxTextNum,
#app .chatPage .modal-footer.join_chat .maxTextNum {
  font-size: 12px;
}
#app .myPage .modal-footer.join_chat .maxTextNum::before,
#app .chatPage .modal-footer.join_chat .maxTextNum::before {
  content: "/";
  display: inline-block;
  padding: 0 3px 0 5px;
}
#app .myPage .modal-footer.join_chat .inputArea,
#app .chatPage .modal-footer.join_chat .inputArea {
  margin: 0 0 20px;
  width: 100%;
}
#app .myPage .modal-footer.join_chat textarea,
#app .chatPage .modal-footer.join_chat textarea {
  border: 1px solid var(--gray_20);
  width: 100%;
  border-radius: 5px;
  padding: 8px;
  margin: 0;
}
#app .myPage .modal-footer.join_chat .messageBox,
#app .chatPage .modal-footer.join_chat .messageBox {
  font-size: 14px;
  border: 1px solid var(--gray_20);
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 10px 20px;
}
#app .myPage .modal-footer.join_chat .messageBox.is_close,
#app .chatPage .modal-footer.join_chat .messageBox.is_close {
  color: var(--gray_30);
  font-size: 12px;
  border: none;
  background: var(--gray_5);
}
#app .myPage .tagInput,
#app .chatPage .tagInput {
  width: 100%;
  min-height: 35px;
  border: 1px solid var(--gray_20);
  border-radius: 3px;
  padding: 5px;
  cursor: text;
}
#app .myPage .tagList,
#app .chatPage .tagList {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#app .myPage .tagList .tagItems,
#app .chatPage .tagList .tagItems {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-self: flex-start;
  flex-shrink: 0;
  background-color: var(--navy_bg01);
  color: var(--blue_main);
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: bold;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#app .myPage .tagList .tagItems:hover,
#app .chatPage .tagList .tagItems:hover {
  text-decoration: none;
}
#app .myPage .tagList .tagItems:last-of-type,
#app .chatPage .tagList .tagItems:last-of-type {
  margin-right: 0;
}
#app .myPage .tagList .tagItems::before,
#app .chatPage .tagList .tagItems::before {
  content: "#";
  display: inline-block;
  padding-right: 3px;
}
#app .myPage .tagList .tagItems:hover,
#app .chatPage .tagList .tagItems:hover {
  opacity: 0.7;
}
#app .myPage .tagInput .tagList .tagItems,
#app .chatPage .tagInput .tagList .tagItems {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding: 2px 5px;
}
#app .myPage .tagInput .tagList .tagItems .tag_delete,
#app .chatPage .tagInput .tagList .tagItems .tag_delete {
  width: 18px;
  height: 18px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  margin-left: 3px;
  font-size: 14px;
  border-radius: 3px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
#app .myPage .tagInput .tagList .tagItems .tag_delete:hover,
#app .chatPage .tagInput .tagList .tagItems .tag_delete:hover {
  background-color: var(--blue_main);
  color: var(--navy_bg01);
}
#app .myPage .tagStatusArea,
#app .chatPage .tagStatusArea {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  margin: 10px 0 -24px;
}
#app .myPage .tagStatusArea .subText,
#app .chatPage .tagStatusArea .subText {
  margin-bottom: 0;
}
#app .myPage .tagStatusArea .subText.is_error,
#app .chatPage .tagStatusArea .subText.is_error {
  color: var(--red_main);
  margin-bottom: 24px;
}
#app .myPage .tagStatusArea .tagCount,
#app .chatPage .tagStatusArea .tagCount {
  margin: 0;
  margin-left: auto;
  font-size: 0.8em;
}
#app .myPage .tagStatusArea .tagCount .currentTagsNum.is_error,
#app .chatPage .tagStatusArea .tagCount .currentTagsNum.is_error {
  color: var(--red_main);
  font-weight: bold;
}
#app .myPage .tagStatusArea .tagCount .maxTagsNum::before,
#app .chatPage .tagStatusArea .tagCount .maxTagsNum::before {
  content: "/";
  display: inline-block;
  padding: 0 3px 0 5px;
}
#app .myPage #anime_logo_wrap,
#app .chatPage #anime_logo_wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: calc(100vh - 46px);
  z-index: 1030;
  background-color: #f8f9fa;
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-animation: animate-wrap 0.3s ease 0.3s both;
  animation: animate-wrap 0.3s ease 0.3s both;
  min-width: 100%;
}
@-webkit-keyframes animate-wrap {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animate-wrap {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#app .myPage #anime_logo_wrap svg,
#app .chatPage #anime_logo_wrap svg {
  width: 120px;
  margin: auto;
  -webkit-animation: animate-svg-all 0.6s alternate 2.4s infinite;
  animation: animate-svg-all 0.6s alternate 2.4s infinite;
}
@media screen and (max-width: 767px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが 767px まで　※スマホ表示*/
  }
  #app .myPage #anime_logo_wrap,
  #app .chatPage #anime_logo_wrap {
    position: fixed;
    top: 89px;
    bottom: auto;
    width: 100%;
    height: calc(100vh - 89px);
  }
  #app .myPage #anime_logo_wrap svg,
  #app .chatPage #anime_logo_wrap svg {
    width: 80px;
    padding-bottom: 40px;
    -webkit-animation: animate-svg-all_sp 0.6s alternate 2.4s infinite;
    animation: animate-svg-all_sp 0.6s alternate 2.4s infinite;
  }
}
@-webkit-keyframes animate-svg-all {
  0% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
  100% {
    -webkit-transform: translate(0%, -20px);
            transform: translate(0%, -20px);
  }
}
@keyframes animate-svg-all {
  0% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
  100% {
    -webkit-transform: translate(0%, -20px);
            transform: translate(0%, -20px);
  }
}
@-webkit-keyframes animate-svg-all_sp {
  0% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
  100% {
    -webkit-transform: translate(0%, -20px);
            transform: translate(0%, -20px);
  }
}
@keyframes animate-svg-all_sp {
  0% {
    -webkit-transform: translate(0%, 0%);
            transform: translate(0%, 0%);
  }
  100% {
    -webkit-transform: translate(0%, -20px);
            transform: translate(0%, -20px);
  }
}
@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
#app .myPage .svg-elem-1,
#app .chatPage .svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.8s ease 0.3s both;
  animation: animate-svg-fill-1 0.8s ease 0.3s both;
}
@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
#app .myPage .svg-elem-2,
#app .chatPage .svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.8s ease 0.5s both;
  animation: animate-svg-fill-2 0.8s ease 0.5s both;
}
@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
#app .myPage .svg-elem-3,
#app .chatPage .svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.8s ease 0.7s both;
  animation: animate-svg-fill-3 0.8s ease 0.7s both;
}
@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
#app .myPage .svg-elem-4,
#app .chatPage .svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.8s ease 0.9s both;
  animation: animate-svg-fill-4 0.8s ease 0.9s both;
}
@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
#app .myPage .svg-elem-5,
#app .chatPage .svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.8s ease 1.1s both;
  animation: animate-svg-fill-5 0.8s ease 1.1s both;
}
@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
#app .myPage .svg-elem-6,
#app .chatPage .svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.8s ease 1.3s both;
  animation: animate-svg-fill-6 0.8s ease 1.3s both;
}
@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
#app .myPage .svg-elem-7,
#app .chatPage .svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.8s ease 1.5s both;
  animation: animate-svg-fill-7 0.8s ease 1.5s both;
}
@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: var(--blue_main);
  }
}
#app .myPage .svg-elem-8,
#app .chatPage .svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.8s ease 1.7s both;
  animation: animate-svg-fill-8 0.8s ease 1.7s both;
}
#app .myPage .birthdayAnimation,
#app .chatPage .birthdayAnimation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  z-index: 19999;
  overflow: hidden;
  background-color: var(--gray_50_a);
  -webkit-animation: birthday_modal 700ms linear;
          animation: birthday_modal 700ms linear;
}
#app .myPage .birthdayAnimation.fadeout,
#app .chatPage .birthdayAnimation.fadeout {
  opacity: 0;
  -webkit-transition: 0.3s linear 200ms;
  transition: 0.3s linear 200ms;
  background-color: rgba(0, 0, 0, 0);
  z-index: -99;
  visibility: hidden;
}
@-webkit-keyframes birthday_modal {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  30% {
    background-color: rgba(0, 0, 0, 0.2);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
@keyframes birthday_modal {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  30% {
    background-color: rgba(0, 0, 0, 0.2);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
#app .myPage .birthday_wrapper,
#app .chatPage .birthday_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 50%;
  width: 100%;
  height: 95svh;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage .birthday_wrapper .birthday_main_img,
#app .chatPage .birthday_wrapper .birthday_main_img {
  max-width: 400px;
  width: 100%;
  margin-top: -130px;
}
#app .myPage .birthday_wrapper .birthday_main_img svg,
#app .chatPage .birthday_wrapper .birthday_main_img svg {
  display: block;
  width: 100%;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
}
#app .myPage .birthday_wrapper .btn,
#app .chatPage .birthday_wrapper .btn {
  display: block;
  margin: 20px auto;
}
#app .myPage .birthday_wrapper p,
#app .chatPage .birthday_wrapper p {
  color: #fff;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px var(--gray_80);
}
@media screen and (max-width: 600px) {
  #app .myPage,
  #app .chatPage {
    /* 画面サイズが600pxまで */
  }
  #app .myPage .birthday_wrapper,
  #app .chatPage .birthday_wrapper {
    max-width: 280px;
  }
  #app .myPage .birthday_wrapper .birthday_main_img,
  #app .chatPage .birthday_wrapper .birthday_main_img {
    margin-top: -50px;
  }
}
@media screen and (max-width: 320px) {
  #app .myPage,
  #app .chatPage {
    /* 画面サイズが320pxまで */
  }
  #app .myPage .birthday_wrapper,
  #app .chatPage .birthday_wrapper {
    max-width: 240px;
  }
}
#app .myPage #passModal .modal-body,
#app .chatPage #passModal .modal-body {
  padding-bottom: 0.5rem;
}
#app .myPage #passModal .guide_text_wrap,
#app .chatPage #passModal .guide_text_wrap {
  position: relative;
}
#app .myPage #passModal .guide_text_wrap .icon,
#app .chatPage #passModal .guide_text_wrap .icon {
  position: absolute;
  left: -5px;
  top: -5px;
  z-index: 1;
}
#app .myPage #passModal .guide_text_wrap .icon::after,
#app .chatPage #passModal .guide_text_wrap .icon::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -3px;
  border: 8px solid transparent;
  border-left: 8px solid #bdcde5;
  z-index: 0;
  -webkit-transform: scale(0.8, 1) rotate(145deg);
          transform: scale(0.8, 1) rotate(145deg);
}
#app .myPage #passModal .guide_text_wrap .icon i,
#app .myPage #passModal .guide_text_wrap .icon svg,
#app .chatPage #passModal .guide_text_wrap .icon i,
#app .chatPage #passModal .guide_text_wrap .icon svg {
  font-size: 1.8em;
  color: #bdcde5;
}
#app .myPage #passModal .guide_text,
#app .chatPage #passModal .guide_text {
  position: relative;
  font-size: 0.8125rem;
  padding: 15px 15px 15px 25px;
  border-radius: 8px;
  margin-left: 0;
}
#app .myPage #passModal .modal-body .unicorn_icon,
#app .chatPage #passModal .modal-body .unicorn_icon {
  vertical-align: -1px;
}
#app .myPage #passModal .message_input_wrap,
#app .chatPage #passModal .message_input_wrap {
  padding: 10px 0 10px;
  margin-bottom: 15px;
  border-bottom: solid 1px var(--gray_5);
}
#app .myPage #passModal .message_input,
#app .chatPage #passModal .message_input {
  width: 100%;
  border: solid 1px var(--gray_60);
  padding: 5px 10px;
  font-size: 14px !important;
}
#app .myPage #passedModal .passed_img,
#app .chatPage #passedModal .passed_img {
  text-align: center;
  margin: 30px 0;
}
#app .myPage #passedModal .passed_img img,
#app .chatPage #passedModal .passed_img img {
  width: 100%;
  max-width: 400px;
}
#app .myPage #passedModal .passed-message,
#app .chatPage #passedModal .passed-message {
  background-color: #f4f6fa;
  padding: 5px 8px;
  border-radius: 5px;
}
#app .myPage #alreadyPassedModal .passed_img,
#app .chatPage #alreadyPassedModal .passed_img {
  text-align: center;
  margin: 24px 0;
}
#app .myPage #alreadyPassedModal .passed_img img,
#app .chatPage #alreadyPassedModal .passed_img img {
  width: 100%;
  max-width: 258px;
}
#app .myPage .content_tweet,
#app .chatPage .content_tweet {
  position: relative;
  margin: 15px;
}
#app .myPage .userTweetWrap,
#app .chatPage .userTweetWrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--navy_bg01);
  height: 2.5em;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.875rem;
  white-space: nowrap;
}
#app .myPage .userTweetWrap .is_hidden,
#app .chatPage .userTweetWrap .is_hidden {
  color: var(--gray_60);
  margin-left: 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .userTweetWrap .is_hidden,
  #app .chatPage .userTweetWrap .is_hidden {
    font-size: 11px;
  }
}
#app .myPage .userTweetWrap:before,
#app .myPage .userTweetWrap:after,
#app .chatPage .userTweetWrap:before,
#app .chatPage .userTweetWrap:after {
  content: "";
  width: 15px;
  display: inline-block;
  height: 100%;
  background: var(--navy_bg01);
  position: absolute;
  z-index: 10;
  top: 0;
}
#app .myPage .userTweetWrap:before,
#app .chatPage .userTweetWrap:before {
  left: -1px;
  border-radius: 20px 0 0 20px;
}
#app .myPage .userTweetWrap:after,
#app .chatPage .userTweetWrap:after {
  right: -1px;
  border-radius: 0 20px 20px 0;
}
#app .myPage .userTweet,
#app .chatPage .userTweet {
  position: absolute;
  left: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-animation: marquee 20s linear infinite;
          animation: marquee 20s linear infinite;
  white-space: nowrap;
}
#app .myPage .userTweet.is_noScroll,
#app .chatPage .userTweet.is_noScroll {
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
  -webkit-animation: none;
          animation: none;
}
#app .myPage .toUserTweetList,
#app .chatPage .toUserTweetList {
  position: absolute;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  top: 0px;
  right: 0;
  width: 33px;
  height: 33px;
  /*width: 26.7px;
  height: 100%;*/
  color: #fff;
  background-color: var(--blue_main);
  border-radius: 50%;
  z-index: 15;
}
#app .myPage .toUserTweetList:hover .tip,
#app .chatPage .toUserTweetList:hover .tip {
  display: block;
}
@media screen and (max-width: 767px) {
  #app .myPage .toUserTweetList:hover .tip,
  #app .chatPage .toUserTweetList:hover .tip {
    display: none;
  }
}
#app .myPage .toUserTweetList .tip,
#app .chatPage .toUserTweetList .tip {
  width: 180px;
  top: 14px;
  left: -73px;
}
#app .myPage .toUserTweetList svg path,
#app .chatPage .toUserTweetList svg path {
  fill: #fff;
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes marquee {
  0% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
#app .myPage #log_outline > .content_tweet,
#app .chatPage #log_outline > .content_tweet {
  margin-top: 30px;
}
#app .myPage .log_userthumb,
#app .chatPage .log_userthumb {
  position: relative;
}
#app .myPage .log_userthumb .chatPage_tweet,
#app .chatPage .log_userthumb .chatPage_tweet {
  position: absolute !important;
  top: -8px;
  left: 25px;
}
#app .myPage .log_userthumb .chatPage_tweet .is_hidden,
#app .chatPage .log_userthumb .chatPage_tweet .is_hidden {
  color: var(--gray_50);
}
#app .myPage .userProfile .user_img .chatPage_tweet,
#app .chatPage .userProfile .user_img .chatPage_tweet {
  position: absolute;
  top: 35px;
  left: 35px;
}
#app .myPage .chatPage_tweet .icon_tweet,
#app .chatPage .chatPage_tweet .icon_tweet {
  color: var(--navy_main);
  fill: var(--navy_main);
  display: inline-block;
}
@media screen and (max-width: 767px) {
  #app .myPage .userProfile .user_img .chatPage_tweet,
  #app .chatPage .userProfile .user_img .chatPage_tweet {
    position: absolute;
    top: 25px;
    left: 30px;
  }
}
#app .myPage .popover.is_reply,
#app .chatPage .popover.is_reply {
  z-index: 20000;
}
#app .myPage .popover.is_reply article > div,
#app .chatPage .popover.is_reply article > div {
  border-top: none;
  background-color: #fff;
}
#app .myPage .popover.bs-popover-bottom.is_reply .arrow,
#app .chatPage .popover.bs-popover-bottom.is_reply .arrow {
  top: calc(-0.5rem - 1px);
  bottom: auto;
}
#app .myPage .popover.bs-popover-bottom.is_reply .arrow::before,
#app .chatPage .popover.bs-popover-bottom.is_reply .arrow::before {
  top: 0;
  bottom: auto;
  border-width: 0 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-top-color: transparent;
}
#app .myPage .popover.bs-popover-bottom.is_reply .arrow::after,
#app .chatPage .popover.bs-popover-bottom.is_reply .arrow::after {
  top: 1px;
  bottom: auto;
  border-width: 0 0.5rem 0.5rem;
  border-bottom-color: #fff;
}
@media screen and (min-width: 768px) {
  #app .myPage,
  #app .chatPage {
    /* つぶやきpopover */
  }
  #app .myPage .content_chatlog .content_tweet,
  #app .chatPage .content_chatlog .content_tweet {
    max-width: 60%;
  }
  #app .myPage .toUserTweetList:hover,
  #app .myPage #chat_log .toUserTweetList:hover,
  #app .chatPage .toUserTweetList:hover,
  #app .chatPage #chat_log .toUserTweetList:hover {
    opacity: 1;
    text-decoration: none;
    color: #fff;
    background-color: var(--blue_sub);
  }
  #app .myPage .popover.is_tweet,
  #app .chatPage .popover.is_tweet {
    border: none;
    width: 300px;
    font-size: 0.75rem;
    position: absolute !important;
    top: auto;
    bottom: 30px;
    left: -30px;
    visibility: hidden;
    -webkit-filter: drop-shadow(2px 2px 1px var(--gray_10));
            filter: drop-shadow(2px 2px 1px var(--gray_10));
  }
  #app .myPage .popover.is_tweet .arrow,
  #app .chatPage .popover.is_tweet .arrow {
    left: 12px;
  }
  #app .myPage .userProfile .popover.is_tweet,
  #app .chatPage .userProfile .popover.is_tweet {
    bottom: 65px;
    left: -35px;
  }
  #app .myPage .chatPage_tweet .icon_tweet:hover + .popover.is_tweet,
  #app .chatPage .chatPage_tweet .icon_tweet:hover + .popover.is_tweet {
    visibility: visible;
    -webkit-animation: tweetFadeIn 0.3s forwards;
            animation: tweetFadeIn 0.3s forwards;
  }
  @-webkit-keyframes tweetFadeIn {
    0% {
      visibility: visible;
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tweetFadeIn {
    0% {
      visibility: visible;
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  #app .myPage .popover.is_tweet .arrow,
  #app .chatPage .popover.is_tweet .arrow {
    margin: 0 1rem;
  }
  #app .myPage .popover.is_tweet .arrow::after,
  #app .myPage .popover.is_tweet .arrow::before,
  #app .chatPage .popover.is_tweet .arrow::after,
  #app .chatPage .popover.is_tweet .arrow::before {
    border-top-color: #e6f0ff !important;
  }
  #app .myPage .popover.is_tweet .popover-body,
  #app .chatPage .popover.is_tweet .popover-body {
    padding: 10px 15px;
    background-color: #e6f0ff;
    border-radius: 5px;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage .userTweet,
  #app .chatPage .userTweet {
    font-size: 12px;
  }
  #app .myPage #main_mypage .toUserTweetList i,
  #app .chatPage #main_mypage .toUserTweetList i {
    margin: 0;
    color: #fff;
  }
  #app .myPage .popover.is_tweet,
  #app .chatPage .popover.is_tweet {
    display: none;
  }
}
#app .myPage #tweetModal .modal-content,
#app .chatPage #tweetModal .modal-content {
  max-height: 70vh;
}
#app .myPage #tweetModal .modal-header,
#app .chatPage #tweetModal .modal-header {
  background-color: var(--navy_bg02);
}
#app .myPage #tweetModal .modal-body,
#app .chatPage #tweetModal .modal-body {
  position: relative;
  padding: 1rem;
}
#app .myPage #tweetModal .icon,
#app .chatPage #tweetModal .icon {
  fill: var(--navy_main);
  width: 20px;
  height: auto;
  display: inline-block;
  margin-right: 5px;
}
#app .myPage #tweetModal .chatPage_tweet,
#app .chatPage #tweetModal .chatPage_tweet {
  display: none;
}
#app .myPage #tweetModal .modal-body .tweetList:empty:after,
#app .chatPage #tweetModal .modal-body .tweetList:empty:after {
  content: "まだつぶやきが登録されていません";
}
@media screen and (max-width: 767px) {
  #app .myPage #tweetModal,
  #app .chatPage #tweetModal {
    padding: 45px 0 0;
    overflow: hidden;
  }
  #app .myPage #tweetModal .modal-dialog,
  #app .chatPage #tweetModal .modal-dialog {
    margin: 0;
    max-height: 100%;
  }
  #app .myPage #tweetModal .modal-content,
  #app .chatPage #tweetModal .modal-content {
    border-radius: 0;
    width: 100%;
    min-width: 100%;
    max-height: 100%;
  }
  #app .myPage #tweetModal .modal-header .close,
  #app .chatPage #tweetModal .modal-header .close {
    padding: 10px 10px 5px 15px;
  }
}
#app .myPage article.tweet_log,
#app .chatPage article.tweet_log {
  border: 1px solid var(--gray_10);
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  display: none;
  /* エモーティコン */
  /* リアクション結果 */
}
#app .myPage article.tweet_log.is_display,
#app .chatPage article.tweet_log.is_display {
  display: block;
}
#app .myPage article.tweet_log.is_display > div,
#app .chatPage article.tweet_log.is_display > div {
  display: -webkit-box;
  display: flex;
}
#app .myPage article.tweet_log .post_text,
#app .chatPage article.tweet_log .post_text {
  line-height: 1.6rem;
  font-size: 0.875rem;
  /* white-space: pre-wrap; user-frontのみ*/
}
#app .myPage article.tweet_log .fr-emoticon,
#app .chatPage article.tweet_log .fr-emoticon {
  width: 18px;
  background-repeat: no-repeat !important;
  background-size: 100% auto;
  height: 18px;
  margin: 0 3px;
  display: inline-block;
  padding-left: 18px;
  overflow: hidden;
}
#app .myPage article.tweet_log .log_userthumb,
#app .chatPage article.tweet_log .log_userthumb {
  width: 45px;
}
#app .myPage article.tweet_log .log_userthumb .user_img > a,
#app .chatPage article.tweet_log .log_userthumb .user_img > a {
  position: relative;
  display: block;
}
#app .myPage article.tweet_log .log_userthumb .user_img > a:hover,
#app .chatPage article.tweet_log .log_userthumb .user_img > a:hover {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}
#app .myPage article.tweet_log .log_userthumb .user_img > a:hover .tip,
#app .chatPage article.tweet_log .log_userthumb .user_img > a:hover .tip {
  display: -webkit-box;
  display: flex;
}
#app .myPage article.tweet_log .log_userthumb .user_proficon,
#app .chatPage article.tweet_log .log_userthumb .user_proficon {
  width: 35px;
  height: 35px;
}
#app .myPage article.tweet_log .log_userthumb .tip,
#app .chatPage article.tweet_log .log_userthumb .tip {
  left: -7px;
  text-align: left;
  top: 13px;
  width: 400px;
}
#app .myPage article.tweet_log .log_userthumb .tip::after,
#app .chatPage article.tweet_log .log_userthumb .tip::after {
  text-align: left !important;
  margin-left: 14px;
  padding-left: 8px;
  padding-right: 8px;
}
#app .myPage article.tweet_log .log_detail,
#app .chatPage article.tweet_log .log_detail {
  width: 95%;
  width: calc(100% - 45px);
}
#app .myPage article.tweet_log .post_user,
#app .chatPage article.tweet_log .post_user {
  position: relative;
  margin-bottom: 10px;
}
#app .myPage article.tweet_log .post_user a,
#app .chatPage article.tweet_log .post_user a {
  font-weight: bold;
}
#app .myPage article.tweet_log .post_user a.username,
#app .chatPage article.tweet_log .post_user a.username {
  font-weight: bold;
  position: relative;
  vertical-align: middle;
  margin-right: 5px;
}
#app .myPage article.tweet_log .post_user small:before,
#app .myPage article.tweet_log .post_user small:after,
#app .chatPage article.tweet_log .post_user small:before,
#app .chatPage article.tweet_log .post_user small:after {
  color: var(--text_main);
}
#app .myPage article.tweet_log .post_user .hasPost:before,
#app .chatPage article.tweet_log .post_user .hasPost:before {
  content: "(";
}
#app .myPage article.tweet_log .post_user .hasPost:after,
#app .chatPage article.tweet_log .post_user .hasPost:after {
  content: ")";
}
#app .myPage article.tweet_log .post_info,
#app .chatPage article.tweet_log .post_info {
  display: -webkit-box;
  display: flex;
  margin-top: -5px;
}
#app .myPage article.tweet_log .post_info time,
#app .chatPage article.tweet_log .post_info time {
  font-size: 0.6875rem;
  color: var(--gray_40);
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
#app .myPage article.tweet_log .post_info .user_proficon,
#app .chatPage article.tweet_log .post_info .user_proficon {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
}
#app .myPage article.tweet_log .post_text p,
#app .chatPage article.tweet_log .post_text p {
  margin-bottom: 0;
}
#app .myPage article.tweet_log .reaction_data,
#app .chatPage article.tweet_log .reaction_data {
  display: -webkit-box;
  display: flex;
  margin: 5px 10px 0px 0;
  flex-wrap: wrap;
  /* リアクションした人一覧 */
  /* 本番ではVue側で処理するため、不要 */
}
#app .myPage article.tweet_log .reaction_data li,
#app .chatPage article.tweet_log .reaction_data li {
  margin: 8px 5px 0 0;
  position: relative;
}
#app .myPage article.tweet_log .reaction_data li > .btn,
#app .chatPage article.tweet_log .reaction_data li > .btn {
  font-size: 0.6875rem;
  padding: 3px 8px 3px 6px;
  border: solid 1px #ccd4e0;
  background: #fff;
  border-radius: 20px;
  position: relative;
  height: 25px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage article.tweet_log .reaction_data li > .btn:hover,
#app .chatPage article.tweet_log .reaction_data li > .btn:hover {
  background-color: var(--mint_bg01);
  border: solid 1px var(--mint_main);
  position: relative;
  opacity: 1;
  filter: alpha(opacity=100);
}
#app .myPage article.tweet_log .reaction_data li > .btn.is_myAct,
#app .chatPage article.tweet_log .reaction_data li > .btn.is_myAct {
  color: var(--blue_main);
  border: solid 1px var(--blue_main);
  background-color: var(--gray_5);
}
#app .myPage article.tweet_log .reaction_data li > .btn.is_myAct .count,
#app .chatPage article.tweet_log .reaction_data li > .btn.is_myAct .count {
  font-weight: bold;
}
#app .myPage article.tweet_log .reaction_data li > .btn .count,
#app .chatPage article.tweet_log .reaction_data li > .btn .count {
  font-weight: normal;
}
#app .myPage article.tweet_log .reaction_data li .fr-emoticon,
#app .chatPage article.tweet_log .reaction_data li .fr-emoticon {
  width: 17px;
  height: 17px;
  margin: 0 2px 0 1px;
}
#app .myPage article.tweet_log .reaction_data .is_actList.btn,
#app .chatPage article.tweet_log .reaction_data .is_actList.btn {
  padding-right: 7px;
}
#app .myPage article.tweet_log .reaction_data .is_actList.btn svg,
#app .myPage article.tweet_log .reaction_data .is_actList.btn i,
#app .chatPage article.tweet_log .reaction_data .is_actList.btn svg,
#app .chatPage article.tweet_log .reaction_data .is_actList.btn i {
  color: var(--gray_20);
  font-size: 0.875rem;
  margin: 0 1px;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user {
  display: none;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .reaction_tab,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .reaction_tab {
  display: -webkit-box;
  display: flex;
  border-bottom: solid 1px var(--gray_10);
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .reaction_tab li,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .reaction_tab li {
  font-size: 0.6875rem;
  margin: 0 3px;
  padding: 3px 5px;
  display: -webkit-box;
  display: flex;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .reaction_tab li:hover,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .reaction_tab li:hover {
  cursor: pointer;
  background-color: var(--gray_5);
  border-radius: 3px 3px 0 0;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .reaction_tab li.current,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .reaction_tab li.current {
  border-bottom: solid 3px var(--blue_main);
  margin-bottom: -1px;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list ul,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list ul {
  display: none;
  margin: 5px 0;
  padding: 0 5px 35px;
  max-height: 150px;
  overflow: auto;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list ul:first-of-type,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list ul:first-of-type {
  display: block;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list li,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list li {
  display: -webkit-box;
  display: flex;
  margin: 3px 0;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list img,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
#app .myPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list .username,
#app .chatPage article.tweet_log .reaction_data .popover.is_reaction_user .user_list .username {
  display: block;
  font-size: 0.8125rem;
  line-height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 240px;
}
@media screen and (min-width: 768px) {
  #app .myPage,
  #app .chatPage {
    /* 最初のpopoverを下向きに表示 */
    /* user-frontで必要
    .content_chatlog #log_outline > div:first-of-type article .reaction_data .popover.is_reaction_user {
      top: 35px;
      left: 0px;
      bottom: auto;

      .arrow {
        transform: rotate(180deg);
        top: -8px;
      }
    } */
  }
  #app .myPage article,
  #app .chatPage article {
    /* 最初のpopoverを下向きに表示 */
    /* front-mockで必要（user-frontでは不要） */
    /* リアクション数が少ない時 */
  }
  #app .myPage article .reaction_data .btn:hover .tip,
  #app .chatPage article .reaction_data .btn:hover .tip {
    display: block;
  }
  #app .myPage article .reaction_data .btn .tip_inner,
  #app .chatPage article .reaction_data .btn .tip_inner {
    font-size: 0.6875rem;
    font-weight: normal;
  }
  #app .myPage article .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage article .reaction_data .popover.is_reaction_user .arrow {
    right: 100px;
  }
  #app .myPage article:first-of-type .reaction_data .popover.is_reaction_user,
  #app .chatPage article:first-of-type .reaction_data .popover.is_reaction_user {
    /* user-frontでは不要 */
    top: 35px;
    bottom: auto;
  }
  #app .myPage article:first-of-type .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage article:first-of-type .reaction_data .popover.is_reaction_user .arrow {
    /* user-frontでは不要 */
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    top: -8px;
  }
  #app .myPage article div:empty + div:empty + div:empty ~ li .popover.is_reaction_user,
  #app .chatPage article div:empty + div:empty + div:empty ~ li .popover.is_reaction_user {
    right: -140px !important;
  }
  #app .myPage article div:empty + div:empty + div:empty ~ li .popover.is_reaction_user .arrow,
  #app .chatPage article div:empty + div:empty + div:empty ~ li .popover.is_reaction_user .arrow {
    right: 145px;
  }
  #app .myPage article .reaction_data .popover.is_reaction_user .user_list a,
  #app .chatPage article .reaction_data .popover.is_reaction_user .user_list a {
    position: relative;
  }
  #app .myPage article .reaction_data .popover.is_reaction_user .user_list a:hover .tip,
  #app .chatPage article .reaction_data .popover.is_reaction_user .user_list a:hover .tip {
    display: block;
    margin-left: -3px;
    left: 0;
    text-align: left;
    width: 100px;
  }
  #app .myPage article .reaction_data .popover.is_reaction_user .user_list li a:hover,
  #app .chatPage article .reaction_data .popover.is_reaction_user .user_list li a:hover {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
  }
  #app .myPage article .reaction_data .popover.is_reaction_user .user_list li a:hover img,
  #app .chatPage article .reaction_data .popover.is_reaction_user .user_list li a:hover img {
    opacity: 0.7 !important;
    filter: alpha(opacity=70) !important;
  }
  #app .myPage article .reaction_data .popover.is_reaction_user .user_list .tip_inner:after,
  #app .chatPage article .reaction_data .popover.is_reaction_user .user_list .tip_inner:after {
    text-align: left;
    padding-left: 3px;
  }
  #app .myPage article .reaction_data .popover.is_reaction_user .user_list li:first-child a:hover .tip,
  #app .chatPage article .reaction_data .popover.is_reaction_user .user_list li:first-child a:hover .tip {
    bottom: -70px;
  }
  #app .myPage article .reaction_data .popover.is_reaction_user .user_list li:first-child .tip_inner:after,
  #app .chatPage article .reaction_data .popover.is_reaction_user .user_list li:first-child .tip_inner:after {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    margin-top: -24px;
  }
  #app .myPage article.tweet_log,
  #app .chatPage article.tweet_log {
    /* リアクションボタン */
  }
  #app .myPage article.tweet_log:last-of-type,
  #app .chatPage article.tweet_log:last-of-type {
    margin-bottom: 30px;
  }
  #app .myPage article.tweet_log .action_area,
  #app .chatPage article.tweet_log .action_area {
    position: absolute;
    right: 47px;
    top: 100%;
    background-color: #fff;
    padding: 5px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 1px 2px var(--gray_20);
    display: none;
    z-index: 980;
  }
  #app .myPage article.tweet_log .action_area ul,
  #app .chatPage article.tweet_log .action_area ul {
    display: -webkit-box;
    display: flex;
    margin-bottom: 0;
    -webkit-box-align: center;
            align-items: center;
    -webkit-align-items: center;
  }
  #app .myPage article.tweet_log .action_area .reactionbox,
  #app .chatPage article.tweet_log .action_area .reactionbox {
    font-size: 1.25rem;
    justify-content: space-around;
  }
  #app .myPage article.tweet_log .action_area .reactionbox li,
  #app .chatPage article.tweet_log .action_area .reactionbox li {
    margin: 0;
  }
  #app .myPage article.tweet_log .action_area .reactionbox li .tip,
  #app .chatPage article.tweet_log .action_area .reactionbox li .tip {
    width: 80px;
    left: -30px;
  }
  #app .myPage article.tweet_log .action_area .reactionbox li:hover .tip,
  #app .chatPage article.tweet_log .action_area .reactionbox li:hover .tip {
    display: block;
    bottom: -180%;
  }
  #app .myPage article.tweet_log .action_area .reactionbox li:hover .fr-emoticon,
  #app .chatPage article.tweet_log .action_area .reactionbox li:hover .fr-emoticon {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    display: block;
    margin-top: -5px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }
  #app .myPage article.tweet_log .action_area li,
  #app .chatPage article.tweet_log .action_area li {
    margin: 0 4px;
    cursor: pointer;
    position: relative;
  }
  #app .myPage article.tweet_log .action_area li:hover,
  #app .chatPage article.tweet_log .action_area li:hover {
    opacity: 0.8 !important;
    filter: alpha(opacity=80);
  }
  #app .myPage article.tweet_log .action_area li i,
  #app .myPage article.tweet_log .action_area li svg,
  #app .chatPage article.tweet_log .action_area li i,
  #app .chatPage article.tweet_log .action_area li svg {
    font-size: 0.875rem;
    width: 14px;
    fill: var(--gray_40);
    margin-left: 0;
  }
  #app .myPage article.tweet_log .action_area .btn,
  #app .chatPage article.tweet_log .action_area .btn {
    padding: 0px 3px;
    color: var(--gray_40);
    border: solid 1px var(--gray_10);
    background-color: var(--gray_5);
  }
  #app .myPage article.tweet_log .action_area .btn_reaction i,
  #app .myPage article.tweet_log .action_area .btn_reaction svg,
  #app .chatPage article.tweet_log .action_area .btn_reaction i,
  #app .chatPage article.tweet_log .action_area .btn_reaction svg {
    margin-left: 3px;
    display: block;
    margin-top: 4px;
    float: left;
    margin-bottom: 3px;
  }
  #app .myPage article.tweet_log .action_area .btn_reaction:after,
  #app .chatPage article.tweet_log .action_area .btn_reaction:after {
    content: "＋";
    font-weight: bold;
    font-size: 0.6875rem;
    display: block;
    float: right;
  }
  #app .myPage article.tweet_log:hover .action_area,
  #app .chatPage article.tweet_log:hover .action_area {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: stretch;
            align-items: stretch;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  #app .myPage article.tweet_log .action_area .reactionbox,
  #app .chatPage article.tweet_log .action_area .reactionbox {
    margin-bottom: 5px;
  }
  #app .myPage article.tweet_log .action_area .editbox,
  #app .chatPage article.tweet_log .action_area .editbox {
    padding-left: 0;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage article.tweet_log.is_display.is_show, #app .myPage article.tweet_log.is_display.is_showReaction,
  #app .chatPage article.tweet_log.is_display.is_show,
  #app .chatPage article.tweet_log.is_display.is_showReaction {
    z-index: 2;
    background-color: #fff;
    position: relative;
  }
  #app .myPage article.tweet_log.is_display.is_show .action_area,
  #app .chatPage article.tweet_log.is_display.is_show .action_area {
    display: -webkit-box;
    display: flex;
    -webkit-animation: anim_show_reaction 0.2s forwards;
            animation: anim_show_reaction 0.2s forwards;
  }
  #app .myPage article.tweet_log.is_display .action_area,
  #app .chatPage article.tweet_log.is_display .action_area {
    position: fixed;
    width: 85vw;
    max-width: 420px;
    min-width: 300px;
    background-color: var(--gray_black);
    padding: 15px;
    border: solid 1px #fff;
    border-radius: 10px;
    box-shadow: 0px 1px 2px var(--gray_20);
    display: none;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 30px;
    justify-content: space-around;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    z-index: 10;
  }
  #app .myPage article.tweet_log.is_display .action_area ul,
  #app .chatPage article.tweet_log.is_display .action_area ul {
    display: -webkit-box;
    display: flex;
    margin-bottom: 0;
    -webkit-box-align: center;
            align-items: center;
    -webkit-align-items: center;
  }
  #app .myPage article.tweet_log.is_display .action_area ul.reactionbox:before,
  #app .chatPage article.tweet_log.is_display .action_area ul.reactionbox:before {
    content: "リアクション";
    color: #fff;
    font-size: 0.5625rem;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--gray_60);
    padding: 0px 5px;
    border-radius: 10px 0;
  }
  #app .myPage article.tweet_log.is_display .action_area li,
  #app .chatPage article.tweet_log.is_display .action_area li {
    margin: 0 3px;
    font-size: 2rem;
  }
  #app .myPage article.tweet_log.is_display .action_area .reactionbox,
  #app .chatPage article.tweet_log.is_display .action_area .reactionbox {
    padding: 15px 5px 0;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  #app .myPage article.tweet_log.is_display .action_area .reactionbox li,
  #app .chatPage article.tweet_log.is_display .action_area .reactionbox li {
    position: relative;
    max-width: 60px;
    padding: 0 15px;
    margin-bottom: 30px;
  }
  #app .myPage article.tweet_log.is_display .action_area .reactionbox .tip,
  #app .chatPage article.tweet_log.is_display .action_area .reactionbox .tip {
    display: inline-block;
    position: absolute;
    bottom: -100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: auto;
    -webkit-animation: none;
            animation: none;
  }
  #app .myPage article.tweet_log.is_display .action_area .reactionbox .tip .tip_inner,
  #app .chatPage article.tweet_log.is_display .action_area .reactionbox .tip .tip_inner {
    background-color: transparent;
    font-size: 0.6875rem;
    width: 60px;
    padding: 0;
  }
  #app .myPage article.tweet_log.is_display .action_area .reactionbox span,
  #app .chatPage article.tweet_log.is_display .action_area .reactionbox span {
    width: 35px;
    height: 30px;
    margin: 0 0 5px 0;
  }
  #app .myPage article.tweet_log.is_display .action_area .btn_reaction,
  #app .chatPage article.tweet_log.is_display .action_area .btn_reaction {
    padding: 0px 3px;
    font-size: 1.25rem;
    display: block;
    line-height: 30px;
    padding: 0;
    margin: 0px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    border: solid 1px #fff;
    background-color: var(--gray_60);
  }
  #app .myPage article.tweet_log.is_display .action_area .btn_reaction:after,
  #app .chatPage article.tweet_log.is_display .action_area .btn_reaction:after {
    content: "＋";
    font-weight: bold;
    font-size: 1.125rem;
    display: block;
  }
  #app .myPage article.tweet_log.is_display .action_area .btn_reaction i,
  #app .myPage article.tweet_log.is_display .action_area .btn_reaction svg,
  #app .chatPage article.tweet_log.is_display .action_area .btn_reaction i,
  #app .chatPage article.tweet_log.is_display .action_area .btn_reaction svg {
    display: none;
  }
  #app .myPage article.tweet_log.is_display .action_area .editbox,
  #app .chatPage article.tweet_log.is_display .action_area .editbox {
    flex-wrap: wrap;
    -webkit-box-pack: center;
            justify-content: center;
  }
  #app .myPage article.tweet_log.is_display .action_area .editbox li,
  #app .myPage article.tweet_log.is_display .action_area .editbox > a,
  #app .chatPage article.tweet_log.is_display .action_area .editbox li,
  #app .chatPage article.tweet_log.is_display .action_area .editbox > a {
    font-size: 1.25rem;
    padding: 0 5px;
    margin: 10px 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    -webkit-align-items: center;
    width: 33%;
    max-width: 95px;
    text-align: center;
    background-color: transparent;
    border: none;
    position: relative;
  }
  #app .myPage article.tweet_log.is_display .action_area .editbox > a li,
  #app .chatPage article.tweet_log.is_display .action_area .editbox > a li {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  #app .myPage article.tweet_log.is_display .action_area .editbox li:before,
  #app .chatPage article.tweet_log.is_display .action_area .editbox li:before {
    content: "";
    display: block;
    line-height: 50px;
    margin: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    border: solid 1px #fff;
    background-color: var(--gray_60);
    position: absolute;
    top: 0;
  }
  #app .myPage article.tweet_log.is_display .action_area .editbox i,
  #app .myPage article.tweet_log.is_display .action_area .editbox svg,
  #app .chatPage article.tweet_log.is_display .action_area .editbox i,
  #app .chatPage article.tweet_log.is_display .action_area .editbox svg {
    display: block;
    line-height: 50px;
    padding: 0;
    margin: 0px;
    width: 17px;
    height: 50px;
    color: #fff;
    fill: #fff;
    z-index: 1;
  }
  #app .myPage article.tweet_log.is_display .action_area .editbox svg.fa-bookmark,
  #app .chatPage article.tweet_log.is_display .action_area .editbox svg.fa-bookmark {
    width: 15px;
  }
  #app .myPage article.tweet_log.is_display .action_area .editbox .tip,
  #app .chatPage article.tweet_log.is_display .action_area .editbox .tip {
    display: block;
    width: 100%;
    line-height: 0;
    padding: 0;
    position: static;
    -webkit-animation: none;
            animation: none;
    margin-top: 8px;
  }
  #app .myPage article.tweet_log.is_display.is_showReaction .reaction_data .popover.is_reaction_user,
  #app .chatPage article.tweet_log.is_display.is_showReaction .reaction_data .popover.is_reaction_user {
    min-width: 90vw;
    position: fixed;
    bottom: 20px;
    left: 5vw;
    top: auto;
    z-index: 1 !important;
    padding: 5px 3px 0px 3px;
    box-shadow: 0 0 3px var(--gray_20);
    display: block;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .is_actList.btn,
  #app .chatPage article.tweet_log.is_display .reaction_data .is_actList.btn {
    padding-right: 10px;
    padding: 0px 8px 0 8px;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .is_actList.btn svg,
  #app .myPage article.tweet_log.is_display .reaction_data .is_actList.btn i,
  #app .chatPage article.tweet_log.is_display .reaction_data .is_actList.btn svg,
  #app .chatPage article.tweet_log.is_display .reaction_data .is_actList.btn i {
    font-size: 0.875rem;
    margin: 0 2px;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user {
    z-index: 30;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .arrow {
    display: none;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .reaction_tab,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .reaction_tab {
    overflow-x: auto;
    overflow-y: hidden;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .reaction_tab li,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .reaction_tab li {
    font-size: 0.75rem;
    margin: 0 5px;
    padding: 5px;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .reaction_tab li .fr-emoticon,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .reaction_tab li .fr-emoticon {
    width: 17px;
    height: 17px;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .user_list ul,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .user_list ul {
    height: 25vh;
    max-height: 25vh;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0 5px;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .user_list li,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .user_list li {
    margin: 7px 0;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .rounded-circle,
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .user_proficon,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .rounded-circle,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .user_proficon {
    width: 25px;
    height: 25px;
  }
  #app .myPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .username,
  #app .chatPage article.tweet_log.is_display .reaction_data .popover.is_reaction_user .username {
    font-size: 0.9375rem;
    max-width: 100%;
  }
  #app .myPage .bg_reaction,
  #app .chatPage .bg_reaction {
    display: none;
    z-index: 0;
    background-color: var(--gray_60_a);
    width: 100vw;
    height: 100vh;
    position: fixed;
  }
  #app .myPage .bg_reaction.is_show, #app .myPage .bg_reaction.is_showReaction,
  #app .chatPage .bg_reaction.is_show,
  #app .chatPage .bg_reaction.is_showReaction {
    display: block;
    -webkit-animation: anim_show_reaction 0.2s forwards;
            animation: anim_show_reaction 0.2s forwards;
    z-index: 1;
  }
}
#app .myPage .follow_box,
#app .chatPage .follow_box {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage .follow_box .btn_follow,
#app .chatPage .follow_box .btn_follow {
  align-self: start;
}
#app .myPage .btn_follow,
#app .chatPage .btn_follow {
  background-color: #fff;
  color: var(--blue_main);
  border: 1px solid var(--blue_main);
  min-width: 125px;
}
#app .myPage .btn_follow:hover,
#app .chatPage .btn_follow:hover {
  color: var(--blue_main);
}
#app .myPage .btn_follow i,
#app .myPage .btn_follow svg,
#app .chatPage .btn_follow i,
#app .chatPage .btn_follow svg {
  margin-right: 5px;
}
#app .myPage .btn_follow.is_done,
#app .chatPage .btn_follow.is_done {
  background-color: var(--blue_main);
  color: #fff;
}
#app .myPage .btn_follow::after,
#app .chatPage .btn_follow::after {
  content: "する";
}
#app .myPage .btn_follow.is_done::after,
#app .chatPage .btn_follow.is_done::after {
  content: "中";
}
#app .myPage .btn_follow:not(.is_done) .fa-user-check,
#app .myPage .btn_follow.is_done .fa-user-plus,
#app .chatPage .btn_follow:not(.is_done) .fa-user-check,
#app .chatPage .btn_follow.is_done .fa-user-plus {
  display: none;
}
#app .myPage .followed_text,
#app .chatPage .followed_text {
  color: var(--gray_40);
  font-size: 80%;
}
#app .myPage .follow_status,
#app .chatPage .follow_status {
  display: -webkit-box;
  display: flex;
}
#app .myPage .follow_status dd,
#app .chatPage .follow_status dd {
  margin-bottom: 0;
}
#app .myPage .follow_status .count,
#app .chatPage .follow_status .count {
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 3px;
}
#app .myPage .content_userprof .follow_status.is_secret span,
#app .chatPage .content_userprof .follow_status.is_secret span {
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  #app .myPage .btn_follow.is_done:hover::after,
  #app .chatPage .btn_follow.is_done:hover::after {
    content: "解除";
  }
}
@media screen and (max-width: 767px) {
  #app .myPage .follow_status,
  #app .chatPage .follow_status {
    font-size: 85%;
  }
  #app .myPage .follow_status .count,
  #app .chatPage .follow_status .count {
    font-size: 0.9375rem;
  }
}
#app .myPage .popover,
#app .chatPage .popover {
  max-width: 450px;
  width: 35vw;
}
#app .myPage .popover-header,
#app .chatPage .popover-header {
  background-color: #fff;
  font-weight: bold;
  font-size: 1rem;
  padding: 10px 15px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}
#app .myPage .popover.is_prof .popover-header,
#app .chatPage .popover.is_prof .popover-header {
  color: var(--navy_main);
  min-height: 85px;
}
#app .myPage .popover-header .user_status,
#app .chatPage .popover-header .user_status {
  display: block;
  font-size: 0.75rem;
  margin: 3px 0 0 5px;
}
#app .myPage .popover-header .user_status .status_icon,
#app .chatPage .popover-header .user_status .status_icon {
  width: 15px;
}
#app .myPage .popover-header .user_status:before,
#app .myPage .popover-header .user_status:after,
#app .chatPage .popover-header .user_status:before,
#app .chatPage .popover-header .user_status:after {
  display: none;
}
#app .myPage .popover .popover-body,
#app .chatPage .popover .popover-body {
  padding: 0;
}
#app .myPage .popover-body .btn_box,
#app .chatPage .popover-body .btn_box {
  display: -webkit-box;
  display: flex;
  justify-content: space-around;
  padding: 8px 10px;
  background-color: var(--gray_5);
  flex-wrap: wrap;
  border-radius: 0 0 0.5rem 0.5rem;
}
#app .myPage .popover-body .btn,
#app .chatPage .popover-body .btn {
  font-size: 0.875rem;
  padding: 5px 8px;
}
#app .myPage .popover-body .re_logarea,
#app .myPage .chatPage .popover-body .re_logarea,
#app .chatPage .popover-body .re_logarea,
#app .chatPage .chatPage .popover-body .re_logarea {
  max-height: 35vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.5rem 0.5rem 0 0;
}
#app .myPage .popover-body.content_chatlog.re_logarea,
#app .myPage .popover-body.content_chatlog.re_logarea,
#app .chatPage .popover-body.content_chatlog.re_logarea,
#app .chatPage .popover-body.content_chatlog.re_logarea {
  border: solid 1px var(--gray_5);
  border-radius: 4px;
  padding: 0;
  margin: 10px;
}
#app .myPage .popover-body.content_chatlog.re_logarea article > div,
#app .myPage .popover-body.content_chatlog.re_logarea article > div,
#app .chatPage .popover-body.content_chatlog.re_logarea article > div,
#app .chatPage .popover-body.content_chatlog.re_logarea article > div {
  border: none;
  background-color: #fff;
}
#app .myPage .popover-body .re_logarea .loading,
#app .chatPage .popover-body .re_logarea .loading {
  width: 100%;
}
#app .myPage .popover .icon_unicorn:after,
#app .chatPage .popover .icon_unicorn:after {
  content: "│";
  color: var(--gray_20);
  margin: 0 3px;
}
#app .myPage .popover .arrow,
#app .chatPage .popover .arrow {
  bottom: calc(-0.5rem - 1px);
}
#app .myPage .popover.is_prof,
#app .chatPage .popover.is_prof {
  display: none;
  position: fixed;
  top: auto;
  bottom: -100%;
  right: 20px;
  left: auto;
  max-width: none;
  width: 500px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 0px 10px var(--gray_20);
  cursor: default;
  z-index: 20100;
}
#app .myPage .popover.is_prof.is_show,
#app .chatPage .popover.is_prof.is_show {
  display: block;
}
#app .myPage .popover.is_prof.is_show:not(.is_profUnder),
#app .chatPage .popover.is_prof.is_show:not(.is_profUnder) {
  -webkit-animation: popoverProfUpin forwards 0.5s 0s normal;
          animation: popoverProfUpin forwards 0.5s 0s normal;
}
@-webkit-keyframes popoverProfUpin {
  0% {
    bottom: -100%;
  }
  80% {
    bottom: 10px;
  }
  95% {
    bottom: 10px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes popoverProfUpin {
  0% {
    bottom: -100%;
  }
  80% {
    bottom: 10px;
  }
  95% {
    bottom: 10px;
  }
  100% {
    bottom: 0px;
  }
}
#app .myPage .popover.is_prof .arrow,
#app .chatPage .popover.is_prof .arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  top: -8px;
  left: 5px;
}
#app .myPage .popover.is_prof:not(.is_profUnder) .arrow,
#app .chatPage .popover.is_prof:not(.is_profUnder) .arrow {
  display: none;
}
#app .myPage .popover:not(.is_calendar) .arrow::before,
#app .chatPage .popover:not(.is_calendar) .arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: var(--gray_20);
}
#app .myPage .popover:not(.is_calendar) .arrow::after,
#app .chatPage .popover:not(.is_calendar) .arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}
#app .myPage .popover.is_prof.bs-popover-top,
#app .myPage .popover.is_prof.bs-popover-bottom,
#app .chatPage .popover.is_prof.bs-popover-top,
#app .chatPage .popover.is_prof.bs-popover-bottom {
  margin-bottom: 0;
}
#app .myPage .popover.is_prof .popover-header,
#app .chatPage .popover.is_prof .popover-header {
  position: relative;
  font-weight: bold;
  font-size: 1rem;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  border-radius: 20px 20px 0 0;
  padding: 15px 15px 0 95px;
  color: var(--navy_main);
  border-bottom: none;
}
@media screen and (min-width: 768px) {
  #app .myPage .popover.is_prof .popover-header,
  #app .chatPage .popover.is_prof .popover-header {
    padding: 20px 15px 0 105px;
  }
}
#app .myPage .popover.is_prof .user_img,
#app .chatPage .popover.is_prof .user_img {
  display: block;
  position: absolute;
  left: 15px;
}
#app .myPage .popover.is_prof .user_img.is_unicorn .border_gradient,
#app .chatPage .popover.is_prof .user_img.is_unicorn .border_gradient {
  background: -webkit-linear-gradient(left top, #d274fc, #7057fa);
  background: linear-gradient(to right bottom, #d274fc, #7057fa);
  border-radius: 50%;
  width: 84px;
  height: 84px;
  padding: 2px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #app .myPage .popover.is_prof .user_img.is_unicorn .border_gradient,
  #app .chatPage .popover.is_prof .user_img.is_unicorn .border_gradient {
    width: 74px;
    height: 74px;
  }
}
#app .myPage .popover.is_prof .user_img img,
#app .chatPage .popover.is_prof .user_img img {
  width: 70px;
  height: 70px;
  -o-object-fit: cover;
     object-fit: cover;
  border: solid 1px var(--gray_10);
}
@media screen and (min-width: 768px) {
  #app .myPage .popover.is_prof .user_img img,
  #app .chatPage .popover.is_prof .user_img img {
    width: 80px;
    height: 80px;
  }
}
#app .myPage .popover.is_prof .user_name,
#app .chatPage .popover.is_prof .user_name {
  width: calc(100% - 30px);
  font-size: 0.9375rem;
  line-height: 1.6em;
}
@media screen and (min-width: 768px) {
  #app .myPage .popover.is_prof:not(.is_profUnder) .user_name,
  #app .chatPage .popover.is_prof:not(.is_profUnder) .user_name {
    font-size: 18px;
    line-height: 1.4;
  }
}
#app .myPage .popover.is_prof .user_prof,
#app .chatPage .popover.is_prof .user_prof {
  display: -webkit-box;
  display: flex;
  width: 100%;
  font-size: 11px;
  font-weight: normal;
  margin: 5px 0;
}
#app .myPage .popover.is_prof .user_prof li,
#app .chatPage .popover.is_prof .user_prof li {
  padding: 0 8px;
  border-right: solid 1px var(--gray_20);
  margin: 3px 0;
}
#app .myPage .popover.is_prof .user_prof li:first-of-type,
#app .chatPage .popover.is_prof .user_prof li:first-of-type {
  padding-left: 0;
}
#app .myPage .popover.is_prof .user_prof li:last-of-type,
#app .chatPage .popover.is_prof .user_prof li:last-of-type {
  padding-right: 0;
  border: 0;
}
#app .myPage .popover.is_prof .user_statusWrap,
#app .chatPage .popover.is_prof .user_statusWrap {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
          align-items: flex-start;
  width: 100%;
  flex-wrap: wrap;
}
#app .myPage .popover.is_prof .user_statusWrap .user_status,
#app .chatPage .popover.is_prof .user_statusWrap .user_status {
  font-size: 0.75rem;
  margin-right: auto;
  margin-left: 0;
  word-break: break-all;
}
#app .myPage .popover.is_prof .user_statusWrap .button,
#app .myPage .popover.is_prof .user_statusWrap .btn_unicorn,
#app .chatPage .popover.is_prof .user_statusWrap .button,
#app .chatPage .popover.is_prof .user_statusWrap .btn_unicorn {
  font-size: 0.75rem;
  border: 1px solid var(--gray_60);
  padding: 5px 10px;
  margin-left: 3px;
  min-width: 75px;
  border-radius: 5px;
  background-color: #fff;
  color: var(--blue_main);
  margin-left: auto;
}
#app .myPage .popover.is_prof .popover-header .user_statusWrap .button,
#app .chatPage .popover.is_prof .popover-header .user_statusWrap .button {
  padding: 7px 10px;
  margin-top: 0px;
}
#app .myPage .popover.is_prof .popover-header .user_statusWrap .button:hover,
#app .chatPage .popover.is_prof .popover-header .user_statusWrap .button:hover {
  text-decoration: none;
}
#app .myPage .popover.is_prof .user_statusWrap .button:after,
#app .myPage .popover.is_prof .user_statusWrap .btn_unicorn:after,
#app .chatPage .popover.is_prof .user_statusWrap .button:after,
#app .chatPage .popover.is_prof .user_statusWrap .btn_unicorn:after {
  content: "を渡す";
  font-weight: bold;
}
#app .myPage .popover.is_prof .user_statusWrap .button:disabled,
#app .myPage .popover.is_prof .user_statusWrap .btn_unicorn:disabled,
#app .myPage .popover.is_prof .user_statusWrap .button:disabled:hover,
#app .myPage .popover.is_prof .user_statusWrap .btn_unicorn:disabled:hover,
#app .chatPage .popover.is_prof .user_statusWrap .button:disabled,
#app .chatPage .popover.is_prof .user_statusWrap .btn_unicorn:disabled,
#app .chatPage .popover.is_prof .user_statusWrap .button:disabled:hover,
#app .chatPage .popover.is_prof .user_statusWrap .btn_unicorn:disabled:hover {
  opacity: 0.8;
  pointer-events: none;
  background-color: var(--gray_5);
}
#app .myPage .popover.is_prof .user_statusWrap .button:disabled:after,
#app .myPage .popover.is_prof .user_statusWrap .btn_unicorn:disabled:after,
#app .chatPage .popover.is_prof .user_statusWrap .button:disabled:after,
#app .chatPage .popover.is_prof .user_statusWrap .btn_unicorn:disabled:after {
  content: "は旅立ちました";
  font-weight: normal;
  color: var(--text_main);
}
#app .myPage .popover.is_prof .user_statusWrap .btn_unicorn .unicorn_icon,
#app .chatPage .popover.is_prof .user_statusWrap .btn_unicorn .unicorn_icon {
  vertical-align: -1px;
}
#app .myPage .popover.is_prof .user_statusWrap .user_enrolled_period,
#app .chatPage .popover.is_prof .user_statusWrap .user_enrolled_period {
  font-size: 10px;
  display: inline-block;
}
#app .myPage .popover.is_prof .popover-header .popover_closeBtnSP,
#app .chatPage .popover.is_prof .popover-header .popover_closeBtnSP {
  position: absolute;
  top: 0px;
  right: 0px;
  color: var(--gray_20);
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  font-size: 20px;
  line-height: 0;
  margin: 0;
  cursor: pointer;
}
#app .myPage .popover.is_prof .popover-body,
#app .chatPage .popover.is_prof .popover-body {
  font-size: 1rem;
  padding: 15px 20px;
}
#app .myPage .popover.is_prof .popover-body .is_follow,
#app .chatPage .popover.is_prof .popover-body .is_follow {
  color: var(--gray_40);
  font-size: 11px;
}
#app .myPage .popover.is_prof .popover-body .is_follow i,
#app .myPage .popover.is_prof .popover-body .is_follow svg,
#app .chatPage .popover.is_prof .popover-body .is_follow i,
#app .chatPage .popover.is_prof .popover-body .is_follow svg {
  padding-right: 5px;
}
#app .myPage .popover.is_prof .popover-body .user_btnWrap,
#app .chatPage .popover.is_prof .popover-body .user_btnWrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
}
#app .myPage .popover.is_prof .popover-body .user_btnWrap .btn,
#app .chatPage .popover.is_prof .popover-body .user_btnWrap .btn {
  width: 49%;
  margin: 0;
  padding: 9px 8px;
  font-size: 14px;
  font-weight: bold;
}
#app .myPage .popover.is_prof .popover-body .user_btnWrap .btn i,
#app .myPage #main_contents .popover-body .user_btnWrap .btn svg,
#app .chatPage .popover.is_prof .popover-body .user_btnWrap .btn i,
#app .chatPage #main_contents .popover-body .user_btnWrap .btn svg {
  margin-right: 5px;
}
#app .myPage .popover.is_prof .popover-body .user_btnWrap .btn.btn_follow,
#app .chatPage .popover.is_prof .popover-body .user_btnWrap .btn.btn_follow {
  border: 1px solid var(--blue_main);
  background-color: #fff;
  color: var(--blue_main);
}
#app .myPage .popover.is_prof .popover-body .user_btnWrap .btn.btn_follow.is_done,
#app .chatPage .popover.is_prof .popover-body .user_btnWrap .btn.btn_follow.is_done {
  border: 1px solid var(--blue_main);
  background-color: var(--blue_main);
  color: #fff;
}
#app .myPage .popover.is_prof .popover-body .user_btnWrap .btn.disabled,
#app .chatPage .popover.is_prof .popover-body .user_btnWrap .btn.disabled {
  cursor: no-drop;
}
#app .myPage .popover.is_prof .popover-body .is_beginner,
#app .chatPage .popover.is_prof .popover-body .is_beginner {
  color: var(--gray_40);
  font-size: 11px;
  margin-top: -2px;
}
#app .myPage .popover.is_prof .popover-body .user_proftext,
#app .chatPage .popover.is_prof .popover-body .user_proftext {
  border-top: 1px solid var(--gray_20);
  padding-top: 7px;
  margin-bottom: 5px;
  font-size: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
#app .myPage .popover.is_prof .popover-body .user_proflink,
#app .chatPage .popover.is_prof .popover-body .user_proflink {
  margin-bottom: 0;
  text-align: right;
  font-size: 12px;
}
#app .myPage .popover.is_prof .popover-body .user_proflink .log_link::after,
#app .chatPage .popover.is_prof .popover-body .user_proflink .log_link::after {
  content: ">";
  display: inline-block;
  margin-left: 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .popover.is_prof,
  #app .chatPage .popover.is_prof {
    width: auto;
    min-width: auto;
    max-width: none;
    width: 100%;
    position: fixed !important;
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
    border: none;
  }
  #app .myPage .popover.is_prof .popover-body .user_proflink,
  #app .chatPage .popover.is_prof .popover-body .user_proflink {
    font-size: 14px;
  }
}
#app .myPage .popover.is_prof.is_profUnder,
#app .chatPage .popover.is_prof.is_profUnder {
  display: none;
  position: absolute;
  left: -5px;
  top: 30px;
  bottom: auto;
  width: 360px;
  border-radius: 8px;
  box-shadow: 1px 1px 5px var(--gray_10);
}
#app .myPage .popover.is_prof.is_profUnder.is_show,
#app .chatPage .popover.is_prof.is_profUnder.is_show {
  display: block;
}
#app .myPage .popover.is_prof.is_profUnder .arrow,
#app .chatPage .popover.is_prof.is_profUnder .arrow {
  display: block;
}
#app .myPage .popover.is_prof.is_profUnder .popover-header,
#app .chatPage .popover.is_prof.is_profUnder .popover-header {
  padding: 15px 15px 0;
}
#app .myPage .popover.is_prof.is_profUnder .popover-header .popover_closeBtnSP,
#app .chatPage .popover.is_prof.is_profUnder .popover-header .popover_closeBtnSP {
  display: none;
}
#app .myPage .popover.is_prof.is_profUnder .popover-body,
#app .chatPage .popover.is_prof.is_profUnder .popover-body {
  padding: 10px 15px;
}
#app .myPage .popover.is_prof.is_profUnder .user_img,
#app .chatPage .popover.is_prof.is_profUnder .user_img {
  display: none;
}
#app .myPage .popover.is_prof.is_profUnder .user_btnWrap .btn,
#app .chatPage .popover.is_prof.is_profUnder .user_btnWrap .btn {
  padding: 5px 8px;
}
#app .myPage .popover.is_prof.is_profUnder .user_proftext,
#app .chatPage .popover.is_prof.is_profUnder .user_proftext {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 767px) {
  #app .myPage .popover.is_prof.is_profUnder,
  #app .chatPage .popover.is_prof.is_profUnder {
    top: auto;
    left: auto;
    right: auto;
    bottom: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    box-shadow: 0px -5px 10px var(--gray_20);
  }
  #app .myPage .popover.is_prof.is_profUnder .arrow,
  #app .chatPage .popover.is_prof.is_profUnder .arrow {
    display: none;
  }
  #app .myPage .popover.is_prof.is_profUnder .popover-header,
  #app .chatPage .popover.is_prof.is_profUnder .popover-header {
    border-radius: 20px 20px 0 0;
    padding-left: 90px;
  }
  #app .myPage .popover.is_prof.is_profUnder .popover-header .popover_closeBtnSP,
  #app .chatPage .popover.is_prof.is_profUnder .popover-header .popover_closeBtnSP {
    display: -webkit-box;
    display: flex;
  }
  #app .myPage .popover.is_prof.is_profUnder .user_img,
  #app .chatPage .popover.is_prof.is_profUnder .user_img {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage .popover:not(.is_prof),
  #app .chatPage .popover:not(.is_prof) {
    z-index: 0;
    width: 80vw;
    max-width: 80vw;
  }
  #app .myPage .popover:not(.is_prof),
  #app .chatPage .popover:not(.is_prof) {
    z-index: 99999;
  }
  #app .myPage .popover-body .re_logarea,
  #app .chatPage .popover-body .re_logarea {
    max-height: 40vh;
  }
  #app .myPage .popover:not(.is_prof, .is_can) > .arrow,
  #app .chatPage .popover:not(.is_prof, .is_can) > .arrow {
    left: 7vw !important;
  }
}
#app .myPage .popover.is_can,
#app .chatPage .popover.is_can {
  border: none;
  -webkit-filter: drop-shadow(0px 0px 4px var(--gray_20));
          filter: drop-shadow(0px 0px 4px var(--gray_20));
  width: 100vw;
  max-width: 500px;
  border: none;
  background-color: transparent;
  z-index: 11100;
}
#app .myPage .popover.is_can .popover-arrow::before,
#app .chatPage .popover.is_can .popover-arrow::before {
  border: none;
}
@media screen and (max-width: 1200px) {
  #app .myPage .popover.is_can,
  #app .chatPage .popover.is_can {
    max-width: 400px;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage .popover.is_can,
  #app .chatPage .popover.is_can {
    max-width: 100vw;
    padding: 0 15px;
  }
}
#app .myPage .popover-body .btn_box .btn-group,
#app .chatPage .popover-body .btn_box .btn-group {
  margin: 2px 0;
  min-width: 95%;
}
#app .myPage .popover-body .btn_box .btn_unicorn,
#app .chatPage .popover-body .btn_box .btn_unicorn {
  margin: 5px;
}
#app .myPage .popover-body .btn_box .btn_unicorn:disabled,
#app .myPage .popover-body .btn_box .btn_unicorn.disabled,
#app .chatPage .popover-body .btn_box .btn_unicorn:disabled,
#app .chatPage .popover-body .btn_box .btn_unicorn.disabled {
  display: none;
}
@media screen and (max-width: 1000px) {
  #app .myPage .popover-body .btn_box .btn_unicorn,
  #app .chatPage .popover-body .btn_box .btn_unicorn {
    display: inline-block;
    margin-top: 0.5rem;
  }
}
#app .myPage .popover-body,
#app .chatPage .popover-body {
  position: relative;
}
#app .myPage .popover-body .userTweetWrap,
#app .chatPage .popover-body .userTweetWrap {
  margin: 0 0 10px;
  padding: 3px 10px 2px;
  height: 2em;
}
#app .myPage .popover-body .userTweetWrap .userTweet,
#app .chatPage .popover-body .userTweetWrap .userTweet {
  font-size: 13px;
  font-weight: normal;
}
#app .myPage .popover-body .userTweetWrap + .toUserTweetList,
#app .chatPage .popover-body .userTweetWrap + .toUserTweetList {
  top: 15px;
  right: 15px;
  width: 27px;
  height: 27px;
  font-size: 12px;
  padding-top: 1px;
}
#app .myPage .is_profUnder .popover-body .userTweetWrap + .toUserTweetList,
#app .chatPage .is_profUnder .popover-body .userTweetWrap + .toUserTweetList {
  top: 10px;
}
#app .myPage .popover-body .userTweetWrap + .toUserTweetList i:before,
#app .myPage .popover-body .userTweetWrap + .toUserTweetList svg:before,
#app .chatPage .popover-body .userTweetWrap + .toUserTweetList i:before,
#app .chatPage .popover-body .userTweetWrap + .toUserTweetList svg:before {
  color: #fff;
}
#app .myPage .popover-body .userTweetWrap + .toUserTweetList .tip,
#app .chatPage .popover-body .userTweetWrap + .toUserTweetList .tip {
  left: -77px;
}
@media screen and (min-width: 768px) {
  #app .myPage .popover.is_prof:not(.is_profUnder) .toUserTweetList .tip,
  #app .chatPage .popover.is_prof:not(.is_profUnder) .toUserTweetList .tip {
    left: -133px;
  }
  #app .myPage .popover.is_prof:not(.is_profUnder) .toUserTweetList .tip .tip_inner:after,
  #app .chatPage .popover.is_prof:not(.is_profUnder) .toUserTweetList .tip .tip_inner:after {
    text-align: right;
  }
}
#app .myPage .document_title,
#app .chatPage .document_title {
  line-height: 24px;
  font-size: 1rem;
  font-weight: bold;
  padding: 10px;
}
#app .myPage .content_document,
#app .chatPage .content_document {
  background-color: #fff;
  padding: 30px;
  box-shadow: 1px 1px 3px var(--gray_10);
  counter-reset: number_section 0;
}
#app .myPage .content_document p,
#app .chatPage .content_document p {
  font-size: 0.875rem;
  line-height: 1.4rem;
}
#app .myPage .content_document h3,
#app .chatPage .content_document h3 {
  font-size: 1.25rem;
  margin-top: 30px;
  margin-bottom: 10px;
  font-weight: bold;
}
#app .myPage .content_document h3 + p,
#app .chatPage .content_document h3 + p {
  margin-left: 15px;
}
#app .myPage .content_document h3 + p + .doc_list,
#app .chatPage .content_document h3 + p + .doc_list {
  margin-left: 30px;
}
#app .myPage .content_document h3:before,
#app .chatPage .content_document h3:before {
  counter-increment: number_section 1;
  content: counter(number_section) ".";
  margin-right: 5px;
}
#app .myPage .content_document.is_rule h3:before,
#app .chatPage .content_document.is_rule h3:before {
  counter-increment: number_section 1;
  content: "第" counter(number_section) "条";
  margin-right: 10px;
}
#app .myPage .content_document .doc_list,
#app .chatPage .content_document .doc_list {
  counter-reset: number 0;
  margin-left: 15px;
}
#app .myPage .content_document .doc_list .doc_list,
#app .chatPage .content_document .doc_list .doc_list {
  margin-top: 10px;
  margin-bottom: 20px;
}
#app .myPage .content_document .doc_list li,
#app .chatPage .content_document .doc_list li {
  padding-left: 1em;
  margin-bottom: 10px;
  font-size: 0.875rem;
  line-height: 1.4rem;
}
#app .myPage .content_document .doc_list li .doc_text,
#app .chatPage .content_document .doc_list li .doc_text {
  display: block;
  margin-top: 10px;
}
#app .myPage .content_document .doc_list:not(.only_num) > li:before,
#app .chatPage .content_document .doc_list:not(.only_num) > li:before {
  counter-increment: number 1;
  content: "(" counter(number) ")";
  margin-left: -1.9em;
  margin-right: 5px;
}
#app .myPage .content_document .doc_list li:nth-child(n+10):before,
#app .chatPage .content_document .doc_list li:nth-child(n+10):before {
  margin-left: -2.5em;
}
#app .myPage .content_document .doc_list.only_num > li:before,
#app .chatPage .content_document .doc_list.only_num > li:before {
  counter-increment: number 1;
  content: counter(number) ".";
  margin-left: -1.2em;
  margin-right: 5px;
}
#app .myPage .modal-body .guidance_box,
#app .chatPage .modal-body .guidance_box {
  min-height: 170px;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-image: url(dec_homeicon.png);
  background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
}
#app .myPage .modal-body .is_sp,
#app .chatPage .modal-body .is_sp {
  background-size: auto 65%;
}
#app .myPage .modal-body .is_pc,
#app .chatPage .modal-body .is_pc {
  background-size: auto 95%;
}
#app .myPage .modal-body .guidance_box h6,
#app .chatPage .modal-body .guidance_box h6 {
  font-weight: bold;
  line-height: 1.8rem;
}
#app .myPage .modal-body .guidance_box .inner,
#app .chatPage .modal-body .guidance_box .inner {
  padding-right: 50px;
  padding-bottom: 10px;
}
#app .myPage .iframe_wrap,
#app .chatPage .iframe_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#app .myPage .iframe_wrap iframe,
#app .chatPage .iframe_wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  #app .myPage .modal-body .guidance_box .inner,
  #app .chatPage .modal-body .guidance_box .inner {
    padding-right: 0;
    padding-bottom: 0;
  }
  #app .myPage .modal-body .guidance_box,
  #app .chatPage .modal-body .guidance_box {
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 320px) {
  #app .myPage .modal-body .is_sp,
  #app .chatPage .modal-body .is_sp {
    background-image: none;
  }
}
#app .myPage .modal-body .guidance_box li,
#app .chatPage .modal-body .guidance_box li {
  margin: 8px 0;
}
#app .myPage .modal-body .guidance_box a i,
#app .myPage .modal-body .guidance_box a svg,
#app .chatPage .modal-body .guidance_box a i,
#app .chatPage .modal-body .guidance_box a svg {
  margin: 0 5px;
}
#app .myPage .modal-footer .btn_faq i,
#app .myPage .modal-footer .btn_faq svg,
#app .chatPage .modal-footer .btn_faq i,
#app .chatPage .modal-footer .btn_faq svg {
  margin: 0 5px;
  color: #fff;
  fill: #fff;
}
#app .myPage .icon_safariMenu,
#app .chatPage .icon_safariMenu {
  position: relative;
  width: 12px;
  height: 12px;
  text-align: center;
  border: solid 1px var(--text_main);
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px;
}
#app .myPage .icon_safariMenu:after,
#app .chatPage .icon_safariMenu:after {
  content: "↑";
  position: absolute;
  left: -2px;
  bottom: -1px;
}
#app .myPage .icon_androidMenu,
#app .chatPage .icon_androidMenu {
  margin: 0 3px;
  color: var(--gray_40);
}
#app .myPage .searchHeading,
#app .chatPage .searchHeading {
  font-size: 24px;
  font-weight: bold;
  width: 100%;
  margin: 0 auto 20px;
  color: var(--navy_main);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-align-items: center;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchHeading,
  #app .chatPage .searchHeading {
    flex-wrap: wrap;
    margin-left: 0;
    font-size: 22px;
    width: 100%;
  }
}
#app .myPage .searchHeading .subText,
#app .chatPage .searchHeading .subText {
  font-size: 12px;
  font-weight: normal;
  white-space: nowrap;
}
#app .myPage .searchHeading .subText .num,
#app .chatPage .searchHeading .subText .num {
  display: inline-block;
  margin-left: 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchHeading .subText.filter,
  #app .chatPage .searchHeading .subText.filter {
    font-size: 70%;
    margin-left: 5px;
  }
  #app .myPage .searchHeading .subText:not(.filter),
  #app .chatPage .searchHeading .subText:not(.filter) {
    margin-top: 10px;
  }
  #app .myPage .mypage_main_col .searchHeading .subText,
  #app .chatPage .mypage_main_col .searchHeading .subText {
    display: none;
  }
}
#app .myPage .searchSubHeading,
#app .chatPage .searchSubHeading {
  font-size: 18px;
  font-weight: bold;
  color: var(--navy_main);
  margin-bottom: 16px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchSubHeading,
  #app .chatPage .searchSubHeading {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: start;
            align-items: flex-start;
    row-gap: 5px;
  }
}
#app .myPage .searchSubHeading .subText,
#app .chatPage .searchSubHeading .subText {
  font-size: 12px;
  font-weight: normal;
  margin-left: 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchSubHeading .subText,
  #app .chatPage .searchSubHeading .subText {
    margin-left: 0;
  }
}
#app .myPage .content_userprofile > .subText,
#app .chatPage .content_userprofile > .subText {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
  font-weight: normal;
  margin-left: auto;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  #app .myPage .content_userprofile > .subText,
  #app .chatPage .content_userprofile > .subText {
    display: none;
  }
}
#app .myPage .content_eventInfoToday > .subText,
#app .chatPage .content_eventInfoToday > .subText {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 15px;
  font-weight: normal;
  margin-left: auto;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  #app .myPage .content_eventInfoToday > .subText,
  #app .chatPage .content_eventInfoToday > .subText {
    display: none;
  }
}
#app .myPage .searchResultListWrap,
#app .chatPage .searchResultListWrap {
  position: relative;
}
#app .myPage .searchResultListWrap .searchResultList,
#app .chatPage .searchResultListWrap .searchResultList {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
          align-items: flex-start;
  gap: 10px 20px;
  width: 100%;
  flex-wrap: nowrap;
  margin: 10px 0 40px;
  padding-bottom: 10px;
  overflow-x: scroll;
  padding-right: 50px;
  min-height: auto;
  scrollbar-width: none;
  cursor: grab;
  overflow-x: scroll;
}
@media screen and (min-width: 768px) {
  #app .myPage .searchResultListWrap .searchResultList,
  #app .chatPage .searchResultListWrap .searchResultList {
    padding-right: 90px;
  }
}
#app .myPage .searchResultListWrap .searchResultList::-webkit-scrollbar,
#app .chatPage .searchResultListWrap .searchResultList::-webkit-scrollbar {
  height: 10px;
}
#app .myPage .searchResultListWrap .searchResultList::-webkit-scrollbar-thumb,
#app .chatPage .searchResultListWrap .searchResultList::-webkit-scrollbar-thumb {
  border-radius: 10px;
}
#app .myPage .searchAllWrap .content_userProfileListWrap .alert.is_result + .searchResultListOverLayer,
#app .chatPage .searchAllWrap .content_userProfileListWrap .alert.is_result + .searchResultListOverLayer {
  display: none;
}
#app .myPage .subText i,
#app .myPage .subText svg,
#app .chatPage .subText i,
#app .chatPage .subText svg {
  margin-left: 8px;
}
#app .myPage .searchResultListWrap .btn_searchChat,
#app .chatPage .searchResultListWrap .btn_searchChat {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: -moz-fit-content; /* Firefox */
  width: -webkit-fit-content;
  width: fit-content; /* other browsers */
  margin: 40px auto;
  padding: 10px 30px;
}
#app .myPage .searchResultList .chatItem,
#app .chatPage .searchResultList .chatItem {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 22%;
  min-width: 200px;
  max-width: 270px;
  padding: 20px 20px 65px;
  border: 1px solid var(--gray_20);
  border-radius: 3px;
  background-color: #fff;
  align-self: stretch;
}
#app .myPage .searchResultList .chatItem .icon_lc:before,
#app .myPage .searchResultList .chatItem .icon_off:before,
#app .chatPage .searchResultList .chatItem .icon_lc:before,
#app .chatPage .searchResultList .chatItem .icon_off:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 45px 45px 0 0;
  border-color: #82f1ec transparent transparent transparent;
}
#app .myPage .searchResultList .chatItem .icon_off:before,
#app .chatPage .searchResultList .chatItem .icon_off:before {
  border-color: var(--orange_main) transparent transparent transparent;
}
#app .myPage .searchResultList .chatItem .icon_lc:after,
#app .myPage .searchResultList .chatItem .icon_off:after,
#app .chatPage .searchResultList .chatItem .icon_lc:after,
#app .chatPage .searchResultList .chatItem .icon_off:after {
  position: absolute;
  content: "公式";
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
  display: block;
  font-size: 13px;
  white-space: pre;
  color: var(--gray_80);
  top: 5px;
  left: 2px;
}
#app .myPage .searchResultList .chatItem .icon_off:after,
#app .chatPage .searchResultList .chatItem .icon_off:after {
  content: "オフ会";
  color: #fff;
  font-size: 12px;
  top: 7px;
  left: -1px;
}
#app .myPage .searchResultList .chatItem .icon_participation,
#app .chatPage .searchResultList .chatItem .icon_participation {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  font-size: 10px;
  text-align: center;
  color: #fff;
  background-color: #174958;
  border-radius: 0 2px 0 0;
}
#app .myPage .searchResultList .chatItem.is_joined .icon_participation,
#app .chatPage .searchResultList .chatItem.is_joined .icon_participation {
  background-color: #6b7688;
}
#app .myPage .searchResultList .chatItem .chatTitle_wrap,
#app .chatPage .searchResultList .chatItem .chatTitle_wrap {
  position: relative;
}
#app .myPage .searchResultList .chatItem .chatTitle_wrap .icon_wrap,
#app .chatPage .searchResultList .chatItem .chatTitle_wrap .icon_wrap {
  position: absolute;
  top: 0;
  font-size: 0;
}
#app .myPage .searchResultList .chatItem .icon_new,
#app .myPage .searchResultList .chatItem .icon_accepting,
#app .chatPage .searchResultList .chatItem .icon_new,
#app .chatPage .searchResultList .chatItem .icon_accepting {
  color: var(--orange_main);
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  margin-right: 6px;
}
#app .myPage .searchResultList .chatItem .chatMainImg,
#app .chatPage .searchResultList .chatItem .chatMainImg {
  width: 100px;
  margin: 0 auto;
  position: relative;
}
#app .myPage .searchResultList .chatItem .chatMainImg img,
#app .chatPage .searchResultList .chatItem .chatMainImg img {
  width: 100px;
  height: 100px;
}
#app .myPage .searchResultList .chatItem .chatMainImg .cover,
#app .myPage .searchResultList .chatItem.is_before .chatMainImg .text_close,
#app .myPage .searchResultList .chatItem.is_close .chatMainImg .text_before,
#app .chatPage .searchResultList .chatItem .chatMainImg .cover,
#app .chatPage .searchResultList .chatItem.is_before .chatMainImg .text_close,
#app .chatPage .searchResultList .chatItem.is_close .chatMainImg .text_before {
  display: none;
}
#app .myPage .searchResultList .chatItem.is_before .chatMainImg .cover,
#app .myPage .searchResultList .chatItem.is_close .chatMainImg .cover,
#app .chatPage .searchResultList .chatItem.is_before .chatMainImg .cover,
#app .chatPage .searchResultList .chatItem.is_close .chatMainImg .cover {
  position: absolute;
  display: block;
  top: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(112, 112, 112, 0.8);
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage .searchResultList .chatItem .chatTitle,
#app .chatPage .searchResultList .chatItem .chatTitle {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  height: 4.1em;
  padding-top: 1.3em;
  margin-bottom: 10px;
  overflow: hidden;
}
#app .myPage .searchResultList .chatItem .chatExpository,
#app .chatPage .searchResultList .chatItem .chatExpository {
  overflow: hidden;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
#app .myPage .searchResultList .chatItem .tagList,
#app .chatPage .searchResultList .chatItem .tagList {
  overflow: hidden;
  max-height: 58px;
  min-height: 30px;
  gap: 0 5px;
}
#app .myPage .searchResultList .chatItem .tagList .tagItems,
#app .chatPage .searchResultList .chatItem .tagList .tagItems {
  margin-bottom: 5px;
}
#app .myPage .searchResultList .chatItem .btn_migrate,
#app .chatPage .searchResultList .chatItem .btn_migrate {
  position: absolute;
  left: 15px;
  bottom: 15px;
  width: calc(100% - 30px);
}
#app .myPage .searchResultList .chatItem .fav,
#app .chatPage .searchResultList .chatItem .fav {
  border: 1px solid var(--blue_main);
  color: var(--blue_main);
  width: 50px;
  position: absolute;
  bottom: 15px;
  left: 15px;
}
#app .myPage .searchResultList .chatItem .fav i,
#app .chatPage .searchResultList .chatItem .fav i {
  font-weight: 400;
}
#app .myPage .searchResultList .chatItem .fav svg,
#app .chatPage .searchResultList .chatItem .fav svg {
  background: var(--blue_main);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg class="svg-inline--fa fa-heart" aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"></path></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg class="svg-inline--fa fa-heart" aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"></path></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchResultList .chatItem .fav,
  #app .chatPage .searchResultList .chatItem .fav {
    width: 40px;
    left: 10px;
    padding-inline: 5px;
    text-align: center;
  }
}
#app .myPage .searchResultList .chatItem .fav .tip,
#app .chatPage .searchResultList .chatItem .fav .tip {
  bottom: -32%;
  left: -76px;
}
#app .myPage .searchResultList .chatItem .fav.is_active i,
#app .chatPage .searchResultList .chatItem .fav.is_active i {
  font-weight: 900;
}
#app .myPage .searchResultList .chatItem .fav.is_active svg,
#app .chatPage .searchResultList .chatItem .fav.is_active svg {
  background: initial;
  -webkit-mask-image: initial;
          mask-image: initial;
}
@media screen and (min-width: 768px) {
  #app .myPage .searchResultList .chatItem .fav:not(.is_active):hover .tip:not(.is_active),
  #app .chatPage .searchResultList .chatItem .fav:not(.is_active):hover .tip:not(.is_active) {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage .searchResultList .chatItem .fav.is_active:hover .tip.is_active,
  #app .chatPage .searchResultList .chatItem .fav.is_active:hover .tip.is_active {
    display: block;
  }
}
#app .myPage .searchResultList .chatItem .fav + .btn_migrate,
#app .chatPage .searchResultList .chatItem .fav + .btn_migrate {
  width: calc(100% - 90px);
  left: initial;
  right: 15px;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchResultList .chatItem .fav + .btn_migrate,
  #app .chatPage .searchResultList .chatItem .fav + .btn_migrate {
    width: calc(100% - 65px);
    right: 10px;
    padding-inline: 5px;
  }
}
#app .myPage .searchResultList .chatItem .btn_migrate:hover,
#app .chatPage .searchResultList .chatItem .btn_migrate:hover {
  text-decoration: none;
}
#app .myPage .searchResultList .chatItem.is_joined .btn_migrate,
#app .chatPage .searchResultList .chatItem.is_joined .btn_migrate {
  color: var(--gray_50);
  border: 1px solid var(--gray_50);
}
@media screen and (max-width: 767px) {
  #app .myPage .content_main .chatResultArea,
  #app .chatPage .content_main .chatResultArea {
    margin: 10px 0 0;
  }
  #app .myPage .searchResultListWrap .searchResultList,
  #app .chatPage .searchResultListWrap .searchResultList {
    width: auto;
    padding-right: 0px;
    margin-bottom: 10px;
  }
  #app .myPage .searchResultList,
  #app .chatPage .searchResultList {
    width: calc(100% - 20px);
    margin: 10px;
  }
  #app .myPage .searchResultListWrap .searchResultList .chatItem,
  #app .chatPage .searchResultListWrap .searchResultList .chatItem {
    width: 200px;
    min-width: auto;
    flex-shrink: 0;
  }
  #app .myPage .searchResultList .chatItem,
  #app .chatPage .searchResultList .chatItem {
    min-width: 0;
    max-width: none;
    padding: 40px 10px 60px;
  }
  #app .myPage .searchResultListWrap .searchResultList .chatItem .chatExpository,
  #app .chatPage .searchResultListWrap .searchResultList .chatItem .chatExpository {
    margin-bottom: 16px;
  }
  #app .myPage .searchResultListWrap .searchResultList .alert.is_result + .searchResultListOverLayer,
  #app .chatPage .searchResultListWrap .searchResultList .alert.is_result + .searchResultListOverLayer {
    display: none;
  }
  #app .myPage .searchResultList .chatItem .chatMainImg,
  #app .chatPage .searchResultList .chatItem .chatMainImg {
    width: 80px;
    margin: -25px auto 10px;
  }
  #app .myPage .searchResultList .chatItem .chatMainImg img,
  #app .chatPage .searchResultList .chatItem .chatMainImg img {
    width: 80px;
    height: 80px;
  }
  #app .myPage .searchResultList .chatItem.is_before .chatMainImg .cover,
  #app .myPage .searchResultList .chatItem.is_close .chatMainImg .cover,
  #app .chatPage .searchResultList .chatItem.is_before .chatMainImg .cover,
  #app .chatPage .searchResultList .chatItem.is_close .chatMainImg .cover {
    width: 80px;
    height: 80px;
    font-size: 1rem;
  }
  #app .myPage .searchResultList .chatItem .chatTitle,
  #app .chatPage .searchResultList .chatItem .chatTitle {
    font-size: 14px;
    margin-bottom: 5px;
  }
  #app .myPage .searchResultList .chatItem .chatExpository,
  #app .chatPage .searchResultList .chatItem .chatExpository {
    font-size: 12px;
    line-height: 1.5;
  }
  #app .myPage .searchResultList .chatItem .btn_migrate:hover,
  #app .chatPage .searchResultList .chatItem .btn_migrate:hover {
    background-color: transparent;
    opacity: 0.7;
  }
  #app .myPage .searchResultList .chatItem .btn_migrate.btn_outline_blue:hover,
  #app .chatPage .searchResultList .chatItem .btn_migrate.btn_outline_blue:hover {
    color: var(--blue_main) !important;
  }
  #app .myPage .searchResultList .chatItem .btn_migrate.btn_outline_darkgray:hover,
  #app .chatPage .searchResultList .chatItem .btn_migrate.btn_outline_darkgray:hover {
    color: var(--gray_50) !important;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage .chatResultArea .btn_sort,
  #app .chatPage .chatResultArea .btn_sort {
    display: none;
  }
}
#app .myPage .off_meeting_status,
#app .chatPage .off_meeting_status {
  color: #fff;
  font-weight: normal;
  background-color: var(--gray_30);
  padding: 3px 5px;
}
#app .myPage .off_meeting_status.is_accepting,
#app .chatPage .off_meeting_status.is_accepting {
  background-color: var(--orange_main);
}
#app .myPage .chatInfoArea,
#app .chatPage .chatInfoArea {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  margin-top: auto;
  padding: 5px 0 0;
  border-top: 1px solid var(--gray_10);
  font-size: 11px;
}
#app .myPage .chatInfoArea .chatAdminWrap,
#app .chatPage .chatInfoArea .chatAdminWrap {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-flex: 1;
          flex: 1;
  overflow: hidden;
}
#app .myPage .chatInfoArea .chatAdminWrap::after,
#app .chatPage .chatInfoArea .chatAdminWrap::after {
  content: "";
  position: absolute;
  right: 0;
  width: 20px;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 30%, rgb(255, 255, 255) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 30%, rgb(255, 255, 255) 100%);
}
#app .myPage .chatInfoArea .chatAdminWrap .chatAdminTitle,
#app .chatPage .chatInfoArea .chatAdminWrap .chatAdminTitle {
  flex-shrink: 0;
  font-weight: bold;
}
#app .myPage .chatInfoArea .chatAdminWrap .chatAdminList,
#app .chatPage .chatInfoArea .chatAdminWrap .chatAdminList {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  gap: 2px;
}
#app .myPage .chatInfoArea .chatAdminWrap .chatAdminList .chat_icon,
#app .chatPage .chatInfoArea .chatAdminWrap .chatAdminList .chat_icon {
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
}
#app .myPage .chatInfoArea .chatMembersWrap,
#app .chatPage .chatInfoArea .chatMembersWrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage .chatInfoArea .chatMembersWrap:only-child,
#app .chatPage .chatInfoArea .chatMembersWrap:only-child {
  margin-left: auto;
}
#app .myPage .chatInfoArea .chatMembersWrap .chatMembersTitle,
#app .chatPage .chatInfoArea .chatMembersWrap .chatMembersTitle {
  font-weight: bold;
}
#app .myPage .chatInfoArea .chatMembersWrap .chatMembers,
#app .chatPage .chatInfoArea .chatMembersWrap .chatMembers {
  font-size: 0.6875rem;
}
#app .myPage .searchResultListWrap .chatInfoArea .chatAdminWrap::after,
#app .chatPage .searchResultListWrap .chatInfoArea .chatAdminWrap::after {
  width: 10px;
}
#app .myPage .content_userProfileList,
#app .chatPage .content_userProfileList {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  width: 100%;
  max-width: 1500px;
  margin: 10px auto 30px;
  padding-inline: 10px;
}
#app .myPage .content_userProfileList::-webkit-scrollbar,
#app .chatPage .content_userProfileList::-webkit-scrollbar {
  height: 10px;
}
#app .myPage .content_userProfileList::-webkit-scrollbar-thumb,
#app .chatPage .content_userProfileList::-webkit-scrollbar-thumb {
  border-radius: 10px;
}
#app .myPage .userProfile,
#app .chatPage .userProfile {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  padding: 20px 15px 5px 10px;
  border: solid 1px var(--gray_10);
  border-radius: 5px;
  background-color: #fff;
}
#app .myPage .userProfile:hover,
#app .chatPage .userProfile:hover {
  box-shadow: 0 0px 3px var(--gray_20);
}
#app .myPage .tab_profile .content_userProfileList .userProfile .user_proftext,
#app .chatPage .tab_profile .content_userProfileList .userProfile .user_proftext {
  min-height: 5em;
}
#app .myPage #log_outline .content_userprofile,
#app .chatPage #log_outline .content_userprofile {
  /* チャットログリスト内 */
  margin: 20px 10px;
}
#app .myPage #log_outline .content_userprofile .searchHeading,
#app .chatPage #log_outline .content_userprofile .searchHeading {
  /* チャットログリスト内 */
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--navy_main);
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  #app .myPage #log_outline .content_userprofile .searchHeading .subText,
  #app .chatPage #log_outline .content_userprofile .searchHeading .subText {
    display: none;
  }
}
#app .myPage .content_userProfileListWrap,
#app .chatPage .content_userProfileListWrap {
  position: relative;
}
#app .myPage main:not(.is_profile) .content_userProfileList,
#app .chatPage main:not(.is_profile) .content_userProfileList {
  width: auto;
  flex-wrap: nowrap;
  margin: 10px 0 40px;
  padding-right: 90px;
  min-height: auto;
  scrollbar-width: none;
  cursor: grab;
  overflow-x: scroll;
}
@media screen and (max-width: 767px) {
  #app .myPage main:not(.is_profile) .content_userProfileList,
  #app .chatPage main:not(.is_profile) .content_userProfileList {
    padding-right: 10px;
    margin-bottom: 10px;
  }
}
#app .myPage main:not(.is_profile) .userProfile,
#app .chatPage main:not(.is_profile) .userProfile {
  width: 250px;
  padding: 10px 10px 5px 10px;
  flex-shrink: 0;
}
#app .myPage .chatItem.moreItem,
#app .chatPage .chatItem.moreItem {
  min-width: 120px;
  border: none;
  padding: 0;
  align-self: stretch;
}
#app .myPage .content_userProfileList .userProfile.moreItem,
#app .chatPage .content_userProfileList .userProfile.moreItem {
  display: block;
  position: relative;
  min-width: 120px;
  width: 120px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background-color: #fff;
  align-self: stretch;
}
#app .myPage .moreItem > a,
#app .chatPage .moreItem > a {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding-top: 20px;
  padding-bottom: 23px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--blue_main);
  border-radius: 3px;
}
#app .myPage .moreItem > a:hover,
#app .chatPage .moreItem > a:hover {
  text-decoration: none;
}
#app .myPage #chat_log .moreItem > a:hover,
#app .chatPage #chat_log .moreItem > a:hover {
  text-decoration: none;
}
#app .myPage .moreItem .searchIcon,
#app .chatPage .moreItem .searchIcon {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--blue_main);
  border-radius: 50%;
  background-color: #f4f6fa;
  margin-bottom: 10px;
}
#app .myPage moreItem.moreItem .searchIcon .fa-search,
#app .chatPage moreItem.moreItem .searchIcon .fa-search {
  font-size: 20px;
  width: 20px;
  height: auto;
}
#app .myPage moreItem.moreItem .searchText,
#app .chatPage moreItem.moreItem .searchText {
  font-size: 1rem;
  line-height: 1.5;
}
#app .myPage moreItem.moreItem .searchText .fa-chevron-right,
#app .chatPage moreItem.moreItem .searchText .fa-chevron-right {
  margin-left: 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .searchResultList .chatItem.moreItem,
  #app .chatPage .searchResultList .chatItem.moreItem {
    min-width: 120px;
    width: 120px;
    margin-right: 10px;
  }
  #app .myPage .content_userProfileList .userProfile.moreItem,
  #app .chatPage .content_userProfileList .userProfile.moreItem {
    margin-right: 10px;
  }
  #app .myPage .searchResultList .chatItem.moreItem > a,
  #app .chatPage .searchResultList .chatItem.moreItem > a {
    padding-top: 15px;
  }
  #app .myPage .searchResultList .chatItem.moreItem .searchIcon,
  #app .chatPage .searchResultList .chatItem.moreItem .searchIcon {
    width: 80px;
    height: 80px;
  }
}
#app .myPage .content_userProfileListWrap .searchResultListOverLayer,
#app .myPage .searchResultListWrap .searchResultListOverLayer,
#app .chatPage .content_userProfileListWrap .searchResultListOverLayer,
#app .chatPage .searchResultListWrap .searchResultListOverLayer {
  content: "";
  display: block;
  width: 10%;
  height: calc(100% - 10px);
  position: absolute;
  top: 0;
  right: 0;
  background: -webkit-linear-gradient(left, rgba(252, 252, 252, 0) 0%, rgba(252, 252, 252, 0.5) 30%, rgb(252, 252, 252) 100%);
  background: linear-gradient(to right, rgba(252, 252, 252, 0) 0%, rgba(252, 252, 252, 0.5) 30%, rgb(252, 252, 252) 100%);
}
@media screen and (max-width: 767px) {
  #app .myPage .content_userProfileListWrap .searchResultListOverLayer,
  #app .myPage .searchResultListWrap .searchResultListOverLayer,
  #app .chatPage .content_userProfileListWrap .searchResultListOverLayer,
  #app .chatPage .searchResultListWrap .searchResultListOverLayer {
    width: 20px;
  }
}
#app .myPage .content_userProfileListWrap .alert.is_result + .searchResultListOverLayer,
#app .chatPage .content_userProfileListWrap .alert.is_result + .searchResultListOverLayer {
  display: none;
}
#app .myPage .userProfile .prof_header,
#app .chatPage .userProfile .prof_header {
  display: -webkit-box;
  display: flex;
  width: 100%;
}
#app .myPage .userProfile .user_img,
#app .chatPage .userProfile .user_img {
  margin-right: 10px;
  position: relative;
}
#app .myPage .userProfile .user_img.is_unicorn > a,
#app .chatPage .userProfile .user_img.is_unicorn > a {
  width: 54px;
  height: auto;
}
#app .myPage .userProfile .user_img.is_unicorn .border-gradient,
#app .chatPage .userProfile .user_img.is_unicorn .border-gradient {
  width: 50px;
  height: auto;
}
#app .myPage .userProfile .user_proficon,
#app .chatPage .userProfile .user_proficon {
  width: 50px;
  height: 50px;
}
#app .myPage .userProfile .userInfo,
#app .chatPage .userProfile .userInfo {
  position: relative;
  width: 100%;
}
#app .myPage .userProfile .userInfo .username,
#app .chatPage .userProfile .userInfo .username {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
  font-weight: bold;
}
#app .myPage .userProfile .user_prof_btn,
#app .chatPage .userProfile .user_prof_btn {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
          align-items: flex-start;
}
#app .myPage .userProfile .user_profWrap,
#app .chatPage .userProfile .user_profWrap {
  align-self: flex-start;
  min-height: 60px;
}
#app .myPage .userProfile .user_prof,
#app .chatPage .userProfile .user_prof {
  display: -webkit-box;
  display: flex;
  font-size: 12px;
  margin-top: 10px;
}
#app .myPage .userProfile .user_prof li,
#app .chatPage .userProfile .user_prof li {
  border-left: solid 1px var(--gray_10);
  padding: 0 5px;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  max-width: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 16px;
}
#app .myPage .userProfile .user_prof li:first-of-type,
#app .chatPage .userProfile .user_prof li:first-of-type {
  border-left: none;
  padding-left: 0;
}
#app .myPage .userProfile .userInfo .followText,
#app .chatPage .userProfile .userInfo .followText {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
          align-items: baseline;
  margin-left: 3px;
  color: var(--gray_40);
  font-size: 11px;
}
#app .myPage .userProfile .userInfo .followText i,
#app .myPage .userProfile .userInfo .followText svg,
#app .chatPage .userProfile .userInfo .followText i,
#app .chatPage .userProfile .userInfo .followText svg {
  margin: 0 3px 0 0;
}
#app .myPage .userProfile .userInfo .user_btnWrap,
#app .chatPage .userProfile .userInfo .user_btnWrap {
  margin-top: 10px;
  margin-left: auto;
  margin-bottom: 10px;
}
#app .myPage .userProfile .userInfo .user_btnWrap,
#app .chatPage .userProfile .userInfo .user_btnWrap {
  display: none;
}
#app .myPage .tab_profile .userProfile .userInfo .user_btnWrap,
#app .chatPage .tab_profile .userProfile .userInfo .user_btnWrap {
  display: -webkit-box;
  display: flex;
}
#app .myPage .userProfile .userInfo .user_btnWrap a.btn,
#app .chatPage .userProfile .userInfo .user_btnWrap a.btn {
  width: 10em;
  font-size: 11px;
  padding: 0 5px;
  border: 1px solid var(--blue_main);
  color: var(--blue_main);
}
#app .myPage .userProfile .userInfo .user_btnWrap a.is_done,
#app .chatPage .userProfile .userInfo .user_btnWrap a.is_done {
  border: 1px solid var(--blue_main);
  background-color: var(--blue_main);
  color: #fff;
}
#app .myPage .userProfile .userInfo .popover .user_btnWrap a,
#app .chatPage .userProfile .userInfo .popover .user_btnWrap a {
  color: #fff;
}
#app .myPage .userProfile .btn_follow i,
#app .myPage .userProfile .btn_follow svg,
#app .chatPage .userProfile .btn_follow i,
#app .chatPage .userProfile .btn_follow svg {
  margin: 0 3px 0 0;
}
@media screen and (max-width: 790px) {
  #app .myPage .userProfile .userInfo .user_btnWrap a,
  #app .chatPage .userProfile .userInfo .user_btnWrap a {
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage .userProfile .user_img.is_unicorn > a,
  #app .chatPage .userProfile .user_img.is_unicorn > a {
    width: 44px;
    height: auto;
  }
  #app .myPage .userProfile .user_img.is_unicorn .border-gradient,
  #app .chatPage .userProfile .user_img.is_unicorn .border-gradient {
    width: 40px;
    height: auto;
  }
  #app .myPage .userProfile .user_proficon,
  #app .chatPage .userProfile .user_proficon {
    width: 40px;
    height: 40px;
  }
  #app .myPage .userProfile .user_prof,
  #app .chatPage .userProfile .user_prof {
    font-size: 11px;
  }
  #app .myPage .userProfile .userInfo .followText,
  #app .chatPage .userProfile .userInfo .followText {
    margin-top: 0px;
    font-size: 10px;
  }
}
#app .myPage .is_unicorn > a,
#app .myPage .is_unicorn > div > a,
#app .chatPage .is_unicorn > a,
#app .chatPage .is_unicorn > div > a {
  padding: 2px;
  text-align: center;
  background: -webkit-linear-gradient(left top, #d274fc, #7057fa);
  background: linear-gradient(to right bottom, #d274fc, #7057fa);
  border-radius: 50%;
  display: inline-block;
}
#app .myPage .is_unicorn .border-gradient,
#app .chatPage .is_unicorn .border-gradient {
  background: #fff;
  border-radius: 50%;
  display: inline-block;
}
#app .myPage .content_chatlog .log_userthumb.is_unicorn > a,
#app .chatPage .content_chatlog .log_userthumb.is_unicorn > a {
  width: 39px;
  height: 39px;
}
#app .myPage .content_chatlog .log_userthumb.is_unicorn .user_img .username,
#app .chatPage .content_chatlog .log_userthumb.is_unicorn .user_img .username {
  width: 39px;
  height: 39px;
}
#app .myPage .content_chatlog .log_userthumb.is_unicorn .border-gradient,
#app .chatPage .content_chatlog .log_userthumb.is_unicorn .border-gradient {
  width: 35px;
  height: 35px;
}
#app .myPage .mypage_main_col .userProfile .userInfo .user_btnWrap a,
#app .chatPage .mypage_main_col .userProfile .userInfo .user_btnWrap a {
  padding: 0;
}
#app .myPage .mypage_main_col .userProfile .user_img.is_unicorn > a,
#app .chatPage .mypage_main_col .userProfile .user_img.is_unicorn > a {
  width: 44px;
  height: auto;
}
#app .myPage .mypage_main_col .userProfile .user_img.is_unicorn .border-gradient,
#app .chatPage .mypage_main_col .userProfile .user_img.is_unicorn .border-gradient {
  width: 40px;
  height: auto;
}
#app .myPage .mypage_main_col .userProfile .user_proficon,
#app .chatPage .mypage_main_col .userProfile .user_proficon {
  width: 40px;
  height: 40px;
}
#app .myPage .mypage_main_col .userProfile .user_prof,
#app .chatPage .mypage_main_col .userProfile .user_prof {
  font-size: 11px;
}
#app .myPage .mypage_main_col .userProfile .userInfo .followText,
#app .chatPage .mypage_main_col .userProfile .userInfo .followText {
  font-size: 10px;
  margin-bottom: 3px;
  margin-top: 3px;
}
#app .myPage .mypage_main_col .userProfile .user_prof_btn .user_btnWrap,
#app .chatPage .mypage_main_col .userProfile .user_prof_btn .user_btnWrap {
  display: none;
}
#app .myPage .userProfile .user_proftext,
#app .chatPage .userProfile .user_proftext {
  min-height: 5em;
  padding: 8px 5px;
  font-size: 0.8125rem;
  line-height: 1.8em;
  border-top: solid 1px var(--gray_10);
  border-bottom: solid 1px var(--gray_10);
}
#app .myPage .userProfile .user_proftext p,
#app .chatPage .userProfile .user_proftext p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
}
#app .myPage .mypage_main_col .userProfile .user_proftext,
#app .chatPage .mypage_main_col .userProfile .user_proftext {
  width: 100%;
  font-size: 11px;
}
@media screen and (max-width: 767px) {
  #app .myPage .userProfile .user_proftext,
  #app .chatPage .userProfile .user_proftext {
    width: 100%;
    font-size: 11px;
  }
}
#app .myPage .userProfile .followNum,
#app .chatPage .userProfile .followNum {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
          justify-content: flex-end;
  width: 100%;
  margin: 5px 5px 5px 0;
  font-size: 12px;
}
#app .myPage .userProfile .followNum li,
#app .chatPage .userProfile .followNum li {
  border-left: solid 1px var(--gray_10);
  padding: 0 8px;
  font-size: 0.6875rem;
}
#app .myPage .userProfile .followNum li:first-of-type,
#app .chatPage .userProfile .followNum li:first-of-type {
  border-left: none;
  padding-left: 0;
}
#app .myPage .userProfile .followNum li:last-of-type,
#app .chatPage .userProfile .followNum li:last-of-type {
  padding-right: 0;
}
#app .myPage .userProfile .followNum li .num,
#app .chatPage .userProfile .followNum li .num {
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  #app .myPage .userProfile .followNum,
  #app .chatPage .userProfile .followNum {
    width: 100%;
    font-size: 10px;
  }
  #app .myPage .userProfile .followNum li .num,
  #app .chatPage .userProfile .followNum li .num {
    font-size: 12px;
  }
}
@media screen and (max-width: 350px) {
  #app .myPage .userProfile .userInfo .user_btnWrap,
  #app .chatPage .userProfile .userInfo .user_btnWrap {
    margin-right: auto;
    margin-left: 0;
  }
}
#app .myPage .mypage_main_col .userProfile .followNum,
#app .chatPage .mypage_main_col .userProfile .followNum {
  width: 100%;
  margin-bottom: 5px;
  font-size: 10px;
}
#app .myPage .mypage_main_col .userProfile .followNum li .num,
#app .chatPage .mypage_main_col .userProfile .followNum li .num {
  font-size: 12px;
}
#app .myPage .userProfile .followNum + .user_btnWrap,
#app .chatPage .userProfile .followNum + .user_btnWrap {
  display: block;
  width: 100%;
  margin: auto 0 5px;
}
#app .myPage .userProfile .followNum + .user_btnWrap .btn_follow,
#app .chatPage .userProfile .followNum + .user_btnWrap .btn_follow {
  min-width: auto;
  margin-top: 0;
  font-size: 12px;
}
#app .myPage .mypage_main_col .userProfile .followNum + .user_btnWrap,
#app .chatPage .mypage_main_col .userProfile .followNum + .user_btnWrap {
  display: block;
  width: 100%;
  margin: auto 0 5px;
}
#app .myPage .mypage_main_col .userProfile .followNum + .user_btnWrap .btn_follow,
#app .chatPage .mypage_main_col .userProfile .followNum + .user_btnWrap .btn_follow {
  min-width: auto;
  margin-top: 0;
  font-size: 12px;
}
#app .myPage .tab_profile .userProfile .followNum + .user_btnWrap,
#app .chatPage .tab_profile .userProfile .followNum + .user_btnWrap {
  display: none;
}
#app .myPage .tweetImageArea,
#app .chatPage .tweetImageArea {
  display: -webkit-box;
  display: flex;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  margin-top: 10px;
}
#app .myPage .tweetImageArea .tweetImage,
#app .chatPage .tweetImageArea .tweetImage {
  position: relative;
  flex-basis: 25%;
  max-width: 200px;
  max-height: 150px;
}
@media screen and (max-width: 575px) {
  #app .myPage .tweetImageArea .tweetImage,
  #app .chatPage .tweetImageArea .tweetImage {
    height: 70px;
  }
}
#app .myPage .tweetImageArea .tweetImage img,
#app .chatPage .tweetImageArea .tweetImage img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  border: 2px solid var(--blue_sub);
}
#app .myPage .tweetImageArea .tweetImage img:hover,
#app .chatPage .tweetImageArea .tweetImage img:hover {
  cursor: pointer;
  box-shadow: 0 0 5px 0 var(--blue_main);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  opacity: 0.7;
}
#app .myPage .imgClose,
#app .chatPage .imgClose {
  position: absolute;
  top: 5px;
  right: 5px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 16px;
  background-color: var(--gray_70);
  border-radius: 50%;
  cursor: pointer;
}
#app .myPage .imgClose:hover,
#app .chatPage .imgClose:hover {
  opacity: 0.7;
}
#app .myPage .imgClose i,
#app .myPage .imgClose svg,
#app .chatPage .imgClose i,
#app .chatPage .imgClose svg {
  margin-right: 0;
}
#app .myPage #imgTweetModal,
#app .chatPage #imgTweetModal {
  /* display: block !important; モックではコメントアウト（フロントでは必要） */
}
#app .myPage #imgTweetModal .modal-header,
#app .chatPage #imgTweetModal .modal-header {
  border-bottom: none;
}
#app .myPage #imgTweetModal .modal-header .modal-title,
#app .chatPage #imgTweetModal .modal-header .modal-title {
  font-weight: normal;
  font-size: 12px;
}
#app .myPage #imgTweetModal .modal-header .modal-title small,
#app .chatPage #imgTweetModal .modal-header .modal-title small {
  margin-left: 20px;
  font-size: 1em;
}
@media screen and (max-width: 991px) {
  #app .myPage #imgTweetModal .modal-header .modal-title small,
  #app .chatPage #imgTweetModal .modal-header .modal-title small {
    display: block;
    margin-left: 0;
  }
}
#app .myPage #imgTweetModal .modal-body,
#app .chatPage #imgTweetModal .modal-body {
  display: -webkit-box;
  display: flex;
  padding: 0 1.5vw 1.5vw;
  -webkit-box-pack: center;
          justify-content: center;
}
#app .myPage #imgTweetModal .modal-body [class^=arrow_],
#app .chatPage #imgTweetModal .modal-body [class^=arrow_] {
  align-self: stretch;
  padding: 0 15px;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage #imgTweetModal .modal-body [class^=arrow_].is_disable,
#app .chatPage #imgTweetModal .modal-body [class^=arrow_].is_disable {
  pointer-events: none;
}
#app .myPage #imgTweetModal .modal-body [class^=arrow_].is_disable i,
#app .myPage #imgTweetModal .modal-body [class^=arrow_].is_disable svg,
#app .chatPage #imgTweetModal .modal-body [class^=arrow_].is_disable i,
#app .chatPage #imgTweetModal .modal-body [class^=arrow_].is_disable svg {
  color: var(--gray_5);
  fill: var(--gray_5);
}
#app .myPage #imgTweetModal .modal-body [class^=arrow_] i,
#app .myPage #imgTweetModal .modal-body [class^=arrow_] svg,
#app .chatPage #imgTweetModal .modal-body [class^=arrow_] i,
#app .chatPage #imgTweetModal .modal-body [class^=arrow_] svg {
  font-size: 25px;
  color: var(--blue_main);
  width: 10px;
  fill: var(--blue_main);
}
#app .myPage #imgTweetModal .imageTweetArea,
#app .chatPage #imgTweetModal .imageTweetArea {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-column-gap: 1.5vw;
     -moz-column-gap: 1.5vw;
          column-gap: 1.5vw;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  #app .myPage #imgTweetModal .imageTweetArea,
  #app .chatPage #imgTweetModal .imageTweetArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea {
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
          flex-grow: 1;
  align-self: center;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea > a,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea > a {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea > a img,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea > a img {
  max-width: 100%;
  max-height: 40vh;
  border: 1px solid var(--gray_20);
  margin: 0;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_left,
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_right,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_left,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: var(--gray_40);
  border-radius: 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  z-index: 10;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_left:hover,
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_right:hover,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_left:hover,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_right:hover {
  opacity: 0.7;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_left.is_noLink,
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_right.is_noLink,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_left.is_noLink,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_right.is_noLink {
  pointer-events: none;
  display: none;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_left i,
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_left svg,
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_right i,
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_right svg,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_left i,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_left svg,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_right i,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_right svg {
  position: absolute;
  width: auto;
  color: #fff;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_left,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_left {
  left: 10px;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_left i,
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_left svg,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_left i,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_left svg {
  left: 50%;
  -webkit-transform: translateX(-60%);
          transform: translateX(-60%);
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_right,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_right {
  right: 10px;
}
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_right i,
#app .myPage #imgTweetModal .imageTweetArea .imageArea .arrow_right svg,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_right i,
#app .chatPage #imgTweetModal .imageTweetArea .imageArea .arrow_right svg {
  left: 50%;
  -webkit-transform: translateX(-40%);
          transform: translateX(-40%);
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea {
  position: relative;
  width: 45%;
  flex-shrink: 0;
  border: 1px solid var(--gray_20);
  border-radius: 5px;
  padding: 15px 15px 170px;
  max-height: 80vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* リンク先の表示 */
  /* 画像つぶやき、メイン・返信共通指定 */
}
@media screen and (max-width: 1199px) {
  #app .myPage #imgTweetModal .imageTweetArea .tweetArea,
  #app .chatPage #imgTweetModal .imageTweetArea .tweetArea {
    width: 100%;
    margin-top: 10px;
    padding: 10px 10px 170px;
    max-height: 40vh;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage #imgTweetModal .imageTweetArea .tweetArea,
  #app .chatPage #imgTweetModal .imageTweetArea .tweetArea {
    padding: 10px 10px 0;
  }
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text {
  /* チャットリンク */
  /* チャットリンク */
  /* メッセージリンク */
  /* プロフィールリンク */
  /* つぶやきリンク */
  /* 各マイクロサービスへのリンク */
  /* オフィスへのリンク */
  /* チャットリンク */
  /* チャットリンク */
  /* メッセージリンク */
  /* プロフィールリンク */
  /* つぶやきリンク */
  /* 各マイクロサービスへのリンク */
  /* オフィスへのリンク */
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/room_list?room_id="],
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="&comment_id="],
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/user_profile/"],
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/tweet/all?tweet_id="],
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*=".libecity"],
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="office.libecity"],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/room_list?room_id="],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="&comment_id="],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/user_profile/"],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/tweet/all?tweet_id="],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*=".libecity"],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="office.libecity"] {
  position: relative;
  display: inline-block;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.6rem;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/room_list?room_id="],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/room_list?room_id="] {
  padding-right: 110px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="&comment_id="],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="&comment_id="] {
  padding-right: 120px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/user_profile/"],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/user_profile/"] {
  padding-right: 110px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/tweet/all?tweet_id"],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/tweet/all?tweet_id"] {
  padding-right: 110px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*=".libecity"],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*=".libecity"] {
  padding-right: 110px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="office.libecity"],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="office.libecity"] {
  padding-right: 110px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/room_list?room_id="]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="&comment_id="]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/user_profile/"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/tweet/all?tweet_id="]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*=".libecity"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="office.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/room_list?room_id="]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="&comment_id="]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/user_profile/"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/tweet/all?tweet_id="]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*=".libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="office.libecity"]::after {
  position: absolute;
  top: 3px;
  right: 0;
  display: inline-block;
  border: solid 1px var(--blue_main);
  background-color: #fff;
  font-size: 0.625rem;
  color: var(--blue_main);
  margin: 0 3px;
  height: 20px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 3px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/room_list?room_id="]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/room_list?room_id="]::after {
  content: "このチャットに移動";
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="&comment_id="]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="&comment_id="]::after {
  content: "このメッセージに移動" !important;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/user_profile/"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/user_profile/"]::after {
  content: "プロフィールに移動" !important;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/tweet/all?tweet_id"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="/tweet/all?tweet_id"]::after {
  content: "このつぶやきを表示";
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="map.libecity"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="works.libecity"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="skill.libecity"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="meets.libecity"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="space.libecity"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="farmers.libecity"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="furima.libecity"]::after,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="library.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="map.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="works.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="skill.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="meets.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="space.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="farmers.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="furima.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="library.libecity"]::after {
  content: "関連サービスに移動" !important;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="office.libecity"]::after,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .post_text a[href*="office.libecity"]::after {
  content: "オフィス予約に移動" !important;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article {
  padding: 0;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div {
  position: relative;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_userthumb,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_userthumb,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_userthumb,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_userthumb {
  width: 30px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-top: -8px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_userthumb .user_proficon,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_userthumb .user_proficon,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_userthumb .user_proficon,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_userthumb .user_proficon {
  width: 25px;
  height: 25px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info {
  display: -webkit-box;
  display: flex;
  margin-top: -5px;
  margin-bottom: 0;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info .post_user,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info .post_user,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info .post_user,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info .post_user {
  font-size: 12px;
  margin-bottom: 0px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info .post_user .username,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info .post_user .username,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info .post_user .username,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info .post_user .username {
  font-size: inherit;
  font-weight: bold;
  position: relative;
  vertical-align: middle;
  margin-right: 5px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info .post_user [class^=userstatus_],
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info .post_user [class^=userstatus_],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info .post_user [class^=userstatus_],
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info .post_user [class^=userstatus_] {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info time,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info time,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_info time,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_info time {
  min-width: 30px;
  font-size: 0.6875rem;
  color: var(--gray_40);
  margin-left: auto;
  text-align: right;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_text p,
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_text p,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .previewTweetArea article > div .log_detail .post_text p,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article > div .log_detail .post_text p {
  margin-bottom: 0;
  font-size: 12px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet {
  position: relative;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray_5);
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info {
  display: -webkit-box;
  display: flex;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .user_img,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .user_img {
  margin-right: 15px;
  flex-shrink: 0;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .user_img .chatPage_tweet,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .user_img .chatPage_tweet {
  display: none;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .post_user,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .post_user {
  font-size: 14px;
  font-weight: bold;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .post_user small,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .post_user small {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transform-origin: left;
          transform-origin: left;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .user_proficon,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .user_proficon {
  width: 54px;
  height: 54px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .post_info,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .post_info {
  font-size: 11px;
  color: var(--gray_60);
  display: -webkit-box;
  display: flex;
  position: relative;
  margin-left: auto;
  padding-left: 10px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .post_info time,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .user_info .post_info time {
  white-space: nowrap;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data {
  padding-bottom: 33px;
  position: relative;
}
@media screen and (max-width: 991px) {
  #app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data,
  #app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data {
    padding-bottom: 36px;
  }
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data > li:last-child,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data > li:last-child {
  position: absolute;
  bottom: 0;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data > li:last-child button .tip,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data > li:last-child button .tip {
  left: -76px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data button .tip_inner,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data button .tip_inner {
  height: 32px;
  width: 80px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data .popover,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data .popover {
  right: auto;
  max-width: 280px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data .popover.is_reaction_user .arrow,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data .popover.is_reaction_user .arrow {
  right: auto;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data .popover.is_reaction_user .reaction_tab,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data .popover.is_reaction_user .reaction_tab {
  overflow-x: auto;
  padding: 0 0 3px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data button .tip,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .reaction_data button .tip {
  left: -74px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .action_area .editbox,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .action_area .editbox {
  padding-left: 2px;
}
@media (min-width: 768px) and (max-width: 1000px) {
  #app .myPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .action_area .editbox,
  #app .chatPage #imgTweetModal .imageTweetArea .tweetArea .main_tweet .action_area .editbox {
    padding-left: 0;
  }
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea {
  margin-top: 0;
  padding-bottom: 30px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div {
  position: relative;
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_userthumb,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_userthumb {
  width: 45px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: justify;
          justify-content: space-between;
  margin-top: -8px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_userthumb a .user_proficon,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_userthumb a .user_proficon {
  width: 35px;
  height: 35px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .tweetImage,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .tweetImage {
  min-height: 70px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .tweetImage img,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .tweetImage img {
  max-width: 100%;
  max-height: 50vh;
  border: 1px solid var(--gray_20);
  margin: 0;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .post_user .username,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .post_user .username {
  font-size: 14px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .post_user .popover,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .post_user .popover {
  left: -80px;
}
@media screen and (max-width: 767px) {
  #app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .post_user .popover,
  #app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .post_user .popover {
    z-index: 110;
  }
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .post_user small,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .post_user small {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transform-origin: left;
          transform-origin: left;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div time,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div time {
  min-width: auto;
  white-space: nowrap;
  font-size: 0.6875rem;
  color: var(--gray_40);
  margin-left: auto;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div time,
  #app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div time {
    font-size: 0.6875rem;
    margin-right: -8px;
    flex-shrink: 0;
  }
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail {
  position: relative;
  width: calc(100% - 45px);
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .post_info,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .post_info {
  display: -webkit-box;
  display: flex;
  margin-top: -5px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .post_info .post_user,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .post_info .post_user {
  position: relative;
  margin-bottom: 10px;
  margin-right: 10px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .post_info .username,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .post_info .username {
  font-weight: bold;
  position: relative;
  vertical-align: middle;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data {
  padding-bottom: 33px;
  position: relative;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data > li:last-child,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data > li:last-child {
  position: absolute;
  bottom: 0;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data .popover,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data .popover {
  right: auto;
  max-width: 260px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data .popover.is_reaction_user .arrow,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data .popover.is_reaction_user .arrow {
  right: auto;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data .popover.is_reaction_user .reaction_tab,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data .popover.is_reaction_user .reaction_tab {
  overflow-x: auto;
  padding: 0 0 3px;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data button .tip,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet article > div .log_detail .reaction_data button .tip {
  left: -74px;
}
@media screen and (max-width: 767px) {
  #app .myPage #imgTweetModal,
  #app .chatPage #imgTweetModal {
    padding-top: 0;
  }
  #app .myPage #imgTweetModal .modal-content,
  #app .chatPage #imgTweetModal .modal-content {
    max-height: 97vh;
  }
  #app .myPage #imgTweetModal .modal-content .imageTweetArea .tweetArea,
  #app .chatPage #imgTweetModal .modal-content .imageTweetArea .tweetArea {
    height: 40vh;
  }
  #app .myPage #imgTweetModal .modal-content .imageTweetArea .tweetArea .main_tweet,
  #app .chatPage #imgTweetModal .modal-content .imageTweetArea .tweetArea .main_tweet {
    border-bottom: none;
  }
  #app .myPage #imgTweetModal .modal-body,
  #app .chatPage #imgTweetModal .modal-body {
    justify-content: space-around;
  }
  #app .myPage #imgTweetModal .modal-body [class^=arrow_],
  #app .chatPage #imgTweetModal .modal-body [class^=arrow_] {
    position: absolute;
    bottom: -35px;
    background-color: #fff;
    border-radius: 5px;
  }
  #app .myPage #imgTweetModal .modal-body .arrow_left,
  #app .chatPage #imgTweetModal .modal-body .arrow_left {
    padding: 2px 17px 2px 13px;
    left: 0;
  }
  #app .myPage #imgTweetModal .modal-body .arrow_right,
  #app .chatPage #imgTweetModal .modal-body .arrow_right {
    padding: 2px 13px 2px 17px;
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage article.is_showReaction .main_tweet .reaction_data .popover.is_reaction_user,
  #app .myPage article .replyTweetArea .is_showReactionTweet .reaction_data .popover.is_reaction_user,
  #app .chatPage article.is_showReaction .main_tweet .reaction_data .popover.is_reaction_user,
  #app .chatPage article .replyTweetArea .is_showReactionTweet .reaction_data .popover.is_reaction_user {
    position: fixed;
    bottom: 50%;
    left: 50%;
    -webkit-transform: translatex(-50%);
            transform: translatex(-50%);
    top: auto;
    z-index: 1;
    padding: 5px 3px 0px 3px;
    box-shadow: 0px 0px 3px var(--gray_20);
    display: block;
  }
}
#app .myPage .action_area .reactionbox,
#app .chatPage .action_area .reactionbox {
  border-right: solid 1px var(--gray_20);
}
@-webkit-keyframes anim_show_reaction {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anim_show_reaction {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 320px) {
  #app .myPage .action_area .reactionbox,
  #app .chatPage .action_area .reactionbox {
    padding: 15px 5px 15px;
    flex-wrap: nowrap;
  }
  #app .myPage .action_area .reactionbox li,
  #app .chatPage .action_area .reactionbox li {
    padding: 0;
    margin-bottom: 0;
  }
  #app .myPage .action_area .reactionbox .tip,
  #app .chatPage .action_area .reactionbox .tip {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが 767px まで  リアクション（スマホ表示）*/
    /* つぶやき返信のリアクションボタン（スマホ） */
    /* つぶやき返信のリアクション一覧（スマホ） */
    /* つぶやき画像モーダルの返信リアクションボタン（スマホ） */
    /* つぶやき画像モーダルの返信リアクション一覧（スマホ） */
    /*削除ボタン*/
    /* コピーボタン */
  }
  #app .myPage .action_area,
  #app .chatPage .action_area {
    position: fixed;
    width: 85vw;
    max-width: 420px;
    min-width: 300px;
    background-color: var(--gray_black);
    padding: 15px 15px 0;
    border: solid 1px #fff;
    border-radius: 10px;
    box-shadow: 0px 1px 2px var(--gray_20);
    display: none;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 30px;
    justify-content: space-around;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    z-index: 10;
  }
  #app .myPage article .action_area:first-child,
  #app .chatPage article .action_area:first-child {
    display: none !important;
  }
  #app .myPage #actionModal,
  #app .chatPage #actionModal {
    z-index: 0;
    background-color: var(--gray_60_a);
    height: 100vh;
    z-index: 10000;
  }
  #app .myPage #actionModal.is_show,
  #app .myPage #actionModal.is_showReaction,
  #app .myPage #actionModal.is_showTweet,
  #app .myPage #actionModal.is_showReactionTweet,
  #app .chatPage #actionModal.is_show,
  #app .chatPage #actionModal.is_showReaction,
  #app .chatPage #actionModal.is_showTweet,
  #app .chatPage #actionModal.is_showReactionTweet {
    display: block;
    -webkit-animation: anim_show_reaction 0.2s forwards;
            animation: anim_show_reaction 0.2s forwards;
  }
  #app .myPage .content_chatlog article.is_show,
  #app .myPage .content_chatlog article.is_showReaction,
  #app .myPage .content_chatlog article.is_showTweet,
  #app .myPage .content_chatlog article.is_showReactionTweet,
  #app .chatPage .content_chatlog article.is_show,
  #app .chatPage .content_chatlog article.is_showReaction,
  #app .chatPage .content_chatlog article.is_showTweet,
  #app .chatPage .content_chatlog article.is_showReactionTweet {
    z-index: 10020;
    position: relative;
  }
  #app .myPage .content_chatlog article.is_show .action_area,
  #app .myPage .modal article.is_show .action_area,
  #app .chatPage .content_chatlog article.is_show .action_area,
  #app .chatPage .modal article.is_show .action_area {
    display: -webkit-box;
    display: flex;
    -webkit-animation: anim_show_reaction 0.2s forwards;
            animation: anim_show_reaction 0.2s forwards;
  }
  #app .myPage .modal article.is_show .action_area,
  #app .chatPage .modal article.is_show .action_area {
    bottom: 50%;
  }
  #app .myPage .content_chatlog article.is_showTweet .originalTweetArea .log_detail.is_showTweet ~ .action_area,
  #app .myPage .content_chatlog article.is_showTweet .replyTweetArea .is_showTweet ~ .action_area,
  #app .chatPage .content_chatlog article.is_showTweet .originalTweetArea .log_detail.is_showTweet ~ .action_area,
  #app .chatPage .content_chatlog article.is_showTweet .replyTweetArea .is_showTweet ~ .action_area {
    display: -webkit-box;
    display: flex;
  }
  #app .myPage .content_chatlog article.is_showTweet .originalTweetArea .log_detail.is_showTweet ~ .action_area .editbox,
  #app .myPage .content_chatlog article.is_showTweet .replyTweetArea .is_showTweet ~ .action_area .editbox,
  #app .chatPage .content_chatlog article.is_showTweet .originalTweetArea .log_detail.is_showTweet ~ .action_area .editbox,
  #app .chatPage .content_chatlog article.is_showTweet .replyTweetArea .is_showTweet ~ .action_area .editbox {
    border-left: none;
  }
  #app .myPage .content_chatlog article.is_showReactionTweet .originalTweetArea .log_detail.is_showReactionTweet .reaction_data .popover,
  #app .myPage .content_chatlog article.is_showReactionTweet .replyTweetArea .log_detail.is_showReactionTweet .reaction_data .popover,
  #app .chatPage .content_chatlog article.is_showReactionTweet .originalTweetArea .log_detail.is_showReactionTweet .reaction_data .popover,
  #app .chatPage .content_chatlog article.is_showReactionTweet .replyTweetArea .log_detail.is_showReactionTweet .reaction_data .popover {
    position: fixed;
    display: block;
    top: auto;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translatex(-50%);
            transform: translatex(-50%);
    min-width: 90vw;
    padding: 5px 3px 0px 3px;
    box-shadow: 0 0 3px var(--gray_20);
  }
  #app .myPage .imageTweetArea article.is_showTweet .main_tweet .log_detail.is_showTweet ~ .action_area,
  #app .myPage .imageTweetArea article.is_showTweet .replyTweetArea .log_detail.is_showTweet ~ .action_area,
  #app .chatPage .imageTweetArea article.is_showTweet .main_tweet .log_detail.is_showTweet ~ .action_area,
  #app .chatPage .imageTweetArea article.is_showTweet .replyTweetArea .log_detail.is_showTweet ~ .action_area {
    display: -webkit-box;
    display: flex;
    bottom: 50%;
  }
  #app .myPage .imageTweetArea article.is_showReactionTweet .main_tweet .log_detail.is_showReactionTweet .reaction_data .popover,
  #app .myPage .imageTweetArea article.is_showReactionTweet .replyTweetArea .log_detail.is_showReactionTweet .reaction_data .popover,
  #app .chatPage .imageTweetArea article.is_showReactionTweet .main_tweet .log_detail.is_showReactionTweet .reaction_data .popover,
  #app .chatPage .imageTweetArea article.is_showReactionTweet .replyTweetArea .log_detail.is_showReactionTweet .reaction_data .popover {
    position: fixed;
    display: block;
    top: auto;
    bottom: 50%;
    left: 50%;
    -webkit-transform: translatex(-50%);
            transform: translatex(-50%);
    min-width: 85vw;
    padding: 5px 3px 0px 3px;
    box-shadow: 0 0 3px var(--gray_20);
  }
  #app .myPage .action_area ul,
  #app .chatPage .action_area ul {
    display: -webkit-box;
    display: flex;
    margin-bottom: 0;
    -webkit-box-align: center;
            align-items: center;
    -webkit-align-items: center;
  }
  #app .myPage .action_area li,
  #app .chatPage .action_area li {
    margin: 0 3px;
    font-size: 2rem;
  }
  #app .myPage .action_area .reactionbox,
  #app .chatPage .action_area .reactionbox {
    border-bottom: solid 1px var(--gray_20);
    padding: 15px 5px 5px;
    justify-content: space-around;
    flex-wrap: wrap;
    border-right: none;
  }
  #app .myPage .action_area .reactionbox li,
  #app .chatPage .action_area .reactionbox li {
    position: relative;
    max-width: 60px;
    padding: 0 15px;
    margin-bottom: 30px;
  }
  #app .myPage .action_area .reactionbox .tip,
  #app .chatPage .action_area .reactionbox .tip {
    display: inline-block;
    position: absolute;
    bottom: -100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: auto;
    -webkit-animation: none;
            animation: none;
  }
  #app .myPage .action_area .reactionbox .tip .tip_inner,
  #app .chatPage .action_area .reactionbox .tip .tip_inner {
    background-color: transparent;
    font-size: 0.6875rem;
    width: 60px;
    padding: 0;
  }
  #app .myPage .action_area ul.reactionbox:before,
  #app .chatPage .action_area ul.reactionbox:before {
    content: "リアクション";
    color: #fff;
    font-size: 0.5625rem;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--gray_60);
    padding: 0px 5px;
    border-radius: 10px 0;
  }
  #app .myPage .action_area .reactionbox span,
  #app .chatPage .action_area .reactionbox span {
    width: 35px;
    height: 30px;
    margin: 0 0 5px 0;
  }
  #app .myPage .action_area .btn_reaction,
  #app .chatPage .action_area .btn_reaction {
    padding: 0px 3px;
    font-size: 1.25rem;
    display: block;
    line-height: 30px;
    padding: 0;
    margin: 0px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    border: solid 1px #fff;
    background-color: var(--gray_60);
  }
  #app .myPage .action_area .btn_reaction i,
  #app .myPage .action_area .btn_reaction svg,
  #app .chatPage .action_area .btn_reaction i,
  #app .chatPage .action_area .btn_reaction svg {
    display: none;
  }
  #app .myPage .action_area .btn_reaction:after,
  #app .chatPage .action_area .btn_reaction:after {
    content: "＋";
    font-weight: bold;
    font-size: 1.125rem;
    display: block;
  }
  #app .myPage .action_area .editbox,
  #app .chatPage .action_area .editbox {
    padding-top: 10px;
    flex-wrap: wrap;
    -webkit-box-pack: center;
            justify-content: center;
  }
  #app .myPage .action_area .editbox li,
  #app .myPage .action_area .editbox > a,
  #app .chatPage .action_area .editbox li,
  #app .chatPage .action_area .editbox > a {
    font-size: 1.25rem;
    padding: 0 5px;
    margin: 10px 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    -webkit-align-items: center;
    width: 33%;
    max-width: 95px;
    text-align: center;
    background-color: transparent;
    border: none;
    position: relative;
  }
  #app .myPage .action_area .editbox > a li,
  #app .chatPage .action_area .editbox > a li {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  #app .myPage .action_area .editbox li:before,
  #app .chatPage .action_area .editbox li:before {
    content: "";
    display: block;
    line-height: 50px;
    margin: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    border: solid 1px #fff;
    background-color: var(--gray_60);
    position: absolute;
    top: 0;
  }
  #app .myPage .action_area .editbox i,
  #app .myPage .action_area .editbox svg,
  #app .chatPage .action_area .editbox i,
  #app .chatPage .action_area .editbox svg {
    display: block;
    line-height: 50px;
    padding: 0;
    margin: 0px;
    width: 22px;
    height: 50px;
    color: #fff;
    fill: #fff;
    z-index: 1;
  }
  #app .myPage .action_area .editbox svg.fa-bookmark,
  #app .chatPage .action_area .editbox svg.fa-bookmark {
    width: 15px;
  }
  #app .myPage .action_area .editbox .tip,
  #app .chatPage .action_area .editbox .tip {
    display: block;
    width: auto;
    line-height: 0;
    padding: 0;
    position: static;
    -webkit-animation: none;
            animation: none;
    margin-top: 8px;
  }
  #app .myPage .action_area .editbox .tip .show_pc,
  #app .chatPage .action_area .editbox .tip .show_pc {
    display: none;
  }
  #app .myPage .action_area .editbox .tip .show_sp,
  #app .chatPage .action_area .editbox .tip .show_sp {
    display: inline-block;
  }
  #app .myPage .action_area .editbox svg.fa-trash-alt + .tip .tip_inner,
  #app .chatPage .action_area .editbox svg.fa-trash-alt + .tip .tip_inner {
    color: var(--red_sub);
  }
  #app .myPage .action_area .editbox svg.fa-trash-alt path,
  #app .chatPage .action_area .editbox svg.fa-trash-alt path {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  #app .myPage .action_area .editbox .tip_inner,
  #app .chatPage .action_area .editbox .tip_inner {
    display: inline;
    background-color: transparent;
    font-size: 0.6875rem;
    white-space: nowrap;
  }
  #app .myPage .action_area .editbox .tip_inner:after,
  #app .chatPage .action_area .editbox .tip_inner:after {
    display: none;
  }
  #app .myPage .action_area .editbox svg.fa-copy path,
  #app .chatPage .action_area .editbox svg.fa-copy path {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
@media screen and (max-width: 376px) {
  #app .myPage,
  #app .chatPage {
    /* 返信元へ戻るボタン */
  }
  #app .myPage #replyModal .modal-header,
  #app .chatPage #replyModal .modal-header {
    -webkit-box-align: start;
            align-items: flex-start;
  }
  #app .myPage #replyModal .btn_return_wrap,
  #app .chatPage #replyModal .btn_return_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: start;
            align-items: flex-start;
  }
  #app .myPage #replyModal .btn_return,
  #app .chatPage #replyModal .btn_return {
    margin-top: 5px;
    margin-left: 0;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが768px以上  リアクション（PC）*/
    /* ツールチップ表示 */
  }
  #app .myPage .action_area,
  #app .chatPage .action_area {
    position: absolute;
    right: 20px;
    top: 100%;
    background-color: #fff;
    padding: 5px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 1px 2px var(--gray_20);
    display: none;
    z-index: 10;
  }
  #app .myPage article .action_area:first-child,
  #app .chatPage article .action_area:first-child {
    top: -33px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0px -1px 2px var(--gray_20);
  }
  #app .myPage article .action_area:first-child .reactionbox,
  #app .chatPage article .action_area:first-child .reactionbox {
    display: none;
  }
  #app .myPage article .action_area:first-child .editbox,
  #app .chatPage article .action_area:first-child .editbox {
    padding-left: 0;
  }
  #app .myPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .action_area,
  #app .myPage .tweetArea .main_tweet:hover .action_area,
  #app .myPage .content_chatlog article:not(.is_delete).is_showAction .action_area,
  #app .chatPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .action_area,
  #app .chatPage .tweetArea .main_tweet:hover .action_area,
  #app .chatPage .content_chatlog article:not(.is_delete).is_showAction .action_area {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: stretch;
            align-items: stretch;
  }
  #app .myPage .content_chatlog .is_to .action_area,
  #app .chatPage .content_chatlog .is_to .action_area {
    background-color: var(--mint_bg01);
  }
  #app .myPage .content_chatlog .is_all .action_area,
  #app .chatPage .content_chatlog .is_all .action_area {
    background-color: var(--orange_bg);
  }
  #app .myPage .content_chatlog.is_book .action_area,
  #app .chatPage .content_chatlog.is_book .action_area {
    margin-right: 10px;
  }
  #app .myPage .content_chatlog .is_replyToMe .action_area,
  #app .chatPage .content_chatlog .is_replyToMe .action_area {
    background-color: var(--mint_bg01);
  }
  #app .myPage .action_area ul,
  #app .chatPage .action_area ul {
    display: -webkit-box;
    display: flex;
    margin-bottom: 0;
    -webkit-box-align: center;
            align-items: center;
    -webkit-align-items: center;
  }
  #app .myPage .action_area .reactionbox,
  #app .chatPage .action_area .reactionbox {
    font-size: 1.25rem;
    justify-content: space-around;
  }
  #app .myPage .action_area li,
  #app .chatPage .action_area li {
    margin: 0 4px;
    cursor: pointer;
    position: relative;
  }
  #app .myPage .action_area li:hover,
  #app .myPage .content_chatlog .log_userthumb .btn:hover,
  #app .chatPage .action_area li:hover,
  #app .chatPage .content_chatlog .log_userthumb .btn:hover {
    opacity: 0.8 !important;
    filter: alpha(opacity=80);
  }
  #app .myPage .action_area .reactionbox li,
  #app .chatPage .action_area .reactionbox li {
    margin: 0;
  }
  #app .myPage .action_area .reactionbox li.replyBtn,
  #app .chatPage .action_area .reactionbox li.replyBtn {
    margin-left: 5px;
  }
  #app .myPage .action_area .reactionbox li:hover .tip,
  #app .chatPage .action_area .reactionbox li:hover .tip {
    display: block;
    bottom: -160%;
  }
  #app .myPage .action_area .reactionbox li:hover .fr-emoticon,
  #app .myPage #imgTweetModal .main_tweet .action_area .reactionbox li:hover .fr-emoticon,
  #app .chatPage .action_area .reactionbox li:hover .fr-emoticon,
  #app .chatPage #imgTweetModal .main_tweet .action_area .reactionbox li:hover .fr-emoticon {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    display: block;
    margin-top: -5px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }
  #app .myPage .action_area .reactionbox li.replyBtn:hover .tip,
  #app .chatPage .action_area .reactionbox li.replyBtn:hover .tip {
    bottom: -63%;
  }
  #app .myPage .action_area li i,
  #app .myPage .action_area li svg,
  #app .chatPage .action_area li i,
  #app .chatPage .action_area li svg {
    font-size: 0.875rem;
    width: 14px;
    fill: var(--gray_50);
    margin-left: 0;
  }
  #app .myPage .action_area .btn,
  #app .chatPage .action_area .btn {
    padding: 0px 3px;
    color: var(--gray_50);
    border: solid 1px var(--gray_20);
    background-color: var(--gray_5);
  }
  #app .myPage .action_area .btn_reaction i,
  #app .myPage .action_area .btn_reaction svg,
  #app .chatPage .action_area .btn_reaction i,
  #app .chatPage .action_area .btn_reaction svg {
    margin-left: 3px;
    display: block;
    margin-top: 4px;
    float: left;
    margin-bottom: 3px;
  }
  #app .myPage .action_area .btn_reaction:after,
  #app .chatPage .action_area .btn_reaction:after {
    content: "＋";
    font-weight: bold;
    font-size: 0.6875rem;
    display: block;
    float: right;
  }
  #app .myPage .action_area .editbox,
  #app .chatPage .action_area .editbox {
    padding-left: 5px;
  }
  #app .myPage .action_area .editbox a,
  #app .chatPage .action_area .editbox a {
    /* user-frontで必要 */
    opacity: 1;
  }
  #app .myPage .action_area .editbox li,
  #app .chatPage .action_area .editbox li {
    line-height: 21px;
    padding: 0 5px;
  }
  #app .myPage .action_area .editbox li .tip,
  #app .chatPage .action_area .editbox li .tip {
    width: 90px;
    left: -33px;
  }
  #app .myPage .action_area .editbox li .tip.tip_copy,
  #app .chatPage .action_area .editbox li .tip.tip_copy {
    width: 160px;
    left: -68px;
  }
  #app .myPage .action_area .editbox li .tip .show_pc,
  #app .chatPage .action_area .editbox li .tip .show_pc {
    display: block;
  }
  #app .myPage .action_area .editbox li .tip .show_sp,
  #app .chatPage .action_area .editbox li .tip .show_sp {
    display: none;
  }
  #app .myPage .action_area .editbox li:hover .tip,
  #app .chatPage .action_area .editbox li:hover .tip {
    bottom: -110%;
    display: block;
  }
  #app .myPage #chat_log .action_area .editbox li:hover .tip,
  #app .chatPage #chat_log .action_area .editbox li:hover .tip {
    bottom: -110%;
    display: block;
  }
  #app .myPage .is_singleLog .action_area li:hover .tip,
  #app .myPage .action_area .editbox .btn_book_del:hover .tip,
  #app .chatPage .is_singleLog .action_area li:hover .tip,
  #app .chatPage .action_area .editbox .btn_book_del:hover .tip {
    width: 130px;
    display: -webkit-box;
    display: flex;
    z-index: 10;
    left: -54px;
    -webkit-box-pack: center;
            justify-content: center;
  }
  #app .myPage .action_area .editbox .btn_book_del:hover .tip_copy,
  #app .chatPage .action_area .editbox .btn_book_del:hover .tip_copy {
    width: 180px;
    left: -77px;
  }
  #app .myPage .action_area .editbox .btn_book_del:hover .tip_copy .show_pc,
  #app .chatPage .action_area .editbox .btn_book_del:hover .tip_copy .show_pc {
    display: block;
  }
  #app .myPage .action_area .editbox .btn_book_del:hover .tip_copy .show_sp,
  #app .chatPage .action_area .editbox .btn_book_del:hover .tip_copy .show_sp {
    display: none;
  }
  #app .myPage .is_singleLog .action_area li:hover .tip_copy,
  #app .chatPage .is_singleLog .action_area li:hover .tip_copy {
    width: 160px;
    left: -68px;
  }
  #app .myPage .is_singleLog .action_area li:hover .tip_copy .show_pc,
  #app .chatPage .is_singleLog .action_area li:hover .tip_copy .show_pc {
    display: block;
  }
  #app .myPage .is_singleLog .action_area li:hover .tip_copy .show_sp,
  #app .chatPage .is_singleLog .action_area li:hover .tip_copy .show_sp {
    display: none;
  }
  #app .myPage .content_chatlog .dec_head.btn_book_del:hover .tip,
  #app .chatPage .content_chatlog .dec_head.btn_book_del:hover .tip {
    display: block;
    right: 0;
    left: auto;
    width: 110px;
    top: 15px;
    z-index: 999;
  }
  #app .myPage .content_chatlog .dec_head.btn_book_del .tip .tip_inner:after,
  #app .chatPage .content_chatlog .dec_head.btn_book_del .tip .tip_inner:after {
    text-align: right;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  #app .myPage .action_area .reactionbox,
  #app .chatPage .action_area .reactionbox {
    border-right: none;
    border-bottom: solid 1px var(--gray_20);
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
  #app .myPage .action_area .editbox,
  #app .chatPage .action_area .editbox {
    padding: 0;
  }
}
@media screen and (min-width: 1001px) {
  #app .myPage .content_chatlog:not(.is_mobile) article:not(.is_delete):hover .action_area,
  #app .myPage .tweetArea .main_tweet:hover .action_area,
  #app .myPage .content_chatlog:not(.is_mobile) article:not(.is_delete).is_showAction .action_area,
  #app .chatPage .content_chatlog:not(.is_mobile) article:not(.is_delete):hover .action_area,
  #app .chatPage .tweetArea .main_tweet:hover .action_area,
  #app .chatPage .content_chatlog:not(.is_mobile) article:not(.is_delete).is_showAction .action_area {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
  }
  #app .myPage .action_area .reactionbox,
  #app .chatPage .action_area .reactionbox {
    border-bottom: none;
    padding-right: 5px;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
#app .myPage .log_detail .reaction_data_wrap,
#app .chatPage .log_detail .reaction_data_wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
          align-items: flex-end;
  flex-wrap: wrap;
}
#app .myPage .log_detail .reaction_data,
#app .chatPage .log_detail .reaction_data {
  display: -webkit-box;
  display: flex;
  margin: 5px 10px 0px 0;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  #app .myPage .log_detail .reaction_data,
  #app .chatPage .log_detail .reaction_data {
    margin: 5px 10px 0 0;
    max-width: 80%;
  }
  #app .myPage .log_detail .reaction_data li:first-of-type button .tip,
  #app .chatPage .log_detail .reaction_data li:first-of-type button .tip {
    left: -60px;
  }
  #app .myPage .log_detail .reaction_data li:first-of-type button .tip .tip_inner::after,
  #app .chatPage .log_detail .reaction_data li:first-of-type button .tip .tip_inner::after {
    -webkit-transform: translateX(-15px);
            transform: translateX(-15px);
  }
  #app .myPage .log_detail .reaction_data .tip,
  #app .chatPage .log_detail .reaction_data .tip {
    left: -78px;
  }
}
#app .myPage .log_detail .reaction_data li,
#app .chatPage .log_detail .reaction_data li {
  margin: 8px 5px 0 0;
  position: relative;
}
#app .myPage .log_detail .reaction_data li > .btn,
#app .chatPage .log_detail .reaction_data li > .btn {
  font-size: 0.6875rem;
  padding: 3px 8px 3px 6px;
  border: solid 1px #ccd4e0;
  background: #fff;
  border-radius: 20px;
  position: relative;
  height: 25px;
  display: -webkit-box;
  display: flex;
  display: -webkit-flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  -webkit-align-items: center;
}
#app .myPage .log_detail .reaction_data li > .btn:hover,
#app .chatPage .log_detail .reaction_data li > .btn:hover {
  background-color: var(--mint_bg01);
  border: solid 1px var(--mint_main);
  position: relative;
  opacity: 1;
  filter: alpha(opacity=100);
}
#app .myPage .log_detail .reaction_data .btn.is_myAct,
#app .chatPage .log_detail .reaction_data .btn.is_myAct {
  color: var(--blue_main);
  border: solid 1px var(--blue_main);
  background-color: var(--gray_5);
}
#app .myPage .log_detail .reaction_data .fr-emoticon,
#app .chatPage .log_detail .reaction_data .fr-emoticon {
  width: 17px;
  height: 17px;
  margin: 0 2px 0 1px;
}
#app .myPage .log_detail .reaction_data .btn .count,
#app .chatPage .log_detail .reaction_data .btn .count {
  font-weight: normal;
}
#app .myPage .log_detail .reaction_data .btn.is_myAct .count,
#app .chatPage .log_detail .reaction_data .btn.is_myAct .count {
  font-weight: bold;
}
#app .myPage .log_detail .reaction_data .is_actList.btn,
#app .chatPage .log_detail .reaction_data .is_actList.btn {
  padding-right: 7px;
}
#app .myPage .log_detail .reaction_data .is_actList.btn svg,
#app .myPage .log_detail .reaction_data .is_actList.btn i,
#app .chatPage .log_detail .reaction_data .is_actList.btn svg,
#app .chatPage .log_detail .reaction_data .is_actList.btn i {
  color: var(--gray_20);
  font-size: 0.875rem;
  margin: 0 1px;
}
#app .myPage .log_detail .reaction_data .is_actList.btn:hover svg,
#app .myPage .log_detail .reaction_data .is_actList.btn:hover i,
#app .chatPage .log_detail .reaction_data .is_actList.btn:hover svg,
#app .chatPage .log_detail .reaction_data .is_actList.btn:hover i {
  color: var(--gray_40);
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user {
  display: none;
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab {
  display: -webkit-box;
  display: flex;
  border-bottom: solid 1px var(--gray_10);
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li {
  font-size: 0.6875rem;
  margin: 0 3px;
  padding: 3px 5px;
  display: -webkit-box;
  display: flex;
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li:hover,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li:hover {
  cursor: pointer;
  background-color: var(--gray_5);
  border-radius: 3px 3px 0 0;
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li.current,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li.current {
  border-bottom: solid 3px var(--blue_main);
  margin-bottom: -1px;
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list ul,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list ul {
  display: none;
  margin: 5px 0;
  padding: 0 5px 35px;
  max-height: 150px;
  overflow: auto;
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list ul:first-of-type,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list ul:first-of-type {
  display: block;
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list li,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list li {
  display: -webkit-box;
  display: flex;
  margin: 3px 0;
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list img,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
#app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list .username,
#app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list .username {
  display: block;
  font-size: 0.8125rem;
  line-height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  max-width: 240px;
}
@media screen and (min-width: 768px) {
  #app .myPage article.is_showReactionTweet .log_detail.is_showReactionTweet .reaction_data .popover.is_reaction_user,
  #app .chatPage article.is_showReactionTweet .log_detail.is_showReactionTweet .reaction_data .popover.is_reaction_user {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  #app .myPage .content_chatlog.is_tweet #log_outline .itembox .reaction_data .popover.is_reaction_user,
  #app .myPage #replyTweetModal .reaction_data .popover.is_reaction_user,
  #app .chatPage .content_chatlog.is_tweet #log_outline .itembox .reaction_data .popover.is_reaction_user,
  #app .chatPage #replyTweetModal .reaction_data .popover.is_reaction_user {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 25;
  }
  #app .myPage .content_chatlog.is_tweet #log_outline .itembox .reaction_data .popover.is_reaction_user .arrow,
  #app .myPage #replyTweetModal .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage .content_chatlog.is_tweet #log_outline .itembox .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage #replyTweetModal .reaction_data .popover.is_reaction_user .arrow {
    right: auto;
    left: 6px;
  }
  #app .myPage .content_chatlog.is_tweet #log_outline .itembox div:first-of-type .reaction_data .popover.is_reaction_user,
  #app .myPage #replyTweetModal div:first-of-type .reaction_data .popover.is_reaction_user,
  #app .chatPage .content_chatlog.is_tweet #log_outline .itembox div:first-of-type .reaction_data .popover.is_reaction_user,
  #app .chatPage #replyTweetModal div:first-of-type .reaction_data .popover.is_reaction_user {
    top: 35px;
    left: 0px;
    bottom: auto;
  }
  #app .myPage .content_chatlog.is_tweet #log_outline .itembox div:first-of-type .reaction_data .popover.is_reaction_user .arrow,
  #app .myPage #replyTweetModal div:first-of-type .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage .content_chatlog.is_tweet #log_outline .itembox div:first-of-type .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage #replyTweetModal div:first-of-type .reaction_data .popover.is_reaction_user .arrow {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    top: -8px;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが 767px まで　※スマホ表示*/
  }
  #app .myPage .content_chatlog article.is_showReaction .log_detail .reaction_data .popover.is_reaction_user,
  #app .chatPage .content_chatlog article.is_showReaction .log_detail .reaction_data .popover.is_reaction_user {
    min-width: 90vw;
    position: fixed;
    bottom: 20px;
    left: 5vw;
    top: auto;
    z-index: 1 !important;
    padding: 5px 3px 0px 3px;
    box-shadow: 0 0 3px var(--gray_20);
    display: block;
  }
  #app .myPage .log_detail .reaction_data li > .btn,
  #app .chatPage .log_detail .reaction_data li > .btn {
    height: 28px;
  }
  #app .myPage .log_detail .reaction_data .is_actList.btn,
  #app .chatPage .log_detail .reaction_data .is_actList.btn {
    padding-right: 10px;
    padding: 0px 8px 0 8px;
  }
  #app .myPage .log_detail .reaction_data .is_actList.btn svg,
  #app .myPage .log_detail .reaction_data .is_actList.btn i,
  #app .chatPage .log_detail .reaction_data .is_actList.btn svg,
  #app .chatPage .log_detail .reaction_data .is_actList.btn i {
    font-size: 0.875rem;
    margin: 0 2px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .arrow {
    display: none;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab {
    overflow-x: auto;
    overflow-y: hidden;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li {
    font-size: 0.75rem;
    margin: 0 5px;
    padding: 5px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li .fr-emoticon,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .reaction_tab li .fr-emoticon {
    width: 17px;
    height: 17px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list ul,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list ul {
    height: 25vh;
    max-height: 25vh;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0 5px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list li,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list li {
    margin: 7px 0;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list .rounded-circle,
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list .user_proficon,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list .rounded-circle,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list .user_proficon {
    width: 25px;
    height: 25px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list .username,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list .username {
    font-size: 0.9375rem;
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが768px以上　※PC表示*/
    /* リアクション数が少ない時 */
  }
  #app .myPage .log_detail .reaction_data .btn:hover .tip,
  #app .chatPage .log_detail .reaction_data .btn:hover .tip {
    display: block;
  }
  #app .myPage .log_detail .reaction_data .btn .tip_inner,
  #app .chatPage .log_detail .reaction_data .btn .tip_inner {
    font-size: 0.6875rem;
    font-weight: normal;
  }
  #app .myPage .content_chatlog article.is_showReaction > div > .log_detail .reaction_data .popover.is_reaction_user,
  #app .chatPage .content_chatlog article.is_showReaction > div > .log_detail .reaction_data .popover.is_reaction_user {
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    min-width: 180px;
    top: 35px;
    bottom: auto;
    left: auto;
    padding: 5px 3px;
    display: block;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .arrow,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .arrow {
    right: auto;
    left: 6px;
  }
  #app .myPage .reaction_data div:empty + div:empty + div:empty ~ li .popover.is_reaction_user,
  #app .chatPage .reaction_data div:empty + div:empty + div:empty ~ li .popover.is_reaction_user {
    right: -140px !important;
    left: auto;
  }
  #app .myPage .reaction_data div:empty + div:empty + div:empty ~ li .popover.is_reaction_user .arrow,
  #app .chatPage .reaction_data div:empty + div:empty + div:empty ~ li .popover.is_reaction_user .arrow {
    right: 145px;
    left: auto;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list a,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list a {
    position: relative;
    flex-shrink: 0;
    min-width: 25px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list li a:hover,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list li a:hover {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list li a:hover img,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list li a:hover img {
    opacity: 0.7 !important;
    filter: alpha(opacity=70) !important;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list a:hover .tip,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list a:hover .tip {
    display: block;
    margin-left: -3px;
    left: 0;
    text-align: left;
    width: 100px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list .tip_inner:after,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list .tip_inner:after {
    text-align: left;
    padding-left: 3px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list li:first-child a:hover .tip,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list li:first-child a:hover .tip {
    bottom: -70px;
  }
  #app .myPage .log_detail .reaction_data .popover.is_reaction_user .user_list li:first-child .tip_inner:after,
  #app .chatPage .log_detail .reaction_data .popover.is_reaction_user .user_list li:first-child .tip_inner:after {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
    margin-top: -24px;
  }
}
#app .myPage .is_singleLog .content_chatlog #log_outline,
#app .chatPage .is_singleLog .content_chatlog #log_outline {
  padding-top: 44px;
}
@media screen and (max-width: 767px) {
  #app .myPage .is_singleLog .content_chatlog #log_outline,
  #app .chatPage .is_singleLog .content_chatlog #log_outline {
    min-height: 600px;
    padding-top: 0;
  }
}
#app .myPage .is_singleLog .content_chatlog .guide_text,
#app .chatPage .is_singleLog .content_chatlog .guide_text {
  margin: 16px 12px;
  font-size: 0.8125rem;
}
#app .myPage .is_singleLog .content_chatlog .guide_text.is_hidden,
#app .chatPage .is_singleLog .content_chatlog .guide_text.is_hidden {
  display: none;
}
@media screen and (max-width: 580px) {
  #app .myPage .is_singleLog .content_chatlog .guide_text,
  #app .chatPage .is_singleLog .content_chatlog .guide_text {
    margin: 12px;
  }
}
#app .myPage .is_singleLog .content_chatlog .btn_filter,
#app .chatPage .is_singleLog .content_chatlog .btn_filter {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .is_singleLog .content_chatlog .btn_filter,
  #app .chatPage .is_singleLog .content_chatlog .btn_filter {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.6875rem;
    min-width: 6rem;
    box-sizing: border-box;
    padding: 6px 10px;
    font-weight: normal;
    margin-left: 5px;
  }
  #app .myPage .is_singleLog .content_chatlog .btn_filter i,
  #app .myPage .is_singleLog .content_chatlog .btn_filter svg,
  #app .chatPage .is_singleLog .content_chatlog .btn_filter i,
  #app .chatPage .is_singleLog .content_chatlog .btn_filter svg {
    display: inline-block;
    font-size: 18px;
    margin-left: 5px;
    vertical-align: middle;
  }
  #app .myPage .is_singleLog .content_chatlog .btn_filter.is_active i,
  #app .myPage .is_singleLog .content_chatlog .btn_filter.is_active svg,
  #app .chatPage .is_singleLog .content_chatlog .btn_filter.is_active i,
  #app .chatPage .is_singleLog .content_chatlog .btn_filter.is_active svg {
    display: none;
  }
  #app .myPage .is_singleLog .content_chatlog .btn_filter.is_active .btn_filter_txt::after,
  #app .chatPage .is_singleLog .content_chatlog .btn_filter.is_active .btn_filter_txt::after {
    content: "✕";
    margin-left: 5px;
  }
}
#app .myPage .is_singleLog .content_chatlog .filter_userPost,
#app .chatPage .is_singleLog .content_chatlog .filter_userPost {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .is_singleLog .content_chatlog .filter_userPost,
  #app .chatPage .is_singleLog .content_chatlog .filter_userPost {
    display: none;
  }
  #app .myPage .is_singleLog .content_chatlog .filter_userPost.is_show,
  #app .chatPage .is_singleLog .content_chatlog .filter_userPost.is_show {
    display: block;
    padding: 0 10px;
  }
}
#app .myPage .is_singleLog .content_chatlog .filter_select select,
#app .chatPage .is_singleLog .content_chatlog .filter_select select {
  width: 73.3333333333vw;
  height: 33px;
  font-size: 14px;
  margin-right: 5px;
}
#app .myPage .is_singleLog .content_chatlog .filter_select input,
#app .chatPage .is_singleLog .content_chatlog .filter_select input {
  font-size: 0.6875rem;
  width: 26.6666666667vw;
}
#app .myPage .is_singleLog .content_chatlog .baloon_box,
#app .chatPage .is_singleLog .content_chatlog .baloon_box {
  padding: 15px 10px;
  border-radius: 0.25rem;
  position: relative;
  word-break: break-all;
  border: var(--gray_50) 1px solid;
}
#app .myPage .is_singleLog .content_chatlog .baloon_box::before,
#app .chatPage .is_singleLog .content_chatlog .baloon_box::before {
  content: "";
  position: absolute;
  top: -19px;
  right: 5.3333333333vw;
  border: 10px solid transparent;
  border-bottom: 10px solid #fff;
  z-index: 2;
}
#app .myPage .is_singleLog .content_chatlog .baloon_box::after,
#app .chatPage .is_singleLog .content_chatlog .baloon_box::after {
  content: "";
  position: absolute;
  top: -21px;
  right: 5.3333333333vw;
  border: 10px solid transparent;
  border-bottom: 10px solid var(--gray_50);
  z-index: 1;
}
@media screen and (max-width: 580px) {
  #app .myPage .is_singleLog .content_chatlog .baloon_box::before,
  #app .myPage .is_singleLog .content_chatlog .baloon_box::after,
  #app .chatPage .is_singleLog .content_chatlog .baloon_box::before,
  #app .chatPage .is_singleLog .content_chatlog .baloon_box::after {
    right: 10.6666666667vw;
  }
}
#app .myPage .is_singleLog .content_chatlog .filter_msg,
#app .chatPage .is_singleLog .content_chatlog .filter_msg {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .is_singleLog .content_chatlog .filter_msg,
  #app .chatPage .is_singleLog .content_chatlog .filter_msg {
    display: block;
    margin: 10px;
    padding: 10px;
    background-color: var(--orange_bg);
    border-radius: 5px;
    font-size: 0.8125rem;
  }
  #app .myPage .is_singleLog .content_chatlog .filter_msg_link,
  #app .chatPage .is_singleLog .content_chatlog .filter_msg_link {
    text-align: right;
    margin: 0;
  }
}
#app .myPage .is_singleLog .content_chatlog article,
#app .chatPage .is_singleLog .content_chatlog article {
  width: 100%;
  padding: 5px 10px;
  border-top: none;
  flex-wrap: wrap;
}
#app .myPage .is_singleLog .content_chatlog article:first-of-type,
#app .chatPage .is_singleLog .content_chatlog article:first-of-type {
  margin-top: 10px;
}
#app .myPage .is_singleLog .content_chatlog article.timeline:first-of-type,
#app .chatPage .is_singleLog .content_chatlog article.timeline:first-of-type {
  margin-top: 0;
}
#app .myPage .is_singleLog .content_chatlog article > div,
#app .chatPage .is_singleLog .content_chatlog article > div {
  border: solid 1px var(--gray_5);
  border-radius: 5px;
  position: relative;
}
#app .myPage .is_singleLog .content_chatlog article:not(.is_to, .is_all) > div,
#app .chatPage .is_singleLog .content_chatlog article:not(.is_to, .is_all) > div {
  background-color: #fff;
}
#app .myPage .is_singleLog .content_chatlog .log_detail,
#app .chatPage .is_singleLog .content_chatlog .log_detail {
  position: relative;
  width: calc(100% - 45px);
  /* user-frontで必要：ユーザー発言一覧がfront-mockと違う（ユーザーアイコンの有無）
  width: calc(100% - 45px);*/
  display: block;
}
#app .myPage .is_singleLog .content_chatlog.is_myComment .log_detail,
#app .chatPage .is_singleLog .content_chatlog.is_myComment .log_detail {
  width: 100%;
}
@media screen and (max-width: 767px) {
  #app .myPage .is_singleLog .content_chatlog article,
  #app .chatPage .is_singleLog .content_chatlog article {
    padding: 0 5px;
  }
}
#app .myPage .is_singleLog .content_chatlog #log_outline .log_title,
#app .chatPage .is_singleLog .content_chatlog #log_outline .log_title {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  max-width: 60%;
  background-color: var(--gray_5);
  border-radius: 5px 5px 0 0;
  padding: 5px 10px;
}
#app .myPage .content_chatlog article:hover .log_title,
#app .chatPage .content_chatlog article:hover .log_title {
  box-shadow: none;
}
#app .myPage .is_singleLog .content_chatlog article > .log_title + div,
#app .chatPage .is_singleLog .content_chatlog article > .log_title + div {
  border-radius: 0 5px 5px 5px;
  padding: 20px 15px 20px 20px;
  margin-top: -1px;
}
#app .myPage .is_singleLog .content_chatlog .log_title .chat_thumb,
#app .chatPage .is_singleLog .content_chatlog .log_title .chat_thumb {
  width: 25px;
  height: 25px;
  text-align: center;
  position: relative;
  margin-bottom: 0;
  margin-left: 3px;
}
#app .myPage .is_singleLog .content_chatlog .log_title .chat_icon,
#app .chatPage .is_singleLog .content_chatlog .log_title .chat_icon {
  width: 25px;
  height: 25px;
}
#app .myPage .is_singleLog .content_chatlog .log_title .chat_name,
#app .chatPage .is_singleLog .content_chatlog .log_title .chat_name {
  margin-bottom: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  color: var(--blue_main);
  font-weight: bold;
  padding-left: 8px;
}
#app .myPage .is_singleLog .content_chatlog .log_title + div .log_userthumb,
#app .chatPage .is_singleLog .content_chatlog .log_title + div .log_userthumb {
  width: 34px;
}
#app .myPage .is_singleLog .content_chatlog .log_title + div .log_userthumb > div,
#app .chatPage .is_singleLog .content_chatlog .log_title + div .log_userthumb > div {
  margin-left: -10px;
}
#app .myPage .is_singleLog .content_chatlog .log_title + div .log_userthumb.is_unicorn > div > a,
#app .chatPage .is_singleLog .content_chatlog .log_title + div .log_userthumb.is_unicorn > div > a {
  width: 34px;
  height: 34px;
}
#app .myPage .is_singleLog .content_chatlog .log_title + div .log_userthumb.is_unicorn .border-gradient,
#app .myPage .is_singleLog .content_chatlog .log_title + div .log_userthumb .user_proficon,
#app .chatPage .is_singleLog .content_chatlog .log_title + div .log_userthumb.is_unicorn .border-gradient,
#app .chatPage .is_singleLog .content_chatlog .log_title + div .log_userthumb .user_proficon {
  width: 30px;
  height: 30px;
}
#app .myPage .is_singleLog .content_chatlog .log_title + div .log_userthumb .popover.is_prof .user_proficon,
#app .chatPage .is_singleLog .content_chatlog .log_title + div .log_userthumb .popover.is_prof .user_proficon {
  width: 70px;
  height: 70px;
}
@media screen and (min-width: 768px) {
  #app .myPage .is_singleLog .content_chatlog .log_title + div .log_userthumb .popover.is_prof .user_proficon,
  #app .chatPage .is_singleLog .content_chatlog .log_title + div .log_userthumb .popover.is_prof .user_proficon {
    width: 80px;
    height: 80px;
  }
}
#app .myPage .is_singleLog .content_chatlog .post_info time,
#app .chatPage .is_singleLog .content_chatlog .post_info time {
  min-width: 30px;
  text-align: right;
}
#app .myPage .is_singleLog .content_chatlog .log_title + div .post_info time,
#app .chatPage .is_singleLog .content_chatlog .log_title + div .post_info time {
  margin: 0 0 0 auto;
}
#app .myPage .is_singleLog .content_chatlog .log_title:not(.is_active) .filter_undo,
#app .chatPage .is_singleLog .content_chatlog .log_title:not(.is_active) .filter_undo {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .is_singleLog .content_chatlog .log_title .filter_undo span,
  #app .chatPage .is_singleLog .content_chatlog .log_title .filter_undo span {
    display: none;
  }
}
#app .myPage .is_singleLog .content_chatlog .log_title .filter_undo,
#app .chatPage .is_singleLog .content_chatlog .log_title .filter_undo {
  white-space: nowrap;
  margin: 0;
  display: inline-block;
  margin-left: 10px;
  font-size: 0.6875rem;
}
@media screen and (min-width: 768px) {
  #app .myPage .is_singleLog .content_chatlog .log_title:not(.is_active) .chat_name a:hover + .tip,
  #app .chatPage .is_singleLog .content_chatlog .log_title:not(.is_active) .chat_name a:hover + .tip {
    display: block;
    bottom: -50%;
    left: 5%;
  }
}
#app .myPage .is_singleLog .content_chatlog .action_area .editbox,
#app .chatPage .is_singleLog .content_chatlog .action_area .editbox {
  padding-left: 0;
}
@media screen and (min-width: 768px) {
  #app .myPage .is_singleLog .content_chatlog .action_area,
  #app .chatPage .is_singleLog .content_chatlog .action_area {
    right: 42px;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage .is_singleLog .content_chatlog #log_outline .log_title,
  #app .chatPage .is_singleLog .content_chatlog #log_outline .log_title {
    max-width: 80%;
    padding: 7px 5px;
  }
  #app .myPage .is_singleLog .content_chatlog .log_title .chat_thumb,
  #app .chatPage .is_singleLog .content_chatlog .log_title .chat_thumb {
    width: 24px;
    height: 24px;
  }
  #app .myPage .is_singleLog .content_chatlog .log_title .chat_thumb img,
  #app .chatPage .is_singleLog .content_chatlog .log_title .chat_thumb img {
    width: 24px;
    height: 24px;
  }
  #app .myPage .is_singleLog .content_chatlog .log_title .chat_name,
  #app .chatPage .is_singleLog .content_chatlog .log_title .chat_name {
    font-size: 12px;
  }
  #app .myPage .is_singleLog .content_chatlog .action_area,
  #app .chatPage .is_singleLog .content_chatlog .action_area {
    bottom: 120px;
  }
  #app .myPage .is_singleLog .content_chatlog .action_area .editbox li,
  #app .myPage .is_singleLog .content_chatlog .action_area .editbox > a,
  #app .chatPage .is_singleLog .content_chatlog .action_area .editbox li,
  #app .chatPage .is_singleLog .content_chatlog .action_area .editbox > a {
    width: 33.3333333333%;
    max-width: none;
  }
  #app .myPage .is_singleLog .content_chatlog .action_area .editbox .btn_book_del:after,
  #app .chatPage .is_singleLog .content_chatlog .action_area .editbox .btn_book_del:after {
    left: calc(50% - 6px);
  }
}
#app .myPage .content_chatlog article .dec_head.btn_book_del,
#app .chatPage .content_chatlog article .dec_head.btn_book_del {
  width: 25px;
  height: 30px;
  position: absolute;
  border-radius: 0 0 5px 5px;
  font-size: 1.25rem;
  cursor: pointer;
  text-align: center;
  right: 7px;
  top: -3px;
  z-index: 15;
}
#app .myPage .content_chatlog article .btn_book_del i,
#app .myPage .content_chatlog article .btn_book_del svg,
#app .chatPage .content_chatlog article .btn_book_del i,
#app .chatPage .content_chatlog article .btn_book_del svg {
  color: var(--blue_main);
  fill: var(--blue_main);
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog article .btn_book_del i,
  #app .myPage .content_chatlog article .btn_book_del svg,
  #app .chatPage .content_chatlog article .btn_book_del i,
  #app .chatPage .content_chatlog article .btn_book_del svg {
    color: #fff;
    fill: #fff;
  }
}
#app .myPage .content_chatlog article .dec_head.btn_book_del i,
#app .myPage .content_chatlog article .dec_head.btn_book_del svg,
#app .chatPage .content_chatlog article .dec_head.btn_book_del i,
#app .chatPage .content_chatlog article .dec_head.btn_book_del svg {
  color: var(--blue_main);
  fill: var(--blue_main);
  text-shadow: 1px 1px 1px var(--gray_20);
}
#app .myPage .content_chatlog .action_area .editbox .btn_book_del,
#app .chatPage .content_chatlog .action_area .editbox .btn_book_del {
  position: relative;
}
#app .myPage .content_chatlog .action_area .editbox .btn_book_del:after,
#app .chatPage .content_chatlog .action_area .editbox .btn_book_del:after {
  content: "-";
  width: 13px;
  height: 13px;
  display: block;
  text-align: center;
  color: #ffffff;
  line-height: 9px;
  position: absolute;
  z-index: 10;
  font-size: 16px;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog .action_area .editbox .btn_book_del:after,
  #app .chatPage .content_chatlog .action_area .editbox .btn_book_del:after {
    background-color: var(--blue_main);
    border-radius: 50%;
    border: solid 1px #fff;
    top: 17px;
    left: 41px;
  }
  #app .myPage .content_chatlog article .message_linkbox,
  #app .chatPage .content_chatlog article .message_linkbox {
    margin-top: 15px;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage .content_chatlog .action_area .editbox .btn_book_del:after,
  #app .chatPage .content_chatlog .action_area .editbox .btn_book_del:after {
    top: 4px;
    left: 5px;
  }
}
#app .myPage .content_chatlog article .post_text a .btn,
#app .myPage .content_chatlog article .message_linkbox .btn,
#app .chatPage .content_chatlog article .post_text a .btn,
#app .chatPage .content_chatlog article .message_linkbox .btn {
  font-size: 0.6875rem;
  margin: 3px 10px;
  display: inline-block;
  padding: 2px 8px;
}
#app .myPage .content_chatlog article .post_text .btn-group a.btn,
#app .chatPage .content_chatlog article .post_text .btn-group a.btn {
  margin: 0;
  color: #fff;
}
#app .myPage .content_chatlog article .post_text .btn-group a.btn:hover,
#app .chatPage .content_chatlog article .post_text .btn-group a.btn:hover {
  opacity: 0.7 !important;
}
#app .myPage .content_chatlog #log_outline > div:nth-of-type(-n + 3) article .chatPage_tweet .popover.is_tweet,
#app .chatPage .content_chatlog #log_outline > div:nth-of-type(-n + 3) article .chatPage_tweet .popover.is_tweet {
  top: 30px;
  left: -25px;
}
#app .myPage .content_chatlog #log_outline > div:nth-of-type(-n + 3) article .chatPage_tweet .popover.is_tweet .arrow,
#app .chatPage .content_chatlog #log_outline > div:nth-of-type(-n + 3) article .chatPage_tweet .popover.is_tweet .arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  top: -8px;
  left: 10px;
}
#app .myPage .sortBtnSP,
#app .chatPage .sortBtnSP {
  display: none;
}
#app .myPage .content_chatlog.is_tweet article,
#app .chatPage .content_chatlog.is_tweet article {
  position: relative;
}
#app .myPage .content_chatlog.is_tweet article:first-of-type,
#app .chatPage .content_chatlog.is_tweet article:first-of-type {
  margin-top: 0;
}
#app .myPage .content_chatlog.is_tweet article > div,
#app .chatPage .content_chatlog.is_tweet article > div {
  flex-wrap: wrap;
}
#app .myPage .content_chatlog.is_tweet #log_outline,
#app .chatPage .content_chatlog.is_tweet #log_outline {
  padding-bottom: 10px;
  position: relative;
  z-index: auto;
  overscroll-behavior: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet #log_outline,
  #app .chatPage .content_chatlog.is_tweet #log_outline {
    padding-bottom: 155px;
  }
}
#app .myPage .content_chatlog.is_tweet #log_outline:has(.myTweet.current) .info_prGuideline,
#app .chatPage .content_chatlog.is_tweet #log_outline:has(.myTweet.current) .info_prGuideline {
  display: block;
}
#app .myPage .content_chatlog.is_tweet .sticky-top,
#app .chatPage .content_chatlog.is_tweet .sticky-top {
  background-color: #fff;
  z-index: 989;
}
#app .myPage .content_chatlog.is_tweet .tab li:not(.current) a,
#app .chatPage .content_chatlog.is_tweet .tab li:not(.current) a {
  color: var(--navy_main);
}
#app .myPage .content_chatlog.is_tweet .tab li a:hover,
#app .chatPage .content_chatlog.is_tweet .tab li a:hover {
  text-decoration: none !important;
}
#app .myPage .content_chatlog.is_tweet .tab li.current a:hover,
#app .chatPage .content_chatlog.is_tweet .tab li.current a:hover {
  opacity: 1;
  pointer-events: none;
  cursor: default;
}
#app .myPage .content_chatlog.is_tweet .sort_area,
#app .chatPage .content_chatlog.is_tweet .sort_area {
  padding: 0;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
          align-items: center;
  position: relative;
  border-top: none;
  min-height: auto;
  /* 検索ワードを入力 */
  /*検索中に×を表示(768px以下) のみ*/
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area,
  #app .chatPage .content_chatlog.is_tweet .sort_area {
    flex-wrap: nowrap;
    gap: 0 16px;
    margin-bottom: 0px;
    padding: 0 12px 12px;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .headerSearch,
#app .chatPage .content_chatlog.is_tweet .sort_area .headerSearch {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  max-width: 400px;
  margin: 0 12px;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .headerSearch,
  #app .chatPage .content_chatlog.is_tweet .sort_area .headerSearch {
    max-width: initial;
    margin: 0;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .headerSearch input[type=search],
#app .chatPage .content_chatlog.is_tweet .sort_area .headerSearch input[type=search] {
  border-radius: 4px 0 0 4px;
  height: 33px;
  border-right: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .headerSearch input[type=search],
  #app .chatPage .content_chatlog.is_tweet .sort_area .headerSearch input[type=search] {
    height: 35px;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .searchSelectSP,
  #app .chatPage .content_chatlog.is_tweet .sort_area .searchSelectSP {
    display: none;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .btn_headerSearch,
#app .chatPage .content_chatlog.is_tweet .sort_area .btn_headerSearch {
  flex-shrink: 0;
  border: 1px solid var(--navy_main);
  width: 40px;
  background-color: var(--navy_main);
  height: 33px;
  border-radius: 0 4px 4px 0;
  color: #fff;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .btn_headerSearch,
  #app .chatPage .content_chatlog.is_tweet .sort_area .btn_headerSearch {
    height: 35px;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .delete_icon,
#app .chatPage .content_chatlog.is_tweet .sort_area .delete_icon {
  display: none;
}
#app .myPage .content_chatlog.is_tweet .sort_area .form-check,
#app .chatPage .content_chatlog.is_tweet .sort_area .form-check {
  margin-bottom: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  white-space: nowrap;
}
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  padding: 7px 10px 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView,
  #app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView {
    flex-wrap: wrap;
    width: calc(100% + 25px);
    margin-left: -15px;
    margin-right: -15px;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap,
  #app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap {
    width: 100%;
    margin-bottom: 12px;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap > a,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap > a {
  display: inline-block;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  margin-right: 5px;
}
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap > a .user_proficon,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap > a .user_proficon {
  width: 30px;
  height: 30px;
}
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap > span a,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .parsonInfoWrap > span a {
  margin-right: 4px;
}
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .hiddenReplyTweetWrap,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .hiddenReplyTweetWrap {
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .hiddenReplyTweetWrap,
  #app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .hiddenReplyTweetWrap {
    padding-left: 0;
    margin-left: 7px;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .lift_parsonTweetList,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .lift_parsonTweetList {
  margin-left: 4px;
}
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .lift_parsonTweetList i,
#app .myPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .lift_parsonTweetList svg,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .lift_parsonTweetList i,
#app .chatPage .content_chatlog.is_tweet .sort_area .parsonTweetListView .lift_parsonTweetList svg {
  margin-right: 5px;
}
#app .myPage .content_chatlog.is_tweet .sort_area .form-check input[type=checkbox],
#app .chatPage .content_chatlog.is_tweet .sort_area .form-check input[type=checkbox] {
  top: 0;
}
#app .myPage .content_chatlog.is_tweet .sort_area .filter_check,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_check {
  margin-left: 15px;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .filter_check,
  #app .chatPage .content_chatlog.is_tweet .sort_area .filter_check {
    display: none;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .filter_control,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_control {
  border: none;
  background: initial;
  display: inline-block;
  margin-left: auto;
  padding: 0 15px;
  font-size: 13px;
  color: var(--blue_main);
  font-weight: bold;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  cursor: pointer;
}
#app .myPage .content_chatlog.is_tweet .sort_area .filter_control .close,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_control .close {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_area .filter_control,
  #app .chatPage .content_chatlog.is_tweet .sort_area .filter_control {
    display: none;
  }
}
@media (any-hover: hover) {
  #app .myPage .content_chatlog.is_tweet .sort_area .filter_control:hover,
  #app .chatPage .content_chatlog.is_tweet .sort_area .filter_control:hover {
    opacity: 0.7;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_area .filter_control.is_active .open,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_control.is_active .open {
  display: none;
}
#app .myPage .content_chatlog.is_tweet .sort_area .filter_control.is_active .close,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_control.is_active .close {
  display: inline-block;
}
#app .myPage .content_chatlog.is_tweet .sort_area .filter_control.is_active i,
#app .myPage .content_chatlog.is_tweet .sort_area .filter_control.is_active svg,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_control.is_active i,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_control.is_active svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#app .myPage .content_chatlog.is_tweet .sort_area .filter_control i,
#app .myPage .content_chatlog.is_tweet .sort_area .filter_control svg,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_control i,
#app .chatPage .content_chatlog.is_tweet .sort_area .filter_control svg {
  width: 10px;
  font-size: 12px;
  fill: var(--blue_main);
}
#app .myPage .content_chatlog.is_tweet .sort_bottom_area,
#app .chatPage .content_chatlog.is_tweet .sort_bottom_area {
  height: 0;
  padding: 0 5px;
  overflow: hidden;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  width: 100%;
  margin-top: 12px;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .sort_bottom_area,
  #app .chatPage .content_chatlog.is_tweet .sort_bottom_area {
    display: none;
  }
}
#app .myPage .content_chatlog.is_tweet .sort_bottom_area.is_active,
#app .chatPage .content_chatlog.is_tweet .sort_bottom_area.is_active {
  height: auto;
  padding: 0 5px 5px 5px;
}
#app .myPage .content_chatlog.is_tweet .sort_bottom_area .form_wrap,
#app .chatPage .content_chatlog.is_tweet .sort_bottom_area .form_wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  flex-wrap: wrap;
  padding: 3px 10px;
}
#app .myPage .content_chatlog.is_tweet .sort_bottom_area .form_group,
#app .chatPage .content_chatlog.is_tweet .sort_bottom_area .form_group {
  margin-right: 20px;
  padding: 5px 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage .content_chatlog.is_tweet .sort_bottom_area .form_group label,
#app .chatPage .content_chatlog.is_tweet .sort_bottom_area .form_group label {
  font-weight: bold;
  margin-right: 5px;
  white-space: nowrap;
}
#app .myPage .content_chatlog.is_tweet .sort_bottom_area .form_group select,
#app .chatPage .content_chatlog.is_tweet .sort_bottom_area .form_group select {
  min-width: 120px;
  font-size: 12px;
  height: 34px;
}
@media screen and (max-width: 820px) {
  #app .myPage .content_chatlog.is_tweet .sort_bottom_area .form_group select,
  #app .chatPage .content_chatlog.is_tweet .sort_bottom_area .form_group select {
    min-width: 110px;
  }
}
#app .myPage .content_chatlog.is_tweet .info_prGuideline,
#app .chatPage .content_chatlog.is_tweet .info_prGuideline {
  display: none;
  background-color: var(--navy_bg01);
  padding: 4px 0 4px 10px;
  color: var(--blue_main);
  line-height: 1.5;
  font-size: 0.75rem;
}
#app .myPage .content_chatlog.is_tweet .info_prGuideline .link_modal,
#app .chatPage .content_chatlog.is_tweet .info_prGuideline .link_modal {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  opacity: 1;
}
@media (any-hover: hover) {
  #app .myPage .content_chatlog.is_tweet .info_prGuideline .link_modal:hover,
  #app .chatPage .content_chatlog.is_tweet .info_prGuideline .link_modal:hover {
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
}
#app .myPage .content_chatlog.is_tweet .info_prGuideline i,
#app .myPage .content_chatlog.is_tweet .info_prGuideline svg,
#app .chatPage .content_chatlog.is_tweet .info_prGuideline i,
#app .chatPage .content_chatlog.is_tweet .info_prGuideline svg {
  color: var(--navy_main);
  fill: var(--navy_main);
}
#app .myPage .content_chatlog.is_tweet .modal-body .icon,
#app .chatPage .content_chatlog.is_tweet .modal-body .icon {
  width: 16px;
  fill: var(--navy_main);
}
#app .myPage .content_chatlog.is_tweet .hiddenMyReplyWrap,
#app .chatPage .content_chatlog.is_tweet .hiddenMyReplyWrap {
  display: none;
  -webkit-box-align: center;
          align-items: center;
  padding: 18px 0 15px 20px;
  border-bottom: 1px solid var(--gray_20_a);
  margin-bottom: 0;
  font-size: 0.875rem;
}
#app .myPage .content_chatlog.is_tweet .hiddenMyReplyWrap input[type=checkbox],
#app .chatPage .content_chatlog.is_tweet .hiddenMyReplyWrap input[type=checkbox] {
  top: 0;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog.is_tweet .hiddenMyReplyWrap,
  #app .chatPage .content_chatlog.is_tweet .hiddenMyReplyWrap {
    padding: 18px 0 18px 20px;
  }
}
#app .myPage .content_chatlog.is_tweet .guide_text svg,
#app .chatPage .content_chatlog.is_tweet .guide_text svg {
  width: 16px;
  fill: var(--navy_main);
}
#app .myPage .content_chatlog.is_tweet .no_search_result,
#app .chatPage .content_chatlog.is_tweet .no_search_result {
  font-size: 16px;
  text-align: center;
  margin-top: 55px;
  padding: 0 20px;
}
#app .myPage .content_chatlog.is_tweet .itembox,
#app .chatPage .content_chatlog.is_tweet .itembox {
  display: none;
}
#app .myPage .content_chatlog.is_tweet .itembox.is_show,
#app .chatPage .content_chatlog.is_tweet .itembox.is_show {
  display: block;
  margin-top: 15px;
}
#app .myPage .content_chatlog.is_tweet .itembox .post_text,
#app .chatPage .content_chatlog.is_tweet .itembox .post_text {
  /* white-space: pre-wrap; user-frontのみ*/
}
#app .myPage .content_chatlog.is_tweet .search_text_box.is_open + .itembox.is_show,
#app .chatPage .content_chatlog.is_tweet .search_text_box.is_open + .itembox.is_show {
  margin-top: 0;
}
#app .myPage .content_chatlog.is_tweet .tweetInputArea,
#app .chatPage .content_chatlog.is_tweet .tweetInputArea {
  container-type: inline-size;
  container-name: tweetInputArea;
}
#app .myPage .content_chatlog.is_tweet textarea.tweetInput,
#app .chatPage .content_chatlog.is_tweet textarea.tweetInput {
  width: 100%;
  font-size: 0.875rem !important;
  min-height: 80px;
}
#app .myPage .content_chatlog.is_tweet .tweetBtnArea,
#app .chatPage .content_chatlog.is_tweet .tweetBtnArea {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: justify;
          justify-content: space-between;
  margin-top: 5px;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
}
@container tweetInputArea (max-width: 585px) {
  #app .myPage .content_chatlog.is_tweet .tweetBtnArea,
  #app .chatPage .content_chatlog.is_tweet .tweetBtnArea {
    flex-wrap: wrap;
  }
}
#app .myPage .content_chatlog.is_tweet .tweetBtnArea label[for=btn_img],
#app .chatPage .content_chatlog.is_tweet .tweetBtnArea label[for=btn_img] {
  padding: 8px 4px 8px 10px;
}
#app .myPage .content_chatlog.is_tweet .tweetBtnArea label[for=btn_img] i,
#app .myPage .content_chatlog.is_tweet .tweetBtnArea label[for=btn_img] svg,
#app .chatPage .content_chatlog.is_tweet .tweetBtnArea label[for=btn_img] i,
#app .chatPage .content_chatlog.is_tweet .tweetBtnArea label[for=btn_img] svg {
  width: 16px;
  font-size: 16px;
}
#app .myPage .content_chatlog.is_tweet .tweetBtnArea .btn.is_disable,
#app .chatPage .content_chatlog.is_tweet .tweetBtnArea .btn.is_disable {
  opacity: 0.7;
  pointer-events: none;
}
#app .myPage .content_chatlog.is_tweet .tweetBtnArea .wordCount,
#app .chatPage .content_chatlog.is_tweet .tweetBtnArea .wordCount {
  font-size: 0.6875rem;
  margin: 0 0 0 auto;
}
@container tweetInputArea (max-width: 585px) {
  #app .myPage .content_chatlog.is_tweet .tweetBtnArea .wordCount,
  #app .chatPage .content_chatlog.is_tweet .tweetBtnArea .wordCount {
    width: calc(100% - 290px);
    text-align: right;
  }
}
@container tweetInputArea (max-width: 400px) {
  #app .myPage .content_chatlog.is_tweet .tweetBtnArea .wordCount,
  #app .chatPage .content_chatlog.is_tweet .tweetBtnArea .wordCount {
    width: calc(100% - 160px);
    -webkit-box-ordinal-group: 4;
            order: 3;
  }
}
#app .myPage .content_chatlog.is_tweet .tweetBtnArea .wordCount span,
#app .chatPage .content_chatlog.is_tweet .tweetBtnArea .wordCount span {
  display: inline-block;
  margin-right: 2px;
}
#app .myPage .content_chatlog.is_tweet .tweetBtnArea .tweetBtn,
#app .chatPage .content_chatlog.is_tweet .tweetBtnArea .tweetBtn {
  padding: 5px 24px;
}
#app .myPage .content_chatlog.is_tweet .btn_tweetInput,
#app .chatPage .content_chatlog.is_tweet .btn_tweetInput {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 80px;
  height: 80px;
  padding: 0;
  z-index: 30;
  box-shadow: 1px 1px 3px var(--gray_50);
}
#app .myPage .content_chatlog.is_tweet .btn_tweetInput .icon_tweet,
#app .chatPage .content_chatlog.is_tweet .btn_tweetInput .icon_tweet {
  fill: #fff;
  width: 50px;
}
#app .myPage .content_chatlog.is_tweet .btn_tweetInput .icon_edit,
#app .chatPage .content_chatlog.is_tweet .btn_tweetInput .icon_edit {
  color: var(--navy_main);
  fill: var(--navy_main);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 18px;
  width: 18px;
}
#app .myPage .content_chatlog.is_tweet .tweetInputArea.is_over .wordCount span,
#app .chatPage .content_chatlog.is_tweet .tweetInputArea.is_over .wordCount span {
  color: var(--red_main);
  font-weight: bold;
}
#app .myPage .content_chatlog.is_tweet .tweetInputArea.is_over .tweetInput,
#app .chatPage .content_chatlog.is_tweet .tweetInputArea.is_over .tweetInput {
  outline-color: var(--red_main);
}
#app .myPage .content_chatlog.is_tweet .tweetInputArea.is_over .tweetBtn,
#app .chatPage .content_chatlog.is_tweet .tweetInputArea.is_over .tweetBtn {
  pointer-events: none;
  opacity: 0.65;
}
#app .myPage .content_chatlog.is_tweet .chatPage_tweet,
#app .chatPage .content_chatlog.is_tweet .chatPage_tweet {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .sortBtnSP,
  #app .chatPage .sortBtnSP {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    font-size: 0.75rem;
    color: #fff;
    background-color: var(--navy_main);
    border-radius: 30px;
    border: none;
    padding: 4px 12px;
  }
  #app .myPage .sortBtnSP i,
  #app .myPage .sortBtnSP svg,
  #app .chatPage .sortBtnSP i,
  #app .chatPage .sortBtnSP svg {
    font-size: 18px;
    width: 18px;
    height: auto;
  }
  #app .myPage .content_chatlog.is_tweet article,
  #app .chatPage .content_chatlog.is_tweet article {
    padding: 0 5px 5px;
  }
  #app .myPage .content_chatlog.is_tweet form.sort_area,
  #app .chatPage .content_chatlog.is_tweet form.sort_area {
    display: none !important;
  }
  #app .myPage .content_chatlog.is_tweet .tab li,
  #app .chatPage .content_chatlog.is_tweet .tab li {
    width: 50%;
    padding: 8px;
  }
  #app .myPage .content_chatlog.is_tweet .btn_tweetInput,
  #app .chatPage .content_chatlog.is_tweet .btn_tweetInput {
    right: 10px;
    bottom: 10px;
    width: 60px;
    height: 60px;
    z-index: 0;
  }
  #app .myPage .content_chatlog.is_tweet .btn_tweetInput .icon_tweet,
  #app .chatPage .content_chatlog.is_tweet .btn_tweetInput .icon_tweet {
    width: 40px;
  }
}
#app .myPage #spSortModal_tweet .modal-header + .modal-body .selectbox,
#app .myPage #spSortModal_folowFolower .modal-header + .modal-body .selectbox,
#app .chatPage #spSortModal_tweet .modal-header + .modal-body .selectbox,
#app .chatPage #spSortModal_folowFolower .modal-header + .modal-body .selectbox {
  border-top: none;
}
#app .myPage #tweetInputModal .info_prGuideline,
#app .chatPage #tweetInputModal .info_prGuideline {
  display: block;
  background-color: var(--navy_bg01);
  padding: 4px 0 4px 10px;
  color: var(--blue_main);
  line-height: 1.5;
  font-size: 0.75rem;
}
#app .myPage #tweetInputModal .info_prGuideline .link_modal,
#app .chatPage #tweetInputModal .info_prGuideline .link_modal {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  opacity: 1;
}
@media (any-hover: hover) {
  #app .myPage #tweetInputModal .info_prGuideline .link_modal:hover,
  #app .chatPage #tweetInputModal .info_prGuideline .link_modal:hover {
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
}
#app .myPage #tweetInputModal .info_prGuideline i,
#app .myPage #tweetInputModal .info_prGuideline svg,
#app .chatPage #tweetInputModal .info_prGuideline i,
#app .chatPage #tweetInputModal .info_prGuideline svg {
  color: var(--navy_main);
  fill: var(--navy_main);
}
#app .myPage #tweetInputModal .modal-body .icon,
#app .chatPage #tweetInputModal .modal-body .icon {
  width: 16px;
  fill: var(--navy_main);
}
#app .myPage .tweetInputArea_wrap,
#app .chatPage .tweetInputArea_wrap {
  display: -webkit-box;
  display: flex;
  margin-top: 30px;
}
#app .myPage .tweetInputArea_wrap div.log_userthumb,
#app .chatPage .tweetInputArea_wrap div.log_userthumb {
  margin-top: 0;
}
#app .myPage .tweetInputArea_wrap .tweetInputArea,
#app .chatPage .tweetInputArea_wrap .tweetInputArea {
  position: relative;
  -webkit-box-flex: 1;
          flex-grow: 1;
}
#app .myPage .tweetInputArea_wrap .tweetInputArea.is_setImage,
#app .chatPage .tweetInputArea_wrap .tweetInputArea.is_setImage {
  position: relative;
}
#app .myPage .tweetInputArea_wrap .tweetInputArea.is_setImage textarea.tweetInput,
#app .chatPage .tweetInputArea_wrap .tweetInputArea.is_setImage textarea.tweetInput {
  padding-bottom: 150px;
}
@media screen and (max-width: 460px) {
  #app .myPage .tweetInputArea_wrap .tweetInputArea.is_setImage textarea.tweetInput,
  #app .chatPage .tweetInputArea_wrap .tweetInputArea.is_setImage textarea.tweetInput {
    padding-bottom: 100px;
  }
}
#app .myPage .tweetInputArea_wrap .tweetInputArea.is_setImage .tweetImageArea,
#app .chatPage .tweetInputArea_wrap .tweetInputArea.is_setImage .tweetImageArea {
  position: absolute;
  bottom: 60px;
  width: calc(100% - 14px);
  margin: 0 7px;
}
@media screen and (max-width: 460px) {
  #app .myPage .tweetInputArea_wrap .tweetInputArea.is_setImage .tweetImageArea,
  #app .chatPage .tweetInputArea_wrap .tweetInputArea.is_setImage .tweetImageArea {
    bottom: 80px;
  }
}
#app .myPage .tweetInputArea_wrap .tweetInputArea.is_setImage .tweetImageArea img,
#app .chatPage .tweetInputArea_wrap .tweetInputArea.is_setImage .tweetImageArea img {
  border: none;
}
#app .myPage .tweetInputArea_wrap .tweetInputArea.is_setImage .tweetImageArea img:hover,
#app .chatPage .tweetInputArea_wrap .tweetInputArea.is_setImage .tweetImageArea img:hover {
  cursor: auto;
  box-shadow: none;
  pointer-events: none;
  -webkit-transition: none;
  transition: none;
  opacity: 1;
}
#app .myPage .tweetInputArea_wrap .tweetInputArea textarea.tweetInput,
#app .chatPage .tweetInputArea_wrap .tweetInputArea textarea.tweetInput {
  min-height: 110px;
}
#app .myPage p span.fr-emoticon,
#app .myPage .content_chatlog .fr-emoticon,
#app .myPage #chat_info .fr-emoticon,
#app .myPage .editor .fr-emoticon,
#app .myPage .main_tweet .fr-emoticon,
#app .chatPage p span.fr-emoticon,
#app .chatPage .content_chatlog .fr-emoticon,
#app .chatPage #chat_info .fr-emoticon,
#app .chatPage .editor .fr-emoticon,
#app .chatPage .main_tweet .fr-emoticon {
  width: 18px;
  background-repeat: no-repeat !important;
  background-size: 100% auto;
  height: 18px;
  margin: 0 3px;
  display: inline-block;
  padding-left: 18px;
  overflow: hidden;
}
#app .myPage p span.fr-emoticon,
#app .chatPage p span.fr-emoticon {
  width: 20px;
}
#app .myPage article .btn_replyCount,
#app .chatPage article .btn_replyCount {
  margin: 8px 5px 0 0;
  border-bottom: solid 1px transparent;
  color: var(--mint_vivid);
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
}
#app .myPage article .btn_replyCount i,
#app .myPage article .btn_replyCount svg,
#app .chatPage article .btn_replyCount i,
#app .chatPage article .btn_replyCount svg {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
#app .myPage article .btn_replyCount .count,
#app .chatPage article .btn_replyCount .count {
  margin-left: 3px;
}
#app .myPage article .btn_replyCount .count .num,
#app .chatPage article .btn_replyCount .count .num {
  padding-right: 2px;
  font-size: 16px;
  font-family: initial;
}
@media screen and (min-width: 768px) {
  #app .myPage,
  #app .chatPage {
    /*　画面サイズが768px以上　※PC表示*/
  }
  #app .myPage article .btn_replyCount:hover,
  #app .chatPage article .btn_replyCount:hover {
    border-bottom: solid 1px var(--mint_vivid);
  }
}
@media screen and (min-width: 768px) {
  #app .myPage .is_singleLog article .reaction_data,
  #app .chatPage .is_singleLog article .reaction_data {
    margin: 5px 10px 0 0;
    max-width: 80%;
  }
  #app .myPage .is_singleLog article .reaction_data li:first-of-type button .tip,
  #app .chatPage .is_singleLog article .reaction_data li:first-of-type button .tip {
    left: -60px;
  }
  #app .myPage .is_singleLog article .reaction_data li:first-of-type button .tip .tip_inner::after,
  #app .chatPage .is_singleLog article .reaction_data li:first-of-type button .tip .tip_inner::after {
    -webkit-transform: translateX(-15px);
            transform: translateX(-15px);
  }
  #app .myPage .is_singleLog article .reaction_data .tip,
  #app .chatPage .is_singleLog article .reaction_data .tip {
    left: -78px;
  }
}
#app .myPage .content_chatlog .originalTweetArea,
#app .chatPage .content_chatlog .originalTweetArea {
  position: relative;
  display: -webkit-box;
  display: flex;
  width: 100%;
}
#app .myPage .content_chatlog .originalTweetArea > article,
#app .chatPage .content_chatlog .originalTweetArea > article {
  width: 100%;
  padding: 0;
}
#app .myPage .content_chatlog .originalTweetArea > article > div,
#app .chatPage .content_chatlog .originalTweetArea > article > div {
  border: none;
  border-radius: 0;
  padding: 0;
  padding-bottom: 20px;
  margin-bottom: -20px;
  background-color: #fff;
}
#app .myPage .content_chatlog .originalTweetArea .log_userthumb,
#app .chatPage .content_chatlog .originalTweetArea .log_userthumb {
  align-self: flex-start;
}
#app .myPage .content_chatlog .originalTweetArea .log_detail .post_info,
#app .chatPage .content_chatlog .originalTweetArea .log_detail .post_info {
  margin-bottom: 10px;
}
#app .myPage .content_chatlog .originalTweetArea .log_detail:has(.post_block) .post_info,
#app .chatPage .content_chatlog .originalTweetArea .log_detail:has(.post_block) .post_info {
  margin: 0;
}
#app .myPage .content_chatlog .originalTweetArea .log_detail:has(.post_block) .post_user,
#app .chatPage .content_chatlog .originalTweetArea .log_detail:has(.post_block) .post_user {
  margin: 0;
}
#app .myPage .content_chatlog .originalTweetArea .log_detail .post_text,
#app .chatPage .content_chatlog .originalTweetArea .log_detail .post_text {
  margin-left: -40px;
  width: calc(100% + 40px) !important;
}
#app .myPage .content_chatlog .originalTweetArea .log_detail .tweetImageArea,
#app .chatPage .content_chatlog .originalTweetArea .log_detail .tweetImageArea {
  margin-left: -40px;
  width: calc(100% + 40px);
}
#app .myPage .content_chatlog .originalTweetArea .log_detail .reaction_data_wrap,
#app .chatPage .content_chatlog .originalTweetArea .log_detail .reaction_data_wrap {
  width: calc(100% + 40px);
  margin-left: -40px;
}
#app .myPage .content_chatlog .originalTweetArea .action_area .editbox,
#app .chatPage .content_chatlog .originalTweetArea .action_area .editbox {
  padding-left: 2px;
}
@media (min-width: 768px) and (max-width: 1000px) {
  #app .myPage .content_chatlog .originalTweetArea .action_area .editbox,
  #app .chatPage .content_chatlog .originalTweetArea .action_area .editbox {
    padding-left: 0;
  }
}
#app .myPage .content_chatlog .originalTweetArea .post_block,
#app .chatPage .content_chatlog .originalTweetArea .post_block {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
}
#app .myPage .content_chatlog .originalTweetArea .post_block .post_text,
#app .chatPage .content_chatlog .originalTweetArea .post_block .post_text {
  font-size: 13px;
  color: var(--gray_50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: initial;
  margin-left: initial;
  width: initial !important;
  -webkit-box-flex: 0;
          flex: 0 1 100%;
}
#app .myPage .content_chatlog .originalTweetArea .post_block .btn_replyCount,
#app .chatPage .content_chatlog .originalTweetArea .post_block .btn_replyCount {
  margin: initial;
  margin-left: 10px;
  white-space: nowrap;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog .originalTweetArea .post_block .btn_replyCount,
  #app .chatPage .content_chatlog .originalTweetArea .post_block .btn_replyCount {
    margin-top: 5px;
  }
}
@media screen and (max-width: 767px) {
  #app .myPage .content_chatlog .originalTweetArea .post_block,
  #app .chatPage .content_chatlog .originalTweetArea .post_block {
    display: block;
  }
}
#app .myPage .content_chatlog .originalTweetArea .is_otherOriginTweet :where(.log_userthumb, .post_info, .etcBtn),
#app .chatPage .content_chatlog .originalTweetArea .is_otherOriginTweet :where(.log_userthumb, .post_info, .etcBtn) {
  opacity: 0.3;
  pointer-events: none;
  cursor: auto;
}
#app .myPage .content_chatlog .originalTweetArea .is_otherOriginTweet :where(.tweetImageArea, .reaction_data),
#app .chatPage .content_chatlog .originalTweetArea .is_otherOriginTweet :where(.tweetImageArea, .reaction_data) {
  display: none;
}
#app .myPage .content_chatlog .originalTweetArea .is_otherOriginTweet .action_area,
#app .chatPage .content_chatlog .originalTweetArea .is_otherOriginTweet .action_area {
  visibility: hidden;
}
#app .myPage .content_chatlog .originalTweetArea .is_otherOriginTweet:not(.is_usermute) .post_text,
#app .chatPage .content_chatlog .originalTweetArea .is_otherOriginTweet:not(.is_usermute) .post_text {
  opacity: 0.3;
  pointer-events: none;
  cursor: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#app .myPage .content_chatlog .originalTweetArea .is_otherOriginTweet:not(.is_usermute) .post_text a,
#app .chatPage .content_chatlog .originalTweetArea .is_otherOriginTweet:not(.is_usermute) .post_text a {
  color: currentColor;
}
@media screen and (min-width: 768px) {
  #app .myPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .originalTweetArea .action_area,
  #app .chatPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .originalTweetArea .action_area {
    display: none;
  }
  #app .myPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .originalTweetArea:hover .action_area,
  #app .chatPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .originalTweetArea:hover .action_area {
    display: -webkit-box;
    display: flex;
  }
}
#app .myPage .replyTweetArea,
#app .chatPage .replyTweetArea {
  position: relative;
  width: 100%;
  border-top: solid 1px var(--gray_5);
  padding-top: 15px;
  margin-top: 20px;
}
#app .myPage .replyTweetArea .replyTitle,
#app .chatPage .replyTweetArea .replyTitle {
  display: inline-block;
  margin-left: 5px;
  color: var(--gray_50);
  font-size: 14px;
  font-weight: bold;
}
#app .myPage .replyTweetArea .replyTitle i,
#app .myPage .replyTweetArea .replyTitle svg,
#app .chatPage .replyTweetArea .replyTitle i,
#app .chatPage .replyTweetArea .replyTitle svg {
  margin-right: 5px;
  font-size: 18px;
  font-weight: normal;
  width: 18px;
}
#app .myPage .replyTweetArea .replyTitle .count,
#app .chatPage .replyTweetArea .replyTitle .count {
  margin-left: 3px;
}
#app .myPage .replyTweetArea .replyTitle .count .num,
#app .chatPage .replyTweetArea .replyTitle .count .num {
  padding-right: 3px;
  font-size: 16px;
}
#app .myPage .replyTweetArea .replyTweetWrap,
#app .chatPage .replyTweetArea .replyTweetWrap {
  margin: 10px 0 0 12px;
  padding-left: 10px;
  border-left: solid 4px var(--gray_5);
}
@media screen and (max-width: 767px) {
  #app .myPage .replyTweetArea .replyTweetWrap,
  #app .chatPage .replyTweetArea .replyTweetWrap {
    margin: 10px 0 0 0;
  }
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet.is_replyToMe,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet.is_replyToMe {
  background-color: var(--mint_bg01);
  margin-inline: -10px;
  padding-inline: 10px;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet.is_replyToMe article > div,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet.is_replyToMe article > div {
  background-color: var(--mint_bg01);
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet article,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet article {
  padding: 0;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet article > div,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet article > div {
  padding: 10px 0 15px 0;
  border: none;
  background-color: #fff;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet article:not(.is_delete):hover > div,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet article:not(.is_delete):hover > div {
  box-shadow: none;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet + .replyTweet article,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet + .replyTweet article {
  border-top: solid 1px var(--gray_5);
  padding-top: 10px;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet article.is_originTweet > div,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet article.is_originTweet > div {
  width: calc(100% + 10px);
  border: solid 2px var(--blue_main);
  padding: 30px 10px 15px 5px;
}
@media screen and (max-width: 767px) {
  #app .myPage .replyTweetArea .replyTweetWrap .replyTweet article.is_originTweet > div,
  #app .chatPage .replyTweetArea .replyTweetWrap .replyTweet article.is_originTweet > div {
    padding: 30px 15px 15px 5px;
  }
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_userthumb,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_userthumb {
  align-self: flex-start;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_info,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_info {
  margin-bottom: 0;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text {
  margin-left: -40px;
  width: calc(100% + 40px) !important;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo {
  position: relative;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
          align-items: center;
  font-size: 11px;
  font-weight: bold;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo .username_wrap,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo .username_wrap {
  position: relative;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo .username_wrap:not(:last-of-type):after,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo .username_wrap:not(:last-of-type):after {
  content: "、";
  font-weight: normal;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo .username_wrap .username,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo .username_wrap .username {
  margin-right: 0;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo .username_wrap .username::after,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .post_text .replyTo .username_wrap .username::after {
  content: "さん";
  display: inline-block;
  margin-left: 3px;
  font-weight: normal;
  color: var(--text_main);
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .tweetImageArea,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .tweetImageArea {
  margin-left: -40px;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .reaction_data_wrap,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet .log_detail .reaction_data_wrap {
  margin-left: -40px;
}
#app .myPage .replyTweetArea .replyTweetWrap .replyTweet:last-of-type > div,
#app .chatPage .replyTweetArea .replyTweetWrap .replyTweet:last-of-type > div {
  padding-bottom: 10px;
}
#app .myPage .replyTweetArea .replyTweet .action_area .editbox,
#app .chatPage .replyTweetArea .replyTweet .action_area .editbox {
  padding-left: 2px;
}
@media (min-width: 768px) and (max-width: 1000px) {
  #app .myPage .replyTweetArea .replyTweet .action_area .editbox,
  #app .chatPage .replyTweetArea .replyTweet .action_area .editbox {
    padding-left: 0;
  }
}
@media screen and (min-width: 768px) {
  #app .myPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .replyTweet .action_area,
  #app .chatPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .replyTweet .action_area {
    display: none;
  }
  #app .myPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .replyTweet:hover .action_area,
  #app .chatPage .content_chatlog:not(.re_logarea) article:not(.is_delete):hover .replyTweet:hover .action_area {
    display: -webkit-box;
    display: flex;
  }
}
#app .myPage .log_detail .post_text ~ .previewTweetArea,
#app .chatPage .log_detail .post_text ~ .previewTweetArea {
  display: block;
  max-width: 850px;
  margin-top: 10px;
  margin-left: -40px;
  width: calc(100% + 40px) !important;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea::after,
#app .chatPage .log_detail .post_text ~ .previewTweetArea::after {
  content: none;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article {
  padding: 0;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div {
  padding: 10px;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_userthumb,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_userthumb {
  width: 30px;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_userthumb .tip,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_userthumb .tip {
  display: none;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_userthumb .user_proficon,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_userthumb .user_proficon {
  width: 25px;
  height: 25px;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_info,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_info {
  margin-bottom: 0;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_info .post_user,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_info .post_user {
  font-size: 12px;
  margin-bottom: 0px;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_info .post_user [class^=userstatus_],
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_info .post_user [class^=userstatus_] {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
@media screen and (max-width: 767px) {
  #app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_info time,
  #app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_info time {
    padding-right: 5px;
  }
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text {
  margin-left: -30px;
  width: calc(100% + 30px) !important;
  font-size: 13px;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text.is_limited,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text.is_limited {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text.is_limited ~ .post_text_moreView,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text.is_limited ~ .post_text_moreView {
  display: inline-block;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text ~ .post_text_moreView,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text ~ .post_text_moreView {
  display: none;
  margin-left: -30px;
  color: var(--blue_main);
  font-size: 13px;
  cursor: pointer;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text ~ .post_text_moreView::after,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text ~ .post_text_moreView::after {
  content: ">";
  font-weight: bold;
  display: inline-block;
  margin-left: 5px;
  font-size: 120%;
  -webkit-transform: scale(1, 0.7) rotate(90deg) translateX(2px);
          transform: scale(1, 0.7) rotate(90deg) translateX(2px);
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text ~ .post_text_moreView:hover,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .post_text ~ .post_text_moreView:hover {
  text-decoration: underline;
  opacity: 0.7;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .tweetImageArea,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .tweetImageArea {
  margin-left: -30px;
  width: calc(100% + 30px);
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .tweetImageArea .tweetImage,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .tweetImageArea .tweetImage {
  max-width: 120px;
  max-height: 80px;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .tweetImageArea .tweetImage .popup,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article > div .log_detail .tweetImageArea .tweetImage .popup {
  pointer-events: none;
}
#app .myPage .log_detail .post_text ~ .previewTweetArea article.is_usermute > div .post_text,
#app .chatPage .log_detail .post_text ~ .previewTweetArea article.is_usermute > div .post_text {
  border: none;
}
#app .myPage .main_tweet .log_detail .post_text ~ .previewTweetArea,
#app .chatPage .main_tweet .log_detail .post_text ~ .previewTweetArea {
  margin-left: 0;
  width: 100% !important;
}
#app .myPage #wrap .previewTweetArea article,
#app .myPage #replyTweetModal .previewTweetArea article,
#app .myPage #imgTweetModal .previewTweetArea article,
#app .chatPage #wrap .previewTweetArea article,
#app .chatPage #replyTweetModal .previewTweetArea article,
#app .chatPage #imgTweetModal .previewTweetArea article {
  border-top: none;
  padding-top: 0;
}
#app .myPage #wrap .previewTweetArea article > div,
#app .myPage #replyTweetModal .previewTweetArea article > div,
#app .myPage #imgTweetModal .previewTweetArea article > div,
#app .chatPage #wrap .previewTweetArea article > div,
#app .chatPage #replyTweetModal .previewTweetArea article > div,
#app .chatPage #imgTweetModal .previewTweetArea article > div {
  background-color: #f4f6fa;
  padding: 20px 15px 15px 15px;
  border-radius: 5px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
#app .myPage #wrap .previewTweetArea article > div:hover,
#app .myPage #replyTweetModal .previewTweetArea article > div:hover,
#app .myPage #imgTweetModal .previewTweetArea article > div:hover,
#app .chatPage #wrap .previewTweetArea article > div:hover,
#app .chatPage #replyTweetModal .previewTweetArea article > div:hover,
#app .chatPage #imgTweetModal .previewTweetArea article > div:hover {
  box-shadow: 0 0 0 3px #d0e1fa;
  cursor: pointer;
}
#app .myPage #wrap .previewTweetArea article > div .log_detail,
#app .myPage #replyTweetModal .previewTweetArea article > div .log_detail,
#app .myPage #imgTweetModal .previewTweetArea article > div .log_detail,
#app .chatPage #wrap .previewTweetArea article > div .log_detail,
#app .chatPage #replyTweetModal .previewTweetArea article > div .log_detail,
#app .chatPage #imgTweetModal .previewTweetArea article > div .log_detail {
  width: calc(100% - 30px);
}
#app .myPage #wrap .previewTweetArea article.is_usermute > div,
#app .myPage #replyTweetModal .previewTweetArea article.is_usermute > div,
#app .myPage #imgTweetModal .previewTweetArea article.is_usermute > div,
#app .chatPage #wrap .previewTweetArea article.is_usermute > div,
#app .chatPage #replyTweetModal .previewTweetArea article.is_usermute > div,
#app .chatPage #imgTweetModal .previewTweetArea article.is_usermute > div {
  background-color: transparent;
  border: solid 1px var(--gray_5);
  border-radius: 5px;
  padding-bottom: 0;
}
#app .myPage #wrap .previewTweetArea article.is_usermute > div:hover,
#app .myPage #replyTweetModal .previewTweetArea article.is_usermute > div:hover,
#app .myPage #imgTweetModal .previewTweetArea article.is_usermute > div:hover,
#app .chatPage #wrap .previewTweetArea article.is_usermute > div:hover,
#app .chatPage #replyTweetModal .previewTweetArea article.is_usermute > div:hover,
#app .chatPage #imgTweetModal .previewTweetArea article.is_usermute > div:hover {
  box-shadow: 0 0 0 0 transparent;
  cursor: auto;
}
#app .myPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article .log_detail,
#app .chatPage #imgTweetModal .imageTweetArea .tweetArea .replyTweetArea .replyTweet .previewTweetArea article .log_detail {
  width: calc(100% - 30px);
}
@media screen and (max-width: 767px) {
  #app .myPage #replyTweetModal,
  #app .chatPage #replyTweetModal {
    padding-top: 0;
    z-index: 20000;
  }
  #app .myPage #replyTweetModal .modal-content,
  #app .chatPage #replyTweetModal .modal-content {
    max-height: 97vh;
  }
}
#app .myPage #replyTweetModal .modal-header .tweetModalFixedTweetLabel,
#app .chatPage #replyTweetModal .modal-header .tweetModalFixedTweetLabel {
  margin-left: 15px;
}
#app .myPage #replyTweetModal .modal-body,
#app .chatPage #replyTweetModal .modal-body {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  max-height: calc(90dvh - 49px);
  padding: 0;
}
@media screen and (max-width: 767px) {
  #app .myPage #replyTweetModal .modal-body,
  #app .chatPage #replyTweetModal .modal-body {
    max-height: calc(97dvh - 49px);
  }
}
#app .myPage #replyTweetModal .modal-body .replyTweetLists,
#app .chatPage #replyTweetModal .modal-body .replyTweetLists {
  position: relative;
  overflow-y: auto;
}
#app .myPage #replyTweetModal .modal-body .replyTweetLists article.tweet_log,
#app .chatPage #replyTweetModal .modal-body .replyTweetLists article.tweet_log {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
}
#app .myPage #replyTweetModal .modal-body .replyTweetLists article.tweet_log > div,
#app .chatPage #replyTweetModal .modal-body .replyTweetLists article.tweet_log > div {
  flex-wrap: wrap;
  background-color: #fff;
  border-top: none;
  padding-bottom: 50px;
}
#app .myPage #replyTweetModal .modal-body .replyTweetLists article.tweet_log .action_area .reactionbox li.replyBtn:hover .tip,
#app .chatPage #replyTweetModal .modal-body .replyTweetLists article.tweet_log .action_area .reactionbox li.replyBtn:hover .tip {
  bottom: -80%;
}
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap {
  background-color: #f4f6fa;
  margin-top: 0;
  padding: 20px 10px 5px 5px;
  border-radius: 0 0 6px 6px;
}
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap {
  position: absolute;
  top: 5px;
  left: 5px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-bottom: 6px;
}
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo {
  position: relative;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  border-radius: 4px;
  background: var(--mint_bg01);
  padding: 1px 4px 1px 1px;
  font-size: 11px;
  font-weight: bold;
}
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .username,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .username {
  margin-right: 0;
  max-width: 11em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .username::after,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .username::after {
  content: "さん";
  display: inline-block;
  margin-left: 3px;
  font-weight: normal;
  color: var(--text_main);
}
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete {
  width: 18px;
  height: 18px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  margin-left: 3px;
  border-radius: 3px;
  color: var(--blue_main);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete i,
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete svg,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete i,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete svg {
  font-size: 13px;
  width: auto;
  height: 13px;
}
#app .myPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete:hover,
#app .chatPage #replyTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete:hover {
  background-color: var(--blue_main);
  color: var(--navy_bg01);
}
@media screen and (max-width: 767px) {
  #app .myPage #editTweetModal,
  #app .chatPage #editTweetModal {
    padding-top: 0;
    z-index: 20000;
  }
  #app .myPage #editTweetModal .modal-content,
  #app .chatPage #editTweetModal .modal-content {
    max-height: 97vh;
  }
}
#app .myPage #editTweetModal .modal-header .tweetModalFixedTweetLabel,
#app .chatPage #editTweetModal .modal-header .tweetModalFixedTweetLabel {
  margin-left: 15px;
}
#app .myPage #editTweetModal .modal-body,
#app .chatPage #editTweetModal .modal-body {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  max-height: calc(90dvh - 49px);
  padding: 0;
}
@media screen and (max-width: 767px) {
  #app .myPage #editTweetModal .modal-body,
  #app .chatPage #editTweetModal .modal-body {
    max-height: calc(97dvh - 49px);
  }
}
#app .myPage #editTweetModal .modal-body .replyTweetLists,
#app .chatPage #editTweetModal .modal-body .replyTweetLists {
  position: relative;
  overflow-y: auto;
}
#app .myPage #editTweetModal .modal-body .replyTweetLists article.tweet_log,
#app .chatPage #editTweetModal .modal-body .replyTweetLists article.tweet_log {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
}
#app .myPage #editTweetModal .modal-body .replyTweetLists article.tweet_log > div,
#app .chatPage #editTweetModal .modal-body .replyTweetLists article.tweet_log > div {
  flex-wrap: wrap;
  background-color: #fff;
  border-top: none;
  padding-bottom: 50px;
}
#app .myPage #editTweetModal .modal-body .replyTweetLists article.tweet_log .action_area .reactionbox li.replyBtn:hover .tip,
#app .chatPage #editTweetModal .modal-body .replyTweetLists article.tweet_log .action_area .reactionbox li.replyBtn:hover .tip {
  bottom: -80%;
}
#app .myPage #editTweetModal .modal-body .replyTweetLists .replyTo,
#app .chatPage #editTweetModal .modal-body .replyTweetLists .replyTo {
  position: relative;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
          align-items: center;
  font-size: 11px;
  font-weight: bold;
}
#app .myPage #editTweetModal .modal-body .replyTweetLists .replyTo .username_wrap,
#app .chatPage #editTweetModal .modal-body .replyTweetLists .replyTo .username_wrap {
  position: relative;
}
#app .myPage #editTweetModal .modal-body .replyTweetLists .replyTo .username_wrap:not(:last-of-type):after,
#app .chatPage #editTweetModal .modal-body .replyTweetLists .replyTo .username_wrap:not(:last-of-type):after {
  content: "、";
  font-weight: normal;
}
#app .myPage #editTweetModal .modal-body .replyTweetLists .replyTo .username_wrap .username,
#app .chatPage #editTweetModal .modal-body .replyTweetLists .replyTo .username_wrap .username {
  margin-right: 0;
}
#app .myPage #editTweetModal .modal-body .replyTweetLists .replyTo .username_wrap .username::after,
#app .chatPage #editTweetModal .modal-body .replyTweetLists .replyTo .username_wrap .username::after {
  content: "さん";
  display: inline-block;
  margin-left: 3px;
  font-weight: normal;
  color: var(--text_main);
}
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap {
  background-color: #f4f6fa;
  margin-top: 0;
  padding: 20px 10px 5px 5px;
  border-radius: 0 0 6px 6px;
}
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap {
  position: absolute;
  top: 5px;
  left: 5px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-bottom: 6px;
}
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo {
  position: relative;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  border-radius: 4px;
  background: var(--mint_bg01);
  padding: 1px 4px 1px 1px;
  font-size: 11px;
  font-weight: bold;
}
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .username,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .username {
  margin-right: 0;
  max-width: 11em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .username::after,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .username::after {
  content: "さん";
  display: inline-block;
  margin-left: 3px;
  font-weight: normal;
  color: var(--text_main);
}
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete {
  width: 18px;
  height: 18px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  margin-left: 3px;
  border-radius: 3px;
  color: var(--blue_main);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete i,
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete svg,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete i,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete svg {
  font-size: 13px;
  width: auto;
  height: 13px;
}
#app .myPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete:hover,
#app .chatPage #editTweetModal .modal-body .tweetInputArea_wrap .tweetInputArea .tagReplyTo_wrap .tagReplyTo .tag_delete:hover {
  background-color: var(--blue_main);
  color: var(--navy_bg01);
}
#app .myPage #editTweetModal.editTweetModal article.is_editTweet,
#app .chatPage #editTweetModal.editTweetModal article.is_editTweet {
  position: relative;
  outline: 1px solid var(--mint_main);
  outline-offset: -1px;
  border-radius: 0 4px 4px 4px;
}
#app .myPage #editTweetModal.editTweetModal article.is_editTweet .is_editTweetTag,
#app .chatPage #editTweetModal.editTweetModal article.is_editTweet .is_editTweetTag {
  position: absolute;
  top: -20px;
  left: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: baseline;
          align-items: baseline;
  line-height: 1.3;
  height: 20px;
  padding: 3px 8px 0;
  border-radius: 3px 3px 0 0;
  background-color: var(--mint_main);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  #app .myPage #editTweetModal.editTweetModal article.is_editTweet .is_editTweetTag,
  #app .chatPage #editTweetModal.editTweetModal article.is_editTweet .is_editTweetTag {
    z-index: 20;
  }
}
#app .myPage #editTweetModal.editTweetModal article.is_editTweet .is_editTweetTag span,
#app .chatPage #editTweetModal.editTweetModal article.is_editTweet .is_editTweetTag span {
  padding: 0 0 0 5px;
  font-size: 0.6875rem;
  cursor: pointer;
}
#app .myPage #editTweetModal.editTweetModal article.is_editTweet .is_editTweetTag span:hover,
#app .chatPage #editTweetModal.editTweetModal article.is_editTweet .is_editTweetTag span:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #app .myPage #editTweetModal.editTweetModal article.is_editTweet > div,
  #app .chatPage #editTweetModal.editTweetModal article.is_editTweet > div {
    background-color: transparent;
  }
}
#app .myPage #editTweetModal.editTweetModal article.is_editTweet .editbox .editTweetBtn,
#app .chatPage #editTweetModal.editTweetModal article.is_editTweet .editbox .editTweetBtn {
  display: none;
}
#app .myPage #editTweetModal.editTweetModal .originalTweetArea article.is_editTweet,
#app .chatPage #editTweetModal.editTweetModal .originalTweetArea article.is_editTweet {
  padding: 24px 16px 16px;
  margin-top: 16px;
}
@media screen and (max-width: 767px) {
  #app .myPage #editTweetModal.editTweetModal .originalTweetArea article.is_editTweet > div:not(.is_editTweetTag),
  #app .chatPage #editTweetModal.editTweetModal .originalTweetArea article.is_editTweet > div:not(.is_editTweetTag) {
    padding-bottom: 10px;
    margin-bottom: -10px;
  }
}
#app .myPage #editTweetModal.editTweetModal .replyTweetArea article.is_editTweet,
#app .chatPage #editTweetModal.editTweetModal .replyTweetArea article.is_editTweet {
  padding: 8px 16px;
}
#app .myPage #editTweetModal.editTweetModal .replyTweetArea article.is_editTweet > div:not(.is_editTweetTag),
#app .chatPage #editTweetModal.editTweetModal .replyTweetArea article.is_editTweet > div:not(.is_editTweetTag) {
  padding-bottom: 8px;
}
#app .myPage #editTweetModal.editTweetModal .tweetImage .popup,
#app .chatPage #editTweetModal.editTweetModal .tweetImage .popup {
  pointer-events: none;
}
#app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap,
#app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap {
  position: relative;
  display: -webkit-box;
  display: flex;
  padding-top: 38px;
  background-color: #e7f7f7;
}
#app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap::before,
#app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap::before {
  content: "つぶやきを編集中";
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  height: 23px;
  padding-inline: 8px;
  background-color: var(--mint_main);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
}
@container tweetInputArea (max-width: 600px) {
  #app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetBtnArea,
  #app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetBtnArea {
    gap: 8px;
  }
}
@container tweetInputArea (max-width: 400px) {
  #app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetBtnArea .wordCount,
  #app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetBtnArea .wordCount {
    -webkit-box-ordinal-group: 2;
            order: 1;
    width: calc(100% - 170px);
    text-align: right;
  }
  #app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetBtnArea .btn-secondary,
  #app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetBtnArea .btn-secondary {
    -webkit-box-ordinal-group: 3;
            order: 2;
    margin-left: 0;
    padding-inline: 8px;
  }
  #app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetBtnArea .btn-primary,
  #app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetBtnArea .btn-primary {
    -webkit-box-ordinal-group: 4;
            order: 3;
    -webkit-box-flex: 1;
            flex-grow: 1;
  }
}
#app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .text_red,
#app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .text_red {
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
#app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetImageArea,
#app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .tweetImageArea {
  margin-block: 4px 8px;
}
#app .myPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .caution_text,
#app .chatPage #editTweetModal.editTweetModal .tweetInputArea_wrap .tweetInputArea .caution_text {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 4px 8px 0 auto;
  font-size: 12px;
}
#app .myPage .action_area .editbox li.is_slash,
#app .chatPage .action_area .editbox li.is_slash {
  position: relative;
}
#app .myPage .action_area .editbox li.is_slash::after,
#app .chatPage .action_area .editbox li.is_slash::after {
  content: "";
  width: 3px;
  height: 20px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 10px;
  background-color: var(--gray_40);
  border: 1px solid var(--gray_5);
  border-radius: 1px;
}
@media screen and (max-width: 767px) {
  #app .myPage .action_area .editbox li.is_slash::after,
  #app .chatPage .action_area .editbox li.is_slash::after {
    width: 4px;
    height: 40px;
    top: 6px;
    left: 45px;
    background-color: #fff;
    border: 1px solid var(--gray_60);
    z-index: 1;
  }
}
#app .myPage .tweetModalFixedTweetLabel,
#app .chatPage .tweetModalFixedTweetLabel {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: bold;
  color: var(--gray_30);
  margin: 0;
}
#app .myPage .originalTweetArea .tweetModalFixedTweetLabel,
#app .chatPage .originalTweetArea .tweetModalFixedTweetLabel {
  margin-top: -10px;
  margin-bottom: 15px;
}
#app .myPage .imageTweetArea .tweetModalFixedTweetLabel,
#app .chatPage .imageTweetArea .tweetModalFixedTweetLabel {
  margin-bottom: 5px;
}
#app .myPage .in_scrollTweet_thumbtack,
#app .chatPage .in_scrollTweet_thumbtack {
  margin-right: 5px;
  color: var(--gray_30);
}
#app .myPage .content_chatlog:not(.re_logarea) article.is_origin > div,
#app .chatPage .content_chatlog:not(.re_logarea) article.is_origin > div {
  background: #fff;
  border: solid 2px var(--blue_main);
  border-radius: 2px;
  margin-left: calc(0.5% - 1px);
  margin-right: calc(0.5% - 1px);
  width: calc(99% + 2px);
  padding-left: 15px;
  padding-top: 30px;
}
#app .myPage .content_chatlog:not(.re_logarea) article.is_origin.is_to > div,
#app .myPage .content_chatlog:not(.re_logarea) article.is_origin.is_all > div,
#app .chatPage .content_chatlog:not(.re_logarea) article.is_origin.is_to > div,
#app .chatPage .content_chatlog:not(.re_logarea) article.is_origin.is_all > div {
  background: transparent;
}
#app .myPage .content_chatlog:not(.re_logarea) article.is_origin .log_userthumb,
#app .chatPage .content_chatlog:not(.re_logarea) article.is_origin .log_userthumb {
  width: 42px;
}
#app .myPage .content_chatlog article.is_originTweet > div,
#app .chatPage .content_chatlog article.is_originTweet > div {
  background: #fff;
  border: solid 2px var(--blue_main);
  border-radius: 5px;
  width: calc(100% - 2px);
  margin: 0 auto;
  padding-left: 15px;
  padding-top: 30px;
}
#app .myPage .content_chatlog:not(.re_logarea) article.is_origin > div::before,
#app .myPage .content_chatlog article.is_originTweet > div::before,
#app .chatPage .content_chatlog:not(.re_logarea) article.is_origin > div::before,
#app .chatPage .content_chatlog article.is_originTweet > div::before {
  position: absolute;
  top: -2px;
  left: 0;
  background-color: var(--blue_main);
  font-size: 10px;
  color: #fff;
  padding: 0 8px;
}
#app .myPage .content_chatlog:not(.re_logarea) article.is_origin > div::before,
#app .chatPage .content_chatlog:not(.re_logarea) article.is_origin > div::before {
  content: "対象のメッセージ";
  border-radius: 0 0 3px 0;
}
#app .myPage .content_chatlog article.is_originTweet > div::before,
#app .chatPage .content_chatlog article.is_originTweet > div::before {
  content: "対象のつぶやき";
  border-radius: 5px 0 3px 0;
}
#app .myPage .chatbot_wrap,
#app .chatPage .chatbot_wrap {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--gray_20);
  box-shadow: 0 0 16px 0 var(--gray_20_a);
  border-radius: 5px;
  background: #fff;
  height: 65vh;
}
@media screen and (max-width: 767px) {
  #app .myPage .chatbot_wrap,
  #app .chatPage .chatbot_wrap {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100dvh;
    max-width: initial;
    max-height: initial;
    z-index: 10001;
  }
}
#app .myPage .chatbot_wrap.is_active,
#app .chatPage .chatbot_wrap.is_active {
  display: block;
}
#app .myPage .chatbot_wrap.is_minimum,
#app .chatPage .chatbot_wrap.is_minimum {
  right: 30px;
  bottom: 30px;
  background: var(--blue_main);
  border: 2px solid #ffffff;
  box-shadow: 0px 0px 12px var(--gray_20);
  border-radius: 8px;
  width: 165px;
  height: 55px;
  cursor: pointer;
}
#app .myPage .chatbot_wrap.is_minimum .wrap_head,
#app .myPage .chatbot_wrap.is_minimum .wrap_body,
#app .chatPage .chatbot_wrap.is_minimum .wrap_head,
#app .chatPage .chatbot_wrap.is_minimum .wrap_body {
  display: none;
}
#app .myPage .chatbot_wrap.is_minimum .minimum_wrap,
#app .chatPage .chatbot_wrap.is_minimum .minimum_wrap {
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  gap: 5px;
  -webkit-transition: opacety 0.2s;
  transition: opacety 0.2s;
}
#app .myPage .chatbot_wrap.is_minimum .minimum_wrap:hover,
#app .chatPage .chatbot_wrap.is_minimum .minimum_wrap:hover {
  opacity: 0.8;
}
#app .myPage .chatbot_wrap.is_minimum .minimum_wrap .minimum_img,
#app .chatPage .chatbot_wrap.is_minimum .minimum_wrap .minimum_img {
  width: 30px;
}
#app .myPage .chatbot_wrap.is_minimum .minimum_wrap .minimum_img img,
#app .chatPage .chatbot_wrap.is_minimum .minimum_wrap .minimum_img img {
  border-radius: 50%;
  border: 1px solid var(--gray_20);
  width: 100%;
}
#app .myPage .chatbot_wrap.is_minimum .minimum_wrap .minimum_text,
#app .chatPage .chatbot_wrap.is_minimum .minimum_wrap .minimum_text {
  font-size: 14px;
  font-weight: bold;
  color: white;
  margin-bottom: initial;
}
#app .myPage .chatbot_wrap.is_minimum .minimum_close,
#app .chatPage .chatbot_wrap.is_minimum .minimum_close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--gray_50);
  width: 28px;
  height: 28px;
  -webkit-transition: -webkit-filter 0.2s;
  transition: -webkit-filter 0.2s;
  transition: filter 0.2s;
  transition: filter 0.2s, -webkit-filter 0.2s;
}
#app .myPage .chatbot_wrap.is_minimum .minimum_close:hover,
#app .chatPage .chatbot_wrap.is_minimum .minimum_close:hover {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
}
#app .myPage .chatbot_wrap.is_minimum .minimum_close i,
#app .myPage .chatbot_wrap.is_minimum .minimum_close svg,
#app .chatPage .chatbot_wrap.is_minimum .minimum_close i,
#app .chatPage .chatbot_wrap.is_minimum .minimum_close svg {
  font-size: 19px;
  width: 12px;
  color: #fff;
  fill: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#app .myPage .chatbot_wrap.is_minimum .wrap_form.is_active,
#app .chatPage .chatbot_wrap.is_minimum .wrap_form.is_active {
  display: none;
}
#app .myPage .chatbot_wrap a:hover,
#app .chatPage .chatbot_wrap a:hover {
  text-decoration: none;
}
#app .myPage .chatbot_wrap .none,
#app .chatPage .chatbot_wrap .none {
  display: none;
}
#app .myPage .chatbot_wrap .minimum_wrap,
#app .myPage .chatbot_wrap .minimum_close,
#app .chatPage .chatbot_wrap .minimum_wrap,
#app .chatPage .chatbot_wrap .minimum_close {
  display: none;
}
#app .myPage .chatbot_wrap .wrap_head,
#app .chatPage .chatbot_wrap .wrap_head {
  padding: 10px 15px;
  border-radius: 5px 5px 0px 0px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
}
#app .myPage .chatbot_wrap .wrap_title,
#app .chatPage .chatbot_wrap .wrap_title {
  font-weight: bold;
  font-size: 14px;
  color: var(--navy_main);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
}
#app .myPage .chatbot_wrap .wrap_title span,
#app .chatPage .chatbot_wrap .wrap_title span {
  font-size: 12px;
}
#app .myPage .chatbot_wrap .wrap_title i,
#app .myPage .chatbot_wrap .wrap_title svg,
#app .chatPage .chatbot_wrap .wrap_title i,
#app .chatPage .chatbot_wrap .wrap_title svg {
  font-size: 20px;
  width: 20px;
  fill: currentColor;
}
#app .myPage .chatbot_wrap .wrap_title .question_icon,
#app .chatPage .chatbot_wrap .wrap_title .question_icon {
  position: relative;
  display: inline-block;
}
#app .myPage .chatbot_wrap .wrap_title .question_icon::before,
#app .chatPage .chatbot_wrap .wrap_title .question_icon::before {
  content: "?";
  font-weight: bold;
  font-size: 10px;
  position: absolute;
  top: -1px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: var(--navy_bg02);
}
#app .myPage .chatbot_wrap .minimum_btn,
#app .chatPage .chatbot_wrap .minimum_btn {
  border: 1px solid var(--blue_main);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  font-weight: bold;
  color: var(--blue_main);
  padding: 4px 8px;
  cursor: pointer;
  -webkit-transition: opacety 0.2s;
  transition: opacety 0.2s;
}
@media screen and (max-width: 767px) {
  #app .myPage .chatbot_wrap .minimum_btn,
  #app .chatPage .chatbot_wrap .minimum_btn {
    display: none;
  }
}
#app .myPage .chatbot_wrap .minimum_btn i,
#app .myPage .chatbot_wrap .minimum_btn svg,
#app .chatPage .chatbot_wrap .minimum_btn i,
#app .chatPage .chatbot_wrap .minimum_btn svg {
  font-size: 12px;
  width: 12x;
  fill: currentColor;
}
#app .myPage .chatbot_wrap .minimum_btn:hover,
#app .chatPage .chatbot_wrap .minimum_btn:hover {
  opacity: 0.7;
}
#app .myPage .chatbot_wrap .closeSp_btn,
#app .chatPage .chatbot_wrap .closeSp_btn {
  display: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .chatbot_wrap .closeSp_btn,
  #app .chatPage .chatbot_wrap .closeSp_btn {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  #app .myPage .chatbot_wrap .closeSp_btn i,
  #app .myPage .chatbot_wrap .closeSp_btn svg,
  #app .chatPage .chatbot_wrap .closeSp_btn i,
  #app .chatPage .chatbot_wrap .closeSp_btn svg {
    font-size: 19px;
    width: 12px;
    color: var(--gray_60);
    fill: var(--gray_60);
  }
}
#app .myPage .chatbot_wrap .wrap_body,
#app .chatPage .chatbot_wrap .wrap_body {
  max-height: calc(65vh - 52px);
  height: 100vh;
  overflow: auto;
  border-radius: 0 0 5px 5px;
  position: relative;
}
@media screen and (max-width: 767px) {
  #app .myPage .chatbot_wrap .wrap_body,
  #app .chatPage .chatbot_wrap .wrap_body {
    max-height: calc(100dvh - 52px);
    height: 100%;
  }
}
#app .myPage .chatbot_wrap .wrap_body.is_formExists,
#app .chatPage .chatbot_wrap .wrap_body.is_formExists {
  padding-bottom: 230px;
}
#app .myPage .chatbot_wrap .wrap_textBlock,
#app .chatPage .chatbot_wrap .wrap_textBlock {
  overflow: auto;
  height: auto;
}
#app .myPage .chatbot_wrap .wrap_main,
#app .chatPage .chatbot_wrap .wrap_main {
  padding: 15px;
  height: auto;
}
#app .myPage .chatbot_wrap .wrap_item,
#app .chatPage .chatbot_wrap .wrap_item {
  margin-bottom: 15px;
  display: none;
}
#app .myPage .chatbot_wrap .wrap_item.is_active,
#app .chatPage .chatbot_wrap .wrap_item.is_active {
  display: block;
}
#app .myPage .chatbot_wrap .chat_answer,
#app .chatPage .chatbot_wrap .chat_answer {
  display: -webkit-box;
  display: flex;
  gap: 5px;
  -webkit-box-pack: start;
          justify-content: flex-start;
}
#app .myPage .chatbot_wrap .answer_img,
#app .chatPage .chatbot_wrap .answer_img {
  width: 45px;
}
#app .myPage .chatbot_wrap .answer_img img,
#app .chatPage .chatbot_wrap .answer_img img {
  width: 100%;
  border-radius: 50%;
  border: 1px solid var(--gray_20);
}
#app .myPage .chatbot_wrap .answer_textBox,
#app .chatPage .chatbot_wrap .answer_textBox {
  padding: 15px;
}
#app .myPage .chatbot_wrap .box,
#app .chatPage .chatbot_wrap .box {
  max-width: 350px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5 0 var(--gray_10_a);
}
@media screen and (max-width: 767px) {
  #app .myPage .chatbot_wrap .box,
  #app .chatPage .chatbot_wrap .box {
    max-width: initial;
    width: calc(90% - 50px);
  }
}
#app .myPage .chatbot_wrap .answer_text,
#app .chatPage .chatbot_wrap .answer_text {
  font-size: 14px;
}
#app .myPage .chatbot_wrap .answer_text:last-child,
#app .chatPage .chatbot_wrap .answer_text:last-child {
  margin-bottom: 0;
}
#app .myPage .chatbot_wrap .answer_text a,
#app .chatPage .chatbot_wrap .answer_text a {
  font-weight: bold;
  text-decoration: underline;
}
#app .myPage .chatbot_wrap .answer_text a:hover,
#app .chatPage .chatbot_wrap .answer_text a:hover {
  text-decoration: underline;
}
#app .myPage .chatbot_wrap .answer_text i,
#app .myPage .chatbot_wrap .answer_text svg,
#app .chatPage .chatbot_wrap .answer_text i,
#app .chatPage .chatbot_wrap .answer_text svg {
  font-size: 14px;
  width: 14x;
  fill: currentColor;
}
#app .myPage .chatbot_wrap .category_lists,
#app .chatPage .chatbot_wrap .category_lists {
  padding: 0 15px;
  margin-left: 50px;
}
#app .myPage .chatbot_wrap .category_list,
#app .chatPage .chatbot_wrap .category_list {
  font-size: 14px;
  font-weight: bold;
  color: var(--blue_main);
  padding: 15px 0;
  cursor: pointer;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
#app .myPage .chatbot_wrap .category_list:hover,
#app .chatPage .chatbot_wrap .category_list:hover {
  opacity: 0.7;
}
#app .myPage .chatbot_wrap .category_list:not(:last-child),
#app .chatPage .chatbot_wrap .category_list:not(:last-child) {
  border-bottom: 1px dotted var(--navy_bg02);
}
#app .myPage .chatbot_wrap .guid_lists,
#app .chatPage .chatbot_wrap .guid_lists {
  padding: 0 15px;
  margin-left: 50px;
}
#app .myPage .chatbot_wrap .guid_head,
#app .chatPage .chatbot_wrap .guid_head {
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0;
}
#app .myPage .chatbot_wrap .guid_list a,
#app .chatPage .chatbot_wrap .guid_list a {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: var(--blue_main);
  padding: 15px 0;
  cursor: pointer;
}
#app .myPage .chatbot_wrap .guid_list a i,
#app .myPage .chatbot_wrap .guid_list a svg,
#app .chatPage .chatbot_wrap .guid_list a i,
#app .chatPage .chatbot_wrap .guid_list a svg {
  font-size: 14px;
  width: 14x;
  fill: currentColor;
}
#app .myPage .chatbot_wrap .guid_list,
#app .chatPage .chatbot_wrap .guid_list {
  border-top: 1px dotted var(--navy_bg02);
}
#app .myPage .chatbot_wrap .chat_select,
#app .chatPage .chatbot_wrap .chat_select {
  margin-left: 50px;
}
#app .myPage .chatbot_wrap .select_main,
#app .chatPage .chatbot_wrap .select_main {
  padding: 15px;
  border-bottom: 1px solid var(--gray_5);
}
#app .myPage .chatbot_wrap .select_button_block,
#app .chatPage .chatbot_wrap .select_button_block {
  padding: 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  gap: 15px;
}
#app .myPage .chatbot_wrap .btn_select,
#app .chatPage .chatbot_wrap .btn_select {
  border: 1px solid var(--blue_main);
  width: 100px;
  padding: 10px;
  color: var(--blue_main);
  text-align: center;
}
#app .myPage .chatbot_wrap .chat_gest,
#app .chatPage .chatbot_wrap .chat_gest {
  box-shadow: 0;
  background: var(--mint_vivid);
  padding: 8px 15px;
  border-radius: 8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 350px;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  #app .myPage .chatbot_wrap .chat_gest,
  #app .chatPage .chatbot_wrap .chat_gest {
    max-width: 75%;
  }
}
#app .myPage .chatbot_wrap .chat_gest_text,
#app .chatPage .chatbot_wrap .chat_gest_text {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
#app .myPage .chatbot_wrap .chat_gest_text:last-child,
#app .chatPage .chatbot_wrap .chat_gest_text:last-child {
  margin-bottom: 0;
}
#app .myPage .chatbot_wrap .chat_btn,
#app .chatPage .chatbot_wrap .chat_btn {
  display: block;
  border: 2px solid var(--blue_main);
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: var(--blue_main);
  text-align: center;
  margin-left: 50px;
}
#app .myPage .chatbot_wrap .wrap_form,
#app .chatPage .chatbot_wrap .wrap_form {
  display: none;
  background: #fff;
  padding: 8px;
  border-top: 1px solid var(--gray_20);
  border-radius: 0 0 5px 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
#app .myPage .chatbot_wrap .wrap_form textarea,
#app .chatPage .chatbot_wrap .wrap_form textarea {
  width: 100%;
  min-height: 160px;
  max-height: 270px;
  border: 2px solid var(--orange_main);
  border-radius: 3px;
  background: rgba(var(--orange_main_rgb), 0.1);
  padding: 8px;
  margin-bottom: 8px;
}
#app .myPage .chatbot_wrap .wrap_form textarea:focus,
#app .chatPage .chatbot_wrap .wrap_form textarea:focus {
  outline: none;
}
#app .myPage .chatbot_wrap .wrap_form .form_btn,
#app .chatPage .chatbot_wrap .wrap_form .form_btn {
  text-align: center;
}
#app .myPage .chatbot_wrap .wrap_form .form_btn input[type=submit],
#app .chatPage .chatbot_wrap .wrap_form .form_btn input[type=submit] {
  width: 100%;
  max-width: 140px;
  display: inline-block;
}
#app .myPage .chatbot_wrap .wrap_form.is_active,
#app .chatPage .chatbot_wrap .wrap_form.is_active {
  display: block;
}
#app .myPage .chatbot_wrap .wrap_form.is_active + .wrap_body,
#app .chatPage .chatbot_wrap .wrap_form.is_active + .wrap_body {
  padding-bottom: 230px;
}
#app .myPage .textarea_resize_wrap,
#app .chatPage .textarea_resize_wrap {
  position: relative;
  width: 100%;
}
#app .myPage .textarea_resize_wrap::before, #app .myPage .textarea_resize_wrap::after,
#app .chatPage .textarea_resize_wrap::before,
#app .chatPage .textarea_resize_wrap::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  #app .myPage .textarea_resize_wrap::before, #app .myPage .textarea_resize_wrap::after,
  #app .chatPage .textarea_resize_wrap::before,
  #app .chatPage .textarea_resize_wrap::after {
    content: none;
  }
}
#app .myPage .textarea_resize_wrap::before,
#app .chatPage .textarea_resize_wrap::before {
  width: 15px;
  height: 15px;
  background: var(--blue_main);
  bottom: 6px;
  right: 0;
  z-index: 2;
}
#app .myPage .textarea_resize_wrap::after,
#app .chatPage .textarea_resize_wrap::after {
  width: 6px;
  height: 10px;
  background: url(./icon_arrows_up_down.svg) no-repeat center center/contain;
  bottom: 8px;
  right: 4px;
  z-index: 3;
}
#app .myPage .file_select_wrap,
#app .chatPage .file_select_wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
#app .myPage .file_select_wrap .file_select_item img,
#app .chatPage .file_select_wrap .file_select_item img {
  width: 100%;
  margin-top: 10px;
}
#app .myPage .file_select_wrap .file_select,
#app .chatPage .file_select_wrap .file_select {
  border-radius: 5px;
  border: 3px dashed var(--gray_20);
  background: var(--gray_10);
  color: var(--gray_60);
  padding: 20px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  gap: 5px;
  position: relative;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
#app .myPage .file_select_wrap .file_select:hover,
#app .chatPage .file_select_wrap .file_select:hover {
  opacity: 0.8;
}
#app .myPage .file_select_wrap .file_select i,
#app .myPage .file_select_wrap .file_select svg,
#app .chatPage .file_select_wrap .file_select i,
#app .chatPage .file_select_wrap .file_select svg {
  font-size: 30px;
  width: 30px;
}
#app .myPage .file_select_wrap .file_select span,
#app .chatPage .file_select_wrap .file_select span {
  font-size: 12px;
}
#app .myPage .file_select_wrap .file_select input[type=file],
#app .chatPage .file_select_wrap .file_select input[type=file] {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#app [id^=imgModal] {
  /* display: block !important; モックではコメントアウト（フロントでは必要） */
}
#app [id^=imgModal].modal-open {
  background-color: var(--gray_50_a);
  z-index: 20001;
}
#app [id^=imgModal] .modal-header {
  border-bottom: none;
}
#app [id^=imgModal] .modal-header .modal-title {
  font-weight: normal;
  font-size: 12px;
}
#app [id^=imgModal] .modal-header .modal-title small {
  margin-left: 20px;
  font-size: 1em;
}
@media screen and (max-width: 991px) {
  #app [id^=imgModal] .modal-header .modal-title small {
    display: block;
    margin-left: 0;
  }
}
#app [id^=imgModal] .modal-body {
  display: -webkit-box;
  display: flex;
  padding: 0 1.5vw 1.5vw;
  -webkit-box-pack: center;
          justify-content: center;
}
#app [id^=imgModal] .modal-body [class^=arrow_] {
  align-self: stretch;
  padding: 0 15px;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#app [id^=imgModal] .modal-body [class^=arrow_].is_disable {
  pointer-events: none;
}
#app [id^=imgModal] .modal-body [class^=arrow_].is_disable i,
#app [id^=imgModal] .modal-body [class^=arrow_].is_disable svg {
  color: var(--gray_5);
  fill: var(--gray_5);
}
#app [id^=imgModal] .modal-body [class^=arrow_] i,
#app [id^=imgModal] .modal-body [class^=arrow_] svg {
  font-size: 25px;
  color: var(--blue_main);
  width: 10px;
  fill: var(--blue_main);
}
#app [id^=imgModal] .modal-body img {
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid var(--gray_20);
  margin: 0;
}
#app [id^=imgModal] .imageAreaWrap {
  display: -webkit-box;
  display: flex;
  -webkit-column-gap: 1.5vw;
     -moz-column-gap: 1.5vw;
          column-gap: 1.5vw;
  width: 100%;
}
@media screen and (max-width: 1199px) {
  #app [id^=imgModal] .imageAreaWrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }
}
#app [id^=imgModal] .imageAreaWrap .imageArea {
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
          flex-grow: 1;
  align-self: center;
}
#app [id^=imgModal] .imageAreaWrap .imageArea > a {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_left,
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: var(--gray_40);
  border-radius: 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  z-index: 10;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_left:hover,
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_right:hover {
  opacity: 0.7;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_left.is_noLink,
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_right.is_noLink {
  pointer-events: none;
  opacity: 0.3;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_left i,
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_left svg,
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_right i,
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_right svg {
  position: absolute;
  width: auto;
  color: #fff;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_left {
  left: 10px;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_left i,
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_left svg {
  left: 50%;
  -webkit-transform: translateX(-60%);
          transform: translateX(-60%);
}
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_right {
  right: 10px;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_right i,
#app [id^=imgModal] .imageAreaWrap .imageArea .arrow_right svg {
  left: 50%;
  -webkit-transform: translateX(-40%);
          transform: translateX(-40%);
}
#app [id^=imgModal] .imageAreaWrap .imageArea [class^=arrow_].is_disable {
  display: none;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .comics_img {
  display: none;
}
#app [id^=imgModal] .imageAreaWrap .imageArea .comics_img.is_active {
  display: block;
}
@media screen and (max-width: 767px) {
  #app [id^=imgModal] .imageAreaWrap .imageArea .comics_img.is_active {
    width: calc(100% - 110px);
  }
}
#app [id^=imgModal] .btn_challengeWork {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 52px;
  padding-inline: 72px;
  margin: -4px auto 12px;
}
@media screen and (max-width: 767px) {
  #app [id^=imgModal] .btn_challengeWork {
    height: 38px;
    padding-inline: 16px;
    margin: 8px auto 16px;
  }
}
@media screen and (max-width: 767px) {
  #app [id^=imgModal] {
    padding-top: 0;
  }
  #app [id^=imgModal] .modal-body {
    justify-content: space-around;
  }
  #app [id^=imgModal] .modal-body [class^=arrow_] {
    position: absolute;
    bottom: -35px;
    background-color: #fff;
    border-radius: 5px;
  }
  #app [id^=imgModal] .modal-body .arrow_left {
    padding: 2px 17px 2px 13px;
    left: 0;
  }
  #app [id^=imgModal] .modal-body .arrow_right {
    padding: 2px 13px 2px 17px;
    right: 0;
  }
  #app [id^=imgModal] .modal-content {
    max-height: 97vh;
  }
}
#app #eventDetailModal.modal_top {
  z-index: 10000;
}
#app #eventDetailModal .event_data {
  border: 1px solid var(--gray_10);
  margin-bottom: 0;
}
#app #eventDetailModal .event_data dt {
  background-color: var(--gray_5);
  padding: 8px 10px;
}
#app #eventDetailModal .event_data dd {
  padding: 15px;
  margin-bottom: 0;
}
#app #eventDetailModal .event_data dd.date {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#app #eventDetailModal .event_data dd a:empty {
  pointer-events: none;
}
#app #eventDetailModal .event_data dd a:empty:before {
  content: "登録されていません";
  color: var(--gray_30);
  font-size: 0.8125rem;
}
#app #eventDetailModal .event_data dd .rounded-circle,
#app #eventDetailModal .event_data dd .user_proficon {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 5px;
}
#app #eventDetailModal .event_data dd .icon {
  display: inline-block;
  width: 30px;
  min-width: 30px;
  height: 30px;
  background-color: var(--gray_20);
  border-radius: 50%;
  text-align: center;
  margin-right: 5px;
}
#app #eventDetailModal .event_data dd .icon svg {
  width: 15px;
  height: auto;
  fill: #fff;
  padding-top: 5px;
}
#app #eventDetailModal .event_data dd .vue-load-image {
  display: inline-block;
}
#app #eventDetailModal .event_data dd.event_text {
  max-height: 25vh;
  overflow: auto;
  padding-bottom: 30px;
  white-space: break-spaces;
}
#app #eventDetailModal .event_data dd .is_online {
  font-size: 90%;
  color: #ce89a2;
  background-color: #ffe5f0;
  padding: 3px 8px;
}
#app #eventDetailModal .event_data dd .is_offline {
  font-size: 90%;
  color: #5ba77e;
  background-color: #d8f0e2;
  padding: 3px 8px;
}
#app #eventDetailModal .event_data dd .is_office {
  font-size: 90%;
  color: #b07c6b;
  background-color: #f9f3be;
  padding: 3px 8px;
}
#app #eventDetailModal .event_data dd .event_detail_title {
  padding-top: 5px;
  font-size: 14px;
}
#app #eventDetailModal .event_data dd .event_detail_title p {
  font-size: 16px;
  font-weight: bold;
}
#app #eventDetailModal .event_data dd .event_detail_title a::after {
  display: inline-block;
  border: solid 1px var(--blue_main);
  font-size: 0.625rem;
  color: var(--blue_main);
  margin: 0 3px;
  height: 20px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 3px;
  content: "このチャットに移動";
}
#app #eventDetailModal .add_favEvent_box {
  border-radius: 3px;
  margin: 20px 0;
  padding: 15px;
}
#app #eventDetailModal .add_favEvent_box .fav_register {
  font-size: 12px;
}
#app #eventDetailModal .add_favEvent_box .fav_cancel {
  color: var(--blue_main);
  font-weight: bold;
  font-size: 12px;
}
#app #eventDetailModal .add_favEvent_box .fav_cancel i {
  font-weight: 600;
}
#app #eventDetailModal .add_favEvent_box .fav_cancel button {
  font-size: inherit;
}
#app #eventDetailModal .modal-footer {
  -webkit-box-pack: center;
          justify-content: center;
  padding-inline: 5px;
}
#app #eventDetailModal .modal-footer .fav {
  border: 1px solid var(--blue_main);
  color: var(--blue_main);
  width: 140px;
  padding-inline: 0;
  position: relative;
  text-align: center;
}
#app #eventDetailModal .modal-footer .fav i {
  font-weight: 400;
}
#app #eventDetailModal .modal-footer .fav svg {
  background: var(--blue_main);
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg class="svg-inline--fa fa-heart" aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"></path></svg>');
          mask-image: url('data:image/svg+xml;charset=UTF-8,<svg class="svg-inline--fa fa-heart" aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"></path></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  margin-right: 5px;
}
#app #eventDetailModal .modal-footer .fav .tip {
  bottom: -32%;
  left: -23%;
}
#app #eventDetailModal .modal-footer .fav .text_registered {
  display: none;
}
@media screen and (max-width: 767px) {
  #app #eventDetailModal .modal-footer .fav {
    width: 40px;
  }
  #app #eventDetailModal .modal-footer .fav .text_normal,
  #app #eventDetailModal .modal-footer .fav .text_registered {
    display: none;
  }
}
#app #eventDetailModal .modal-footer .fav.is_active i {
  font-weight: 900;
}
#app #eventDetailModal .modal-footer .fav.is_active svg {
  background: initial;
  -webkit-mask-image: initial;
          mask-image: initial;
}
@media screen and (max-width: 767px) {
  #app #eventDetailModal .modal-footer .fav.is_active svg {
    margin-right: initial;
  }
}
@media screen and (min-width: 768px) {
  #app #eventDetailModal .modal-footer .fav.is_active .text_normal {
    display: none;
  }
  #app #eventDetailModal .modal-footer .fav.is_active .text_registered {
    display: inline-block;
  }
}
@media screen and (min-width: 768px) {
  #app #eventDetailModal .modal-footer .fav:not(.is_active):hover .tip:not(.is_active) {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  #app #eventDetailModal .modal-footer .fav.is_active:hover .tip.is_active {
    display: block;
  }
}
#app .off_meeting_status {
  font-size: 0.6875rem;
  font-weight: bold;
  margin-right: 5px;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
@media screen and (max-width: 767px) {
  #app #eventDetailModal {
    /* イベント詳細Modal */
    padding-top: 45px;
  }
  #app #eventDetailModal .modal-dialog {
    margin: 0 auto;
  }
  #app #eventDetailModal .modal-content {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  #app #eventDetailModal .modal-header {
    -webkit-box-align: center;
            align-items: center;
  }
  #app #eventDetailModal .modal-dialog-centered {
    min-height: 100%;
  }
}
#app #app #followInfoModal {
  z-index: 20200;
}
#app #profqrModal,
#app #chatQrModal {
  text-align: center;
}
#app #profqrModal .modal-header,
#app #chatQrModal .modal-header {
  -webkit-box-pack: center;
          justify-content: center;
  font-size: 1.0625rem;
}
#app #profqrModal .copy_url,
#app #chatQrModal .copy_url {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  border: 1px solid var(--gray_30);
  border-radius: 5px;
  margin: 40px 0 60px;
  position: relative;
}
#app #profqrModal .copy_url dt,
#app #chatQrModal .copy_url dt {
  min-width: 65px;
  padding: 8px;
  border-radius: 5px 0 0 5px;
}
#app #profqrModal .copy_url dd,
#app #chatQrModal .copy_url dd {
  padding: 5px 5px 5px 10px;
  margin: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  width: calc(100% - 65px);
}
#app #profqrModal .copy_url dd a,
#app #chatQrModal .copy_url dd a {
  display: inline-block;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app #profqrModal .copy_url dd .btn_copy,
#app #chatQrModal .copy_url dd .btn_copy {
  font-size: 0.75rem;
  min-width: 135px;
  padding: 0.25rem 0.5rem;
}
@media screen and (min-width: 768px) {
  #app #profqrModal .pc_hide,
  #app #chatQrModal .pc_hide {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #app #profqrModal .copy_url,
  #app #chatQrModal .copy_url {
    margin: 30px 0 50px;
  }
}
#app #profqrModal {
  z-index: 100200 !important;
}
#app .search_text_box {
  flex-wrap: wrap;
  -webkit-box-pack: justify;
          justify-content: space-between;
  display: none;
  margin-top: 20px;
  padding-right: 25px;
}
#app .search_text_box.is_open {
  display: -webkit-box;
  display: flex;
}
@media screen and (max-width: 767px) {
  #app .search_text_box.is_open {
    gap: 5px 15px;
    margin-bottom: 15px;
  }
}
#app .sort_area.is_follow ~ .search_text_box {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 10px;
}
#app .sort_area.is_follow ~ .search_text_box .search_result_text {
  margin: 0;
}
#app .search_result_text {
  font-size: 16px;
  margin-left: 15px;
}
#app .search_result_text span {
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  #app .search_result_text {
    margin-bottom: initial;
  }
}
#app .filter_reset {
  margin-left: 15px;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
@media screen and (max-width: 767px) {
  #app .filter_reset {
    margin-left: auto;
  }
}
#app .filter_reset i,
#app .filter_reset svg {
  font-size: 12px;
  width: 11px;
  color: var(--blue_main);
  fill: var(--blue_main);
}
#app .filter_reset input[type=reset] {
  color: var(--blue_main);
  font-size: 12px;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  #app .filter_reset:hover {
    opacity: 0.7;
  }
}
#app [id^=spSortModal] .modal-header {
  font-weight: bold;
  padding: 8px 10px;
  -webkit-box-align: center;
          align-items: center;
  -webkit-align-items: center;
}
#app [id^=spSortModal] .search_checkArea {
  margin: 0 auto 10px 10px;
}
#app [id^=spSortModal] .search_noteSP {
  font-size: 11px;
  margin: 10px 10px 0;
  text-indent: -1em;
  padding-left: 1em;
}
#app [id^=spSortModal] .modal-body {
  padding: 0 10px;
}
#app [id^=spSortModal] .selectbox {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding: 10px 0 10px 5px;
  border-top: solid 1px var(--gray_10);
}
#app #spSortModal_comment .modal-body .selectbox {
  border-top: none;
}
#app #spSortModal_comment .modal-content :nth-last-child(2) .selectbox {
  border-top: solid 1px var(--gray_10);
}
#app [id^=spSortModal] .modal-body label {
  width: 30%;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 14px;
}
#app [id^=spSortModal] .modal-footer .reset_sort_wrap {
  width: 100%;
  text-align: right;
}
#app [id^=spSortModal] .modal-footer .reset_sort {
  display: inline-block;
  color: var(--blue_main);
  margin: 0;
  font-size: 12px;
}
#app [id^=spSortModal] .modal-footer .btn {
  width: 55%;
  margin: 10px auto 0;
}
#app [id^=spSortModal] .modal-footer label {
  font-size: 12px;
}
#app .searchSelectSP button {
  display: -webkit-box;
  display: flex;
  justify-content: space-around;
  -webkit-box-align: center;
          align-items: center;
  width: 80px;
  padding: 6px 10px;
  background-color: var(--navy_main);
  border: none;
  border-radius: 30px;
  color: #fff;
  border: solid 1px rgba(255, 255, 255, 0.8);
}
#app .searchSelectSP button .text {
  font-size: 11px;
  line-height: 1.1em;
}
#app .searchSelectSP button .icon {
  font-size: 20px;
  width: 20px;
  height: auto;
  fill: #fff;
}
@media screen and (max-width: 767px) {
  #app #spSortModal_chat .term_sort_block,
  #app #spSortModal_area .term_sort_block {
    padding-block: 20px;
  }
  #app #spSortModal_chat .area_sort_block,
  #app #spSortModal_area .area_sort_block {
    border-top: 1px solid var(--gray_20);
    padding-top: 15px;
  }
  #app #spSortModal_chat .sortTitle,
  #app #spSortModal_area .sortTitle {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
  }
  #app #spSortModal_chat .check_item,
  #app #spSortModal_area .check_item {
    padding-block: 5px;
    padding-left: 10px;
  }
  #app #spSortModal_chat .check_item input,
  #app #spSortModal_area .check_item input {
    margin-right: 0; /* 本番では不要 */
  }
  #app #spSortModal_chat .check_item.is_active,
  #app #spSortModal_area .check_item.is_active {
    background: #f4f6fa;
  }
  #app #spSortModal_chat .check_item.is_active .select_area_wrap,
  #app #spSortModal_area .check_item.is_active .select_area_wrap {
    font-weight: bold;
  }
  #app #spSortModal_chat .check_item.is_active .reselect_btn,
  #app #spSortModal_area .check_item.is_active .reselect_btn {
    display: none;
  }
  #app #spSortModal_chat .select_area_wrap,
  #app #spSortModal_area .select_area_wrap {
    margin-block: 5px 0px;
    font-size: 12px;
  }
  #app #spSortModal_chat .select_area,
  #app #spSortModal_area .select_area {
    vertical-align: bottom;
    margin-bottom: initial;
  }
  #app #spSortModal_chat .reselect_btn,
  #app #spSortModal_area .reselect_btn {
    font-size: 14px;
    border: none;
    background: initial;
    color: var(--blue_main);
    margin-inline: 3px;
    font-weight: bold;
  }
  #app #spSortModal_chat .event_area_sort,
  #app #spSortModal_area .event_area_sort {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    transition: height 0.3s;
    -webkit-transition: padding 0.3s;
    transition: padding 0.3s;
  }
  #app #spSortModal_chat .event_area_sort.is_show,
  #app #spSortModal_area .event_area_sort.is_show {
    padding: 5px 5px 10px;
    height: auto;
    -webkit-transition: height 0.3s;
    transition: height 0.3s;
  }
  #app #spSortModal_chat .event_area_sort .select_plece,
  #app #spSortModal_area .event_area_sort .select_plece {
    height: 20vh;
    min-height: 155px;
    padding: 0.5rem 0.5rem 0;
    margin-bottom: 10px;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    overflow: scroll;
  }
  #app #spSortModal_chat .event_area_sort .select_plece li .area_name,
  #app #spSortModal_area .event_area_sort .select_plece li .area_name {
    margin-top: 10px;
  }
  #app #spSortModal_chat .event_area_sort .select_plece li:first-child .area_name,
  #app #spSortModal_area .event_area_sort .select_plece li:first-child .area_name {
    margin-top: 0;
  }
  #app #spSortModal_chat .event_area_sort .select_plece li .check_item,
  #app #spSortModal_area .event_area_sort .select_plece li .check_item {
    display: inline-block;
    width: calc(50% - 5px);
  }
  #app #spSortModal_chat .event_area_sort .reset_sort_wrap,
  #app #spSortModal_area .event_area_sort .reset_sort_wrap {
    text-align: right;
  }
  #app #spSortModal_chat .event_area_sort .reset_sort_wrap .checkReset_btn,
  #app #spSortModal_area .event_area_sort .reset_sort_wrap .checkReset_btn {
    font-size: 12px;
    font-weight: bold;
    border: none;
    background: initial;
    color: var(--blue_main);
  }
  #app #spSortModal_chat dd,
  #app #spSortModal_area dd {
    margin-left: 0; /* 本番で必要 */
  }
  #app #spSortModal_chat .form-check,
  #app #spSortModal_area .form-check {
    padding-left: 10px;
  }
  #app #spSortModal_chat label,
  #app #spSortModal_area label {
    width: 100%;
    display: inline;
    font-weight: normal;
  }
  #app #spSortModal_chat input[type=radio]:checked + label,
  #app #spSortModal_chat input[type=checkbox]:checked + label,
  #app #spSortModal_area input[type=radio]:checked + label,
  #app #spSortModal_area input[type=checkbox]:checked + label {
    font-weight: bold;
  }
  #app #spSortModal_chat .check_wrap,
  #app #spSortModal_area .check_wrap {
    padding-left: 4px;
    margin-top: -22px;
  }
}
#app .js_accordion.is_close {
  display: none;
}
#app .moreViewBtn {
  display: block;
  min-width: 250px;
  margin: 15px auto 0;
  padding: 0.375rem 2rem;
}
@media screen and (max-width: 767px) {
  #app .moreViewBtn {
    padding: 0.7rem 2rem;
    margin: 15px auto 30px;
  }
}
#app .myPage.is_app header,
#app .myPage.is_app footer,
#app .chatPage.is_app header,
#app .chatPage.is_app footer {
  display: none !important;
}
#app .myPage.is_app #wrap,
#app .chatPage.is_app #wrap {
  padding: 0;
}
#app .myPage.is_app .message_box,
#app .chatPage.is_app .message_box {
  top: 0 !important;
}
#app .myPage.is_app #wrap .message_box + .row #content_subNav,
#app .chatPage.is_app #wrap .message_box + .row #content_subNav {
  top: 36px;
}
@media screen and (max-width: 767px) {
  #app .myPage.is_app #wrap .message_box + .row #content_subNav,
  #app .chatPage.is_app #wrap .message_box + .row #content_subNav {
    top: 0;
  }
}
#app .myPage ul.text_menu.is_app {
  display: none !important;
}
#app .popover-header:empty {
  display: none;
}

/* #app */
/* bootstrapのモーダル背景レイヤーの設定追加 */
.modal-backdrop.show {
  z-index: 10000;
}

/* vue modal 対策（#appの外に記載する必要あり） */
.modal-open .modal,
.modal.show {
  background-color: var(--gray_50_a);
  z-index: 2000;
}

.modal-backdrop.show {
  display: none;
}

/*============================
  BAN用カード
  ============================*/
.card_ban {
  margin: 60px 5px;
}
@media screen and (max-width: 767px) {
  .card_ban {
    margin: 5px;
  }
}
.card_ban .card-header {
  font-size: 1rem;
  font-weight: bold;
  padding: 10px;
  border-bottom: 0;
}
.card_ban .card-body {
  padding: 20px 15px;
  margin-bottom: 0;
}
.card_ban .card-body article {
  margin-bottom: 30px;
}
.card_ban .card-body article .article_title {
  font-size: 20px;
  font-weight: bold;
}
.card_ban .card-body article .atricle_text {
  font-size: 15px;
  line-height: 1.6;
}
/*# sourceMappingURL=maps/common.css.map */