.post-content .modal-wrapper {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0 ,0.6);
 z-index: 100;
 display: none;
}
.post-content .modal {
 position: absolute;
 top: 20%;
 left: 34%;
 background-color: #fff;
 padding: 20px 0 40px;
 border-radius: 2px;
 width: 450px;
 height: auto;
 text-align: center;
}

.input_text {
 text-align: left;
 width: 100%;
 height: 30px;
}
.input_comment {
 width: 100%;
 max-width: 100%;
}
.support_wrapper {
 display: flex;
 justify-content: center;
 align-items: center;
}
.support_select_wrapper, .totsu_select_wrapper {
 width: 50%;
 /* height: 75px; */
 display: flex;
 align-items: center;
 justify-content: center;
}
.support_select_wrapper {
 border-right: 2px dashed #bbb5b5;
}
.support_select[data-type="unselected"] {
 border: 2px dashed #FD6E42;
 color: #646464;
 border-radius: 2px;
 width: 70px;
 height: 70px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-weight: bold;
 cursor: pointer;
}
.support_select img {
 width: 60px;
 height: 60px;
}
.totsu_select_wrapper .support_totsu {
 width: 80%;
 height: 30px;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 text-align: center;
 background: rgba(0,0,0,50%);
 padding: 40px 20px;
 overflow-y: scroll;
 /* overflow-x: scroll; */
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: .3s;
 box-sizing: border-box;
 z-index: 999;
}

/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
}
/*モーダル枠の指定*/
.modal-body{
 position: relative;
 display: inline-block;
 vertical-align: middle;
 max-width: 600px;
 /* max-height: 500px; */
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: center;
 top: -40px;
 right: -40px;
 width: 40px;
 height: 40px;
 font-size: 40px;
 color: #fff;
 cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
 background: #fff;
 text-align: left;
 padding: 30px;
 overflow: scroll;
 height: 90vh;
 width: 600px;
 /* max-width: initial!important; */
}
/* モーダル内アイコン */
.choose_support, .choose_equip {
 width: calc(100% / 6 - 5px);
 font-size: 10px;
 margin-bottom: 10px;
 display: inline-block;
 cursor: pointer;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 text-align: center;
}
.choose_support_wrapper {
 padding: 5px;
 margin-bottom: 8px;
}
.support_img_wrapper {
 position: relative;
 display: inline-block;
}
.support_img {
 display: block;
}
.support_img.on {
 filter: brightness(50%);
}
.selected {
 display: none;
 position: absolute;
 padding: 2px;
 z-index: 1;
}
.selected.on {
 display: block;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: rgba(0, 0, 0, 0.7);
 color: white;
 font-size: 10px;
}
.support_name {
 position: relative;
 z-index: 2;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.sort_txt {
 padding: 10px;
}
.sort_label {
 display: inline-block;
 font-size: 12px;
 font-weight: bold;
}
.sort_support {
 width: 50%;
 display: inline-block;
}
.arcana_modal_filter {
 margin-bottom: 8px;
 border-bottom: 1px dashed #c6c6c6;
 padding-bottom: 5px;
}
.arcana_modal_filter .sort_txt {
 padding: 5px 0;
}
.arcana_modal_filter .sort_label {
 display: block;
 margin-bottom: 4px;
}
.arcana_modal_filter .sort_support {
 width: 100%;
 height: 30px;
 box-sizing: border-box;
 padding: 0 8px;
}
.post-content .arcana_modal_filter ul.arcana_rarity_filter,
.post-content .arcana_modal_filter ul.arcana_tag_filter {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 list-style: none;
 margin: 0;
 padding: 0;
 border: none;
 background: transparent;
}
.post-content .arcana_modal_filter ul.arcana_rarity_filter > li {
 width: auto;
 cursor: pointer;
 border: 2px solid #c6c6c6;
 border-radius: 2px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: bold;
 line-height: 1.4;
 margin: 0;
 list-style: none;
 background: #fff;
}
.post-content .arcana_modal_filter ul.arcana_tag_filter > li {
 width: auto;
 cursor: pointer;
 border: 2px solid #c6c6c6;
 border-radius: 2px;
 padding: 2px 6px;
 font-size: 11px;
 font-weight: bold;
 line-height: 1.3;
 margin: 0;
 list-style: none;
 background: #fff;
 display: flex;
 align-items: center;
}
.post-content .arcana_modal_filter ul.arcana_rarity_filter > li.active,
.post-content .arcana_modal_filter ul.arcana_tag_filter > li.active {
 border-color: #FD6E42;
 background: #fff5f0;
}

.info_support_wrapper .arcana_info_row {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 8px;
 border: 1px solid #d5edfb;
 padding: 5px;
 border-radius: 2px;
 background: #e3f5ff;
}
.info_support_wrapper .arcana_img {
 flex-shrink: 0;
}
.info_support_wrapper .arcana_img_with_totsu {
 position: relative;
 display: inline-block;
 line-height: 0;
 width: 65px;
}
.info_support_wrapper .arcana_img_with_totsu .arcana_base_img {
 width: 100%!important;
 height: auto!important;
 display: block;
}
.info_support_wrapper .arcana_img_with_totsu .arcana_totsu_overlay_wrap {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 65%) 40%);
 line-height: 0;
 text-align: center;
}
.info_support_wrapper .arcana_img_with_totsu .arcana_totsu_overlay {
 width: 75%;
 max-width: 75%;
 height: auto!important;
 display: block;
 margin: 0 auto;
 pointer-events: none;
}
.info_support_wrapper .arcana_name {
 flex: 1;
 min-width: 0;
 font-size: 15px;
 font-weight: bold;
 line-height: 1.4;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.info_support_wrapper .arcana_totsu {
 flex-shrink: 0;
 display: flex;
 align-items: center;
 gap: 4px;
 white-space: nowrap;
}
.info_support_wrapper .arcana_totsu_label {
 font-size: 11px;
 font-weight: bold;
 color: #3d3d3d;
}
.info_support_wrapper .arcana_totsu_val {
  font-size: 13px;
  font-weight: bold;
  background: #3074DA;
  color: #fff;
  border-radius: 2px;
  padding: 0px 8px;
}

/* .button_wrapper {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
.reset_button, .submit_button {
padding: 5px;
width: 45%;
border-radius: 25px;
font-size: 15px;
cursor: pointer;
}
.reset_button {
margin-right: 5px;
border: 1px solid #cbc8c8;
border-bottom: 2px solid #cbc8c8;
background: linear-gradient(45deg, #edebeb, #fafafa);
color: #7a7979;
}
.submit_button {
margin-left: 5px;
border: 1px solid #FD6E42;
border-bottom: 2px solid #FD6E42;
background: linear-gradient(45deg, #FD6E42, #FEA12D);
color: #fff;
text-shadow: 0px 0px 2px #d03a0c;
} */


/* 投稿ボタン系_S */
.trigger_button_container {
 text-align: center;
}
#fbbs_post_button_tw {
 background: linear-gradient(45deg, #1d9bf0, #58b8f9);
 border: 1px solid #0480d3;
 border-bottom: 2px solid #0480d3;
}
.creat_trigger {
 border: none;
 text-align: center;
 border-radius: 25px;
 border: 1px solid #FD6E42;
 border-bottom: 2px solid #FD6E42;
 color: #ffffff;
 line-height: 1;
 background: linear-gradient(45deg, #FD6E42, #FEA12D);
 font-weight: bold;
 font-size: 15px;
 padding: 15px 0;
 cursor: pointer;
 margin-top: 10px;
 width: 49% !important;
 position: relative;
}
#fbbs_post_button_tw:before {
 content: "\f099";
 font-family: 'FontAwesome';
 font-size: 26px;
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 display: block;
 line-height: 1;
 height: fit-content;
 left: 12px;
}
/* 投稿ボタン系_E */

.upload-group {
 display: none;
}
#upload_file label {
 border: 2px solid;
 width: 100%;
 text-align: center;
 border-radius: 5px;
 color: #ff7e22;
 padding: 5px;
}
.for_img_preview {
 text-align: center;
 display: flex;
 flex-wrap: wrap;
}
.selectedFile {
 cursor: pointer;
 width: calc(25% - 4px);
 position: relative;
 margin: 0 auto;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #cccccc1f;
 height: calc(45vw* 0.618 / 2);
 max-height: calc(245px* 0.618 / 2);
}
.selectedFile .fa {
 position: absolute;
 right: 0px;
 top: 0px;
 color: darkslategray;
 font-size: 20px;
 background: #fff;
 border-radius: 20px;
 padding: 0px 1px;
}

/* ソート系_S */
.post-content ul.select_sort {
 display: flex;
 list-style: none;
 margin: 0;
 padding: 0;
}
.post-content ul.select_sort > li {
 width: calc(100% / 2);
 text-align: center;
 font-size: 12px!important;
 color: #3c3c3c;
 border: 2px solid #3c3c3c;
 margin: 2px;
 border-radius: 2px;
 font-weight: bold;
 cursor: pointer;
 list-style: none;
 background: #fff;
}
.post-content ul.select_sort > li[data-sort='reset'] {
 color: #d20000;
 border: 2px solid #d20000;
}
#select_sort_space {
 margin-top: 10px;
 border-radius: 10px;
 text-align: center;
 padding: 10px;
 color: #a9a9a9;
 margin-left: 5px;
 margin-right: 5px;
}
#select_sort_space .sort_support_wrapper {
 display: flex;
 justify-content: center;
 align-items: center;
}
#select_sort_space .support_select_wrapper {
 border-right: none;
 width: auto;
}
#select_sort_space .support_select[data-type="unselected"] {
 border: 2px dashed #807e7e;
 color: #646464;
 border-radius: 2px;
 width: 70px;
 height: 70px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 font-weight: bold;
 cursor: pointer;
 margin: 0 auto;
 font-size: 0;
}
#select_sort_space .support_select[data-type="unselected"]::before {
 content: "\f067";
 font-family: FontAwesome;
 font-size: 20px;
 color: #646464;
 line-height: 1;
}
#select_sort_space .support_select[data-type="selected"] {
 width: auto;
 min-width: 70px;
 height: auto;
 min-height: 70px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 padding: 5px;
}
#select_sort_space .sort_arcana_img_wrapper {
 position: relative;
 display: inline-block;
}
#select_sort_space .sort_arcana_remove {
 position: absolute;
 top: -6px;
 right: -6px;
 width: 18px;
 height: 18px;
 background: #fff;
 border: 1px solid #a2a2a3;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 1;
 font-size: 11px;
 color: #666;
 line-height: 1;
}
#select_sort_space .sort_arcana_remove .fa {
 font-size: 11px;
}
#select_sort_space .support_select img {
 width: 60px;
 height: 60px;
 display: block;
}
#select_sort_space .sort_arcana_name {
 font-size: 10px;
 line-height: 1.3;
 margin-top: 2px;
 max-width: 70px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
#select_sort_space[data-disp='on'] {
 border-color: #FD6E42;
}
.post-content ul.sort_totsu_wrapper {
 border: 1px solid #c6c6c6;
 display: flex;
 margin-top: 5px;
 list-style: none;
 padding: 0;
}
.post-content ul.sort_totsu_wrapper > li:nth-child(1) {
 width: 30%;
 text-align: center;
 border-right: 1px solid #c6c6c6;
 border-radius: 5px 0px 0px 5px;
 background: #e7f8fd;
 color: #3d3d3d;
 font-weight: bold;
 font-size: 13px;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
 padding: 5px;
 list-style: none;
}
.post-content ul.sort_totsu_wrapper > li:nth-child(2) {
 width: 70%;
 padding: 5px;
 text-align: center;
 margin: 0;
 list-style: none;
 border: none;
 background: transparent;
}
.post-content ul.sort_totsu_btns {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 list-style: none;
 margin: 0;
 padding: 0;
 justify-content: center;
 border: none;
 background: transparent;
}
.post-content ul.sort_totsu_btns > li.sort_totsu_btn {
 width: auto;
 cursor: pointer;
 border: 2px solid #c6c6c6;
 border-radius: 2px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: bold;
 line-height: 1.4;
 background: #fff;
 color: #3d3d3d;
 margin: 0;
 list-style: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
.post-content ul.sort_totsu_btns > li.sort_totsu_btn.active {
 border-color: #FD6E42;
 background: #fff5f0;
 color: #3d3d3d;
}
.su-spoiler-content.su-clearfix {
 border: 1px solid #b8b8b8!important;
 border-radius: 2px!important;
 padding: 5px!important;
}
.su-spoiler-closed .su-spoiler-content.su-clearfix {
 border: none!important;
}
/* ソート系_E */

/* コメントリスト_ヘッダー_S */
.comments_list li {
 border-radius: 2px;
 margin-top: 2px;
 padding: 5px 7px;
 border: 1px solid #b8b8b8;
 margin-bottom: 5px;
}
.header_wrapper {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.3em;
}
.header_wrapper .header_right {
 display: flex;
 align-items: center;
 gap: 5px;
 margin-left: auto;
 flex-shrink: 0;
}
.header_wrapper .com_id {
 font-size: 13px;
 font-weight: bold;
 color: #1f2021;
}
.header_wrapper .com_name {
 font-weight: bold;
 color: #1f2021;
 font-size: 13px;
 text-align: left;
 width: fit-content;
 margin: 0;
 word-break: keep-all;
 overflow: hidden;
}
.header_wrapper .com_date {
 color: #7a91b1;
 font-size: 13px;
 white-space: nowrap;
 margin-right: 3px;
}
.header_wrapper .warn_btn_span {
 padding: 2px 8px;
 font-size: 11px;
 background-color: #f9f9f9;
 outline: none;
 border: 1px solid #a2a2a3;
 border-radius: 2px;
 color: #a2a2a3;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 22px;
 flex-shrink: 0;
 white-space: nowrap;
}
/* コメントリスト_ヘッダー_E */

/* コメントリスト_コンテンツ_S */
.content_wrapper .title {
 font-weight: bold;
 text-align: left;
 font-size: 15px;
 position: relative;
 padding-bottom: 0.4em;
 margin: 5px 0;
 padding-left: 0.6em;
 padding-top: 0.3em;
}
.content_wrapper .friend_code {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 5px 0px;
 margin-bottom: 5px;
}
.content_wrapper .code_label {
 width: 30%;
 text-align: center;
 border: 1px solid #c6c6c6;
 border-radius: 2px 0px 0px 2px;
 background: #FEF6BB;
 color: #3d3d3d;
 font-weight: bold;
}
.content_wrapper .code_val {
 width: 70%;
 text-align: center;
 border-radius: 0px 2px 2px 0px;
 border-top: 1px solid #c6c6c6;
 border-right: 1px solid #c6c6c6;
 border-bottom: 1px solid #c6c6c6;
 font-size: 16px;
 font-weight: bold;
}
.code_val i {
 margin-left: 5px;
}
.content_wrapper .info_wrapper {
 display: flex;
 justify-content: center;
 align-items: center;
}
.info_wrapper .info_support_wrapper {
 width: 100%;
 text-align: left;
 margin-right: 0;
}
.info_wrapper .info_support_wrapper[data-type="only"] {
 width: 100%;
}
.content_wrapper .com_lbl {
 font-weight: bold;
 font-size: 14px;
}
.content_wrapper .com_text {
 text-align: left;
 padding: 0px 5px;
 border-radius: 2px;
 margin-bottom: 5px;
}
/* コメントリスト_コンテンツ_E */

/* コメントリスト_フッター_S */
.footer_wrapper {
 margin-top: 10px;
 padding: 0px 5px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
 gap: 5px;
}
.footer_wrapper .reply_form,
.footer_wrapper .show_div,
.footer_wrapper .comment_reply_ul {
 flex: 0 0 100%;
 width: 100%;
}
.good_btn_span {
 padding: 5px 10px;
 font-size: 12px;
 background-color: #fff;
 outline: none;
 border: 1px solid #a2a2a3;
 color: #a1a1a2;
 border-radius: 5px;
 cursor: pointer;
}
.good_btn_span.done, .good_btn_span:hover {
 color: #fff;
 background-color: #ff7e22;
 font-weight: bold;
 border: 1px solid #ff7e22;
}
.warn_btn_span {
 padding: 2px 10px;
 font-size: 12px;
 background-color: #f9f9f9;
 outline: none;
 border: 1px solid #a2a2a3;
 border-radius: 2px;
 color: #a2a2a3;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 25px;
 flex-shrink: 0;
}
.reply_btn_span {
 padding: 2px 10px;
 font-size: 12px;
 /* background-color: #f9f9f9; */
 outline: none;
 border: 1px solid #4682b4;
 border-radius: 2px;
 color: #4682b4;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 25px;
 flex-shrink: 0;
}
.r_footer_wrapper {
 height: 20px;
 margin-top: 6px;
 margin-bottom: 10px;
}
.r_footer_wrapper .reply {
 float: right;
 border-radius: 2px !important;
 padding: 1px 4px !important;
 bottom: 3px;
 font-size: 12px;
 border: 1px solid #4682b4;
 padding: 4px 4px;
 color: #fff;
 width: 50px;
 background-color: #4682b4;
 cursor: pointer;
}
.show_reply {
 margin-top: 10px;
 outline: none;
 width: 100%;
 background: #fff;
 padding: 6px;
 margin-bottom: 5px;
 color: #4682b4;
 font-size: 12px;
 line-height: 28px;
 cursor: pointer;
 border: 2px solid #4682b4!important;
 border-radius: 2px;
 border: none;
 font-weight: bold;
}
.input_r_name {
 border-radius: 4px;
 font-size: 13px;
 line-height: 1.8rem;
 box-shadow: none;
 border: 1px solid #b8b8b8;
 box-sizing: border-box;
 width: 100%;
 padding: 1px 5px;
 -webkit-appearance: none;
 font-weight: normal;
}
.input_r_comment {
 margin-top: 5px;
 border-radius: 4px;
 font-size: 13px;
 line-height: 1.8rem;
 box-shadow: none;
 border: 1px solid #b8b8b8;
 box-sizing: border-box;
 width: 100%;
 min-width: 100%;
 resize: none;
 padding: 3px 5px;
 -webkit-appearance: none;
 font-weight: normal;
}
/* コメントリスト_フッター_E */

/* コメントリスト_返信_S */
.comment_reply_ul li {
 border-radius: 2px;
 margin-top: 2px;
 padding: 5px 7px;
 border: none;
 margin-bottom: 5px;
}
.content_wrapper .com_text2 {
 text-align: left;
 padding: 0px 10px;
 min-height: 40px;
 margin-top: 10px;
}
.footer_wrapper hr {
 border: 1px dashed #a1b3cb!important;
}
/* コメントリスト_返信_E */

/* ローディングモーダル_S */
#modal-img-view {
 text-align: center;
 width: 100%;
 height: 100%;
 margin: 0;
 position: fixed;
 display: none;
 z-index: 100000000;
 left: 0 !important;
 top: 0 !important;
 bottom: 0 !important;
 right: 0 !important;
}
#modal_image_inline{
 width: 100%;
 height: 100%;
 padding: 45px 0;
 max-width: 480px;
 margin: 0 auto;
}
#modal_image{
 position: absolute;
 max-width: 96% !important;
 max-height: 85% !important;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}
#modal-overlay {
 z-index: 1 ;
 display: none ;
 position: fixed ;
 top: 0 ;
 left: 0 ;
 width: 100% ;
 height: 120% ;
 background-color: rgba( 0,0,0, 0.75 ) ;
}
#image_close {
 position: absolute;
 right: 20px;
 top: 0;
 color: #fff;
 font-size: 35px;
}
#modal-overlay {
 z-index: 1 ;
 display: none ;
 position: fixed ;
 top: 0 ;
 left: 0 ;
 width: 100% ;
 height: 120% ;
 background-color: rgba( 0,0,0, 0.75 ) ;
}
#modal-content {
 text-align:center;
 width: 50% ;
 max-width:320px;
 margin: 0 ;
 padding: 10px 20px ;
 border-radius:6px;
 background: #fff ;
 position: fixed ;
 display:none;
 z-index: 2147483999 ;
}
/* ローディングモーダル_E */

@media (max-width:480px){
 .choose_support, .choose_equip {
   width: calc(100% / 4 - 5px);
 }
 .modal-content {
   width: 310px;
   padding: 5px;
 }
 .sort_label {
   font-size: 10px;
 }
 .page-item a {
   padding: 8px 10px!important;
 }
 .content_wrapper .com_text {
   line-height: 1.9;
 }
}