.tooltip {
  display: block!important;
  z-index: 10000
}
.tooltip .tooltip-inner {
  background: #000;
  color: #fff;
  border-radius: 16px;
  padding: 5px 10px 4px
}
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: #000;
  z-index: 1
}
.tooltip[x-placement^=top] {
  margin-bottom: 5px
}
.tooltip[x-placement^=top] .tooltip-arrow {
  border-width: 5px 5px 0;
  border-left-color: transparent!important;
  border-right-color: transparent!important;
  border-bottom-color: transparent!important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0
}
.tooltip[x-placement^=bottom] {
  margin-top: 5px
}
.tooltip[x-placement^=bottom] .tooltip-arrow {
  border-width: 0 5px 5px;
  border-left-color: transparent!important;
  border-right-color: transparent!important;
  border-top-color: transparent!important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0
}
.tooltip[x-placement^=right] {
  margin-left: 5px
}
.tooltip[x-placement^=right] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent!important;
  border-top-color: transparent!important;
  border-bottom-color: transparent!important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0
}
.tooltip[x-placement^=left] {
  margin-right: 5px
}
.tooltip[x-placement^=left] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent!important;
  border-right-color: transparent!important;
  border-bottom-color: transparent!important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0
}
.tooltip.popover .popover-inner {
  background: #f9f9f9;
  color: #000;
  padding: 12px;
  border-radius: 5px;
  box-shadow: 0 5px 12px rgba(0,0,0,.1)
}
.tooltip.popover .popover-arrow {
  border-color: #f9f9f9
}
.tooltip[aria-hidden=true] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s,visibility .15s
}
.tooltip[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s
}
.mention-item {
padding: 4px 10px;
border-radius: 4px;
}
.mention-selected {
background: rgb(192, 250, 153);
}
.mention-color {
  color:#007aaa
}
.hashtag-color {
  color:#00bbaa
}
.keyword {
  background-color: #fcec38;
}




#circle-add .send-list>div>div>div>button {
  background-color: #24a7ff;
  border: none;
  border-radius: 100px;
  font-size: 1rem;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 30px;
  cursor: pointer;
  margin-left: auto;
  transition: 0.1s linear opacity;
  margin-bottom: 10px
}

#circle-add .send-list>div>div>div>button:hover {
  opacity: 0.8
}


#circle-add .setting-group .item .member-select {
  background-color: #24a7ff;
  border: none;
  border-radius: 100px;
  font-size: 1rem;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 30px;
  cursor: pointer;
  margin-left: auto;
  transition: 0.1s linear opacity;
  margin-top: 0px;
  margin-bottom: 20px;
}

#circle-add .member-select {
  opacity: 0.8
}


#circle-add .edit-member .item .member-select {
  background-color: #24a7ff;
  border: none;
  border-radius: 100px;
  font-size: 1rem;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 30px;
  cursor: pointer;
  margin-left: auto;
  transition: 0.1s linear opacity;
  margin-top: 20px;
  margin-bottom: 20px;
}

#circle-add .edit-member .item .member-select {
  opacity: 0.8
}

#myspace #container aside nav.tab ul li a.current {
  position: relative;
  color: #24a7ff
}

.member-tag-ul {
  list-style: none;
  margin: 10;
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.member-tag {
  background-color: #DAECF8;
  color: #24a7ff;
  border: 1px solid #24a7ff;
  border-radius: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 18px;
  cursor: default;
  position: relative;
  font-size: 0.9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.member-tag:after {
  cursor: pointer;
  content: '';
  right: 8px;
  top: 10px;
  position: absolute;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 11.3 11.3"><polygon fill="%2313A3F5" points="11.3,0.7 10.6,0 5.7,4.9 0.7,0 0,0.7 5,5.7 0,10.6 0.7,11.3 5.7,6.4 10.6,11.3 11.3,10.6 6.4,5.7 "/></svg>');
  background-repeat: no-repeat
}

button .publish {
  padding: 20px 30px;
}

/* #circle #container .group .item>.button-edit a {
  background-color: #FFFFFF;
  border: 2px solid #24A7FF;
  color: #24A7FF;
  margin-top: 10px;
  border-radius: 100px;
  padding: 10px 0;
  text-decoration: none;
  width: 100%;
  display: inline-block;
  font-weight: bold;
  transition: 0.1s linear opacity
} */

#circle #container .group .item {
  position:relative;
}

#circle #container .group .item>.edit {
  color:#24a7ff;
  position:absolute;
  top:10px;
  left:90%;
}

.timeline>.post>.action {
  margin: 10px 0;
}

.circle-icon {
  color:#F08B00;
}
#circle-main .wrapper .widget .data div a {
  background-color: #FFFFFF;
  border: 2px solid #24A7FF;
  color: #24A7FF;
  margin-top: 20px;
  border-radius: 100px;
  padding: 10px 0;
  text-decoration: none;
  width: 100%;
  display: inline-block;
  font-weight: bold;
  transition: 0.1s linear opacity;
  text-align: center;
}
/* .wrapper .widget .data .follow-action */
.follow-action {
  border: 1px solid #24a7ff;
  border-radius: 100px;
  height: 18px;
  width: 70px;
  line-height: 18px;
  margin-left: 20px;
  color: #24a7ff;
  font-size: 0.7rem;
  transition: 0.1s linear all;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: 0rem;
  display: inline-block;
  text-align: center
}
.follow-action:active {
  opacity: 0.8
}

.follow-action:hover {
  background-color: #24a7ff;
  color: #ffffff
}

.unfollow-action {
  display: inline-block;
  height: 20px;
  width: 110px
}

.unfollow-action:hover span:nth-child(2) {
  display: none
}

.unfollow-action span {
  border: 1px solid #24a7ff;
  border-radius: 100px;
  margin-left: 20px;
  color: #24a7ff;
  font-size: 0.7rem;
  transition: 0.1s linear all;
  cursor: pointer;
  font-weight: bold;
  height: 18px;
  line-height: 18px;
  letter-spacing: 0rem;
  position: absolute;
  display: inline-block;
  width: 86px;
  text-align: center
}

.unfollow-action span:nth-child(1) {
  color: #ffffff;
  background-color: #FC3838;
  border: #FC3838
}

.unfollow-action span:nth-child(2) {
  color: #ffffff;
  background-color: #24a7ff;
  border: #24a7ff
}

.wrapper .widget .data .follow-position {
  position:absolute;
  top:43px;
  left:50%;
}

#circle-main {
  padding: 0;
}
.action-overlay .container .item .emoji {
  width:5%;
  height:5%;
  cursor: pointer;
}

.tooltip .tooltip-inner {
  border-radius: 3px;
  padding: 5px 10px 4px;
  font-size: 0.8rem;
}


.timeline > .post > .comment .post {
  margin-top: 5px;
  margin-bottom: 14px;
}

.Page-Btn{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  /* background: #5bc8ac; */
  background:#22a8ff;
}
.Page-Btn-Icon{
  color: #fff;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
.Page-Btn{
  position: fixed;
  right: 14px;
  bottom: 55px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  /* background: #5bc8ac; */
  background:#22a8ff;
}
}

.launcher-menu {
  display: block;
  position: absolute;
  top: 10px;
  left: 85%;
  background-color: #ffffff;
  border-radius: 100px;
  border: 1px solid #E6ECF0;
  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1)
}
@media screen and (max-width: 768px) {
  .launcher-menu {
    display: block;
    position: absolute;
    top: 10px;
    left: 78%;
    background-color: #ffffff;
    border-radius: 100px;
    border: 1px solid #E6ECF0;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.1)
  } 
}
.launcher-menu ul {
  list-style: none;
  margin: 0;
  padding: 8px 18px;
  display: flex;
}

.launcher-menu ul li {
  padding: 0px 5px 0px 5px;
}

.other-action {
  display: none;
  cursor:pointer;
  color: #24a7ff;
  position:absolute;
  top:10px;
  left:95%;
}

.notification-read {
  background-color: #aaa;
}

.header-menu-icon {
  margin-right:15px; color:#6bb3c7;
}

.timeline .post p div .thumbnail {
  cursor: pointer;
}

.timeline>.post>.feedback .comment-link {
  display: flex;
  align-items: center;
}

.timeline>.post>.feedback .comment-link a {
  font-size: 0.8rem;
  color: #9197A3;
  margin-left: 170px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .timeline>.post>.feedback .comment-link a {
    font-size: 0.8rem;
    color: #9197A3;
    margin-left: 100px;
    cursor: pointer;
  }
}
.timeline > .post > .comment .more-comment a {
  font-size: 0.8rem;
  color: #9197A3;
  cursor: pointer;
}

.timeline>.composer .tools .select {
  display: flex;
  margin-top: 10px
}

.timeline>.composer .tools .select {
  flex: 0 0 calc(100%/5);
  margin-right: 15px;
  position: relative;
  display: inline-block;
  height: 50px
}

.timeline>.composer .tools .select:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-bottom: solid 2px #24a7ff;
  border-right: solid 2px #24a7ff;
  transform: rotate(45deg);
  position: absolute;
  top: 40%;
  right: 15px;
  margin-top: -5px
}

.timeline>.composer .tools .select select {
  height: 85%;
  /*width: 100%;*/
  border-radius: 100px;
  border: 2.5px solid #24a7ff;
  background: none;
  color: #24a7ff;
  /*font-size: 1.2rem;*/
  font-weight: bold;
  padding-left: 20px;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.timeline>.composer .tools .select button {
  margin-left: auto;
  background-color: #24a7ff;
  border-radius: 100px;
  height: 50px;
  white-space: nowrap;
  overflow: hidden;
  outline: 0;
  border: none;
  flex: 0 0 calc(100%/5);
  color: #6bb3c7;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer
}

.timeline>.composer .tools .select{
  margin: 0 4px
}

@media screen and (max-width: 768px) {
  .timeline>.composer .tools .select {
    margin: 0 2px
  }
}

#openspace #container>.wrapper aside .side-menu {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px
}

#openspace #container>.wrapper aside .side-menu img {
  width: 100%;
  height: auto;
  display: block
}

#openspace #container>.wrapper aside .side-menu h4 {
  color:#9197A3;
  margin: 10px 0
}

#openspace #container>.wrapper aside .side-menu h5 {
  color:#9197A3;
  margin: 10px 0
}


#openspace #container>.wrapper aside .side-menu p {
  color: #8695A1;
  margin: 10px 0;
  font-size: 0.9rem;
  line-height: 1.8
}

#openspace #container>.wrapper aside .side-menu span {
  position:absolute;
    background-color: #EAEAEA;
    border: 1px solid #EAEAEA;
    margin-left: 10px;
    margin-bottom: 8px;

    display: inline-block;
    font-size: 0.7rem;
    line-height: 0.7rem;
    color: #9197A3;
    padding: 5px 10px;
    border-radius: 4px;
}


#circle-main>.wrapper aside .side-menu a {
  color: #8695A1;
  text-decoration: none;
  font-size: 0.9rem;
 
}

#openspace #container>.wrapper aside .side-menu a {
  color: #8695A1;
  text-decoration: none;
  font-size: 0.9rem;
}

.timeline>.composer .tools .owner {
  margin: 0 4px
}

@media screen and (max-width: 768px) {
.timeline>.composer .tools .owner {
    margin: 0 2px
  }
}

.timeline>.composer .tools .owner svg {
  width: 42px;
  fill: #24a7ff;
  cursor: pointer;
  padding: 6px
}

@media screen and (max-width: 768px) {
  .timeline>.composer .tools .owner svg {
    width: 38px
  }
}

.timeline>.composer .tools .owner svg:hover {
  opacity: 0.8
}

.timeline>.composer .tools .owner svg:active {
  transform: translateY(1px)
}

.timeline>.post .tag.owner .name {
  background-color: #ffffff;
  border: 1px solid #707070;
  color: #707070;
  margin-left: 10px;
  margin-bottom: 8px;
}

.timeline>.post .tag.owner .name a {
  color: #707070;
}

.timeline>.post .tag.owner .new_name {
  border-radius: 50px;
  background-color: #fa8072;
  border: 1px solid #fa8072;
  color: #ffffff;
  font-size:x-small;
  margin-left: 10px;
  margin-bottom:10px;
  padding-left:5px;
  padding-right:5px;
  padding-top:4px;
  padding-bottom:4px;
  vertical-align:20%;
}

.timeline>.post .tag.owner .topic {
  /* border: 1px solid #F08B00; */
  color: #707070;
  font-size: 0.9rem;
}

.text{
  margin:50px;
  position: relative;
}

.description{
  position: absolute;
  top: -3.5em;
  left: -10px;
  padding: 6px;
  background-color: #01579B;
  color:#FFF;
  border-radius:6px;
  opacity:0;
}

.description:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  border: 0.4em solid transparent;
  border-top: 1em solid #01579B;
}

.text:hover .description{
  animation: popup 1s forwards;
}

@keyframes popup {
  100% {
  opacity:1;
  }
}


nav.main ul li.action .hiddenside-close, nav.sub ul li.action .hiddenside-close {
  display: inline-block;
  margin-right: 10px
}

@media screen and (max-width: 768px) {
  nav.main ul li.action .hiddenside-close, nav.sub ul li.action .hiddenside-close {
    margin-right: 0
  }
}

nav.main ul li.action .hiddenside-close span, nav.sub ul li.action .hiddenside-close span {
  border: 2px solid #FD5E3A;
  border-radius: 100px;
  display: inline-block;
  padding: 6px 20px;
  color: #FD5E3A;
}

@media screen and (max-width: 768px) {
  nav.main ul li.action .hiddenside-close span, nav.sub ul li.action .hiddenside-close span {
    padding: 5px 14px;
    font-size: 0.7rem
  }
}

nav.main ul li.action .join-close, nav.sub ul li.action .join-close {
  display: inline-block
}

nav.main ul li.action .join-close span, nav.sub ul li.action .join-close span {
  border: 2px solid #FD5E3A;
  border-radius: 100px;
  display: inline-block;
  padding: 6px 40px;
  color: #ffffff;
  background-color: #FD5E3A;
}

@media screen and (max-width: 768px) {
  nav.main ul li.action .join-close span, nav.sub ul li.action .join-close span {
    display: none
  }
}

#circle-main .header .cover .title .join-close {
  display: none
}

@media screen and (max-width: 768px) {
  #circle-main .header .cover .title .join-close {
    display: flex;
    justify-content: center;
    margin-top: 10px
  }
}

#circle-main .header .cover .title .join-close span {
  border: 2px solid #FD5E3A;
  border-radius: 100px;
  display: block;
  padding: 6px 50px;
  font-size: 0.8rem;
  color: #ffffff;
  background-color: #FD5E3A;
  font-weight: bold
}

.Item-Content {
  position: relative;
  padding:0;
  background: #eee;
}

/* ラベル部分 左上に表示 */
.Item-Content-Flg1::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 7rem solid transparent;
  border-left: 7rem solid #FD5E3A; /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}
.Item-Content-Flg1::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32px 24px"><path class="st0" fill="%23ffffff" d="M32.3,18.2h-0.7v-5.1c0-2.8-1.2-5.4-3-7.2s-4.5-3-7.2-3c-2.9,0-5.4,1.2-7.2,3s-3,4.5-3,7.2v5.1h-0.7  c-2.6,0-4.5,2-4.5,4.5v12.6c0,2.6,1.9,4.5,4.5,4.5h21.9c2.6,0,4.5-1.9,4.5-4.5V22.7C36.8,20.1,34.7,18.2,32.3,18.2z M15.5,13.1 c0-1.6,0.6-3,1.7-4c1-1,2.5-1.7,4-1.7s3,0.6,4.1,1.7s1.7,2.5,1.7,4v5.1H15.2v-5.1H15.5z M22.5,30.3l0.8,4.7h-2h-2l0.8-4.7  c-1-0.4-2-1.7-2-2.9c0-1.8,1.5-3.1,3.1-3.1c1.8,0,3.2,1.5,3.2,3.1C24.5,28.7,23.7,29.9,22.5,30.3z"/></svg>');
  display: block;
  top: 15px;
  left:15px;
  color: #fff; /* 文字色はここで変更 */
  position: absolute;
  z-index: 101
  ;
}

.Item-Content-Flg2::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 4rem solid transparent;
  border-left: 4rem solid #FD5E3A; /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}
.Item-Content-Flg2::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"　width="35" height="35" viewBox="0 0 32px 24px"><path class="st0" fill="%23ffffff" d="M21.6,10.3h-0.4V7.7c0-1.4-0.7-2.9-1.6-3.8C18.7,3,17.4,2.4,16,2.4c-1.6,0-2.9,0.7-3.8,1.6s-1.6,2.3-1.6,3.8v2.6h-0.4c-1.3,0-2.3,1-2.3,2.3v6.5c0,1.3,1,2.3,2.3,2.3h11.4c1.3,0,2.3-1,2.3-2.3v-6.5C23.9,11.4,22.9,10.3,21.6,10.3z M12.9,7.7c0-0.8,0.3-1.6,0.9-2.1c0.5-0.5,1.3-0.9,2.1-0.9c0.8,0,1.6,0.3,2.1,0.9c0.5,0.7,0.9,1.3,0.9,2.1v2.6h-6.1V7.7H12.9z M16.5,16.7l0.4,2.5h-1h-1l0.4-2.5c-0.5-0.3-1-0.9-1-1.6c0-0.9,0.8-1.6,1.6-1.6c0.9,0,1.7,0.8,1.7,1.6C17.6,15.8,17.2,16.4,16.5,16.7z"/></svg>');
  display: block;
  top: 6px;
  left:6px;
  color: #fff; /* 文字色はここで変更 */
  position: absolute;
  z-index: 101
  ;
}
.Item-Content-Flg3::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 4rem solid transparent;
  border-left: 4rem solid #00bfff; /* ラベルの色はここで変更 */
  position: absolute;
  z-index: 100;
}
.Item-Content-Flg3::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"　width="35" height="35" viewBox="0 0 32px 24px"><path class="st0" fill="%23ffffff" d="M21.6,10.3h-0.4V7.7c0-1.4-0.7-2.9-1.6-3.8C18.7,3,17.4,2.4,16,2.4c-1.6,0-2.9,0.7-3.8,1.6s-1.6,2.3-1.6,3.8v2.6h-0.4c-1.3,0-2.3,1-2.3,2.3v6.5c0,1.3,1,2.3,2.3,2.3h11.4c1.3,0,2.3-1,2.3-2.3v-6.5C23.9,11.4,22.9,10.3,21.6,10.3z M12.9,7.7c0-0.8,0.3-1.6,0.9-2.1c0.5-0.5,1.3-0.9,2.1-0.9c0.8,0,1.6,0.3,2.1,0.9c0.5,0.7,0.9,1.3,0.9,2.1v2.6h-6.1V7.7H12.9z M16.5,16.7l0.4,2.5h-1h-1l0.4-2.5c-0.5-0.3-1-0.9-1-1.6c0-0.9,0.8-1.6,1.6-1.6c0.9,0,1.7,0.8,1.7,1.6C17.6,15.8,17.2,16.4,16.5,16.7z"/></svg>');
  display: block;
  top: 6px;
  left:6px;
  color: #fff; /* 文字色はここで変更 */
  position: absolute;
  z-index: 101
  ;
}
.timeline>.private-circle {
  border: 3px solid #FD5E3A;
}
.timeline>.myspace-only {
  border: 3px solid #00bfff;
}

.owner {
  position   : relative;                /* 指定した分だけ相対的に移動 */
}
.owner:hover .balloon {
  display: inline;                /* インライン要素として表示 */
}
.balloon {
  position   : absolute;                /* 親要素を基準 */
  display: none;                        /* 要素を非表示 */
  padding: 10px;                         /* テキストの前後の余白 */
  background-color: rgba(0, 0, 0, 0.80);       /* 背景色（透明度） */
  width:140px;                          /* 吹き出し全体の幅 */
  left : 50;                           /* 表示位置 */
  bottom : 100%;                        /* 表示位置 */
  margin-bottom : 12px;                 /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  border-radius: 5px;
  color : #ffffff;
}
.balloon:after{
  border-top: 12px solid rgba(0, 0, 0, 0.80);    /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;    /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;   /* 吹き出し口の幅１／２ */
  bottom: -6px;                          /* 吹き出し口の位置調整 */
  left : 5%;                             /* 吹き出し口の横位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
.action-overlay > .container .action-all , .action-overlay > .container .tools {
  display:flex;
  justify-content: space-between;
}

 .action-overlay > .container .tools .photo ,.action-overlay > .container .tools .emoji ,.action-overlay > .container .tools .owner {
  margin: 0 4px
}

@media screen and (max-width: 768px) {
  .action-overlay > .container .tools .photo, .action-overlay > .container .tools .emoji ,.action-overlay > .container .tools .owner{ 
    margin: 0 2px
  }
}

.action-overlay > .container .tools .photo svg,.action-overlay > .container .tools .emoji svg ,.action-overlay > .container .tools .owner svg {
  width: 42px;
  fill: #24a7ff;
  cursor: pointer;
  padding: 6px
}

@media screen and (max-width: 768px) {
  .action-overlay > .container .tools .photo svg ,.action-overlay > .container .tools .emoji svg ,.action-overlay > .container .tools .owner svg {
    width: 38px
  }
}

.action-overlay > .container .tools .photo svg:hover ,.action-overlay > .container .tools .emoji svg:hover ,.action-overlay > .container .tools .owner svg:hover{
  opacity: 0.8
}

.action-overlay > .container .tools .photo svg:active ,.action-overlay > .container .tools .emoji svg:active ,.action-overlay > .container .tools .owner svg:active {
  transform: translateY(1px)
}

.timeline>.composer .tools button {
  cursor: pointer;
  border: none;
  background-color: #24a7ff;
  border-radius: 100px;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 34px;
  font-size: 1rem;
  margin-left: 18px
}

@media screen and (max-width: 768px) {
  .timeline>.composer .tools button {
    margin-left: 12px;
    padding: 6px 25px;
    font-size: 0.9rem
  }
}

.timeline>.composer .tools button:hover {
  opacity: 0.8
}

.timeline>.composer .tools button:active {
  transform: translateY(1px)
}

.timeline>.composer .tools button:focus {
  outline: 0
}

.timeline>.composer .tools .owner #chuo:checked + label #icon-owner{
  fill: #EAEAEA;
}

.action-overlay .action-all .tools .owner #chuo:checked + label #icon-owner,
.action-overlay .action-all .tools .owner #chuo1:checked + label #icon-owner,
.action-overlay .action-all .tools .owner #chuo2:checked + label #icon-owner,
.action-overlay .action-all .tools .owner #chuo4:checked + label #icon-owner{
  fill: #EAEAEA;
}

#settings #container .basic section .setting-rss{
  display: block!important;
}

#settings .setting-rss>div {
 display: block!important;
 border: 1px solid #D5D5D5;
 border-radius: 6px;
 padding-top: 10px;
 padding-left: 20px;
 padding-right: 20px;
 padding-bottom: 20px;
 margin-bottom: 10px
}

#settings .setting-rss>div>div {
 align-items: center;
 justify-content: flex-end
}

#settings .setting-rss>div>div p {
 margin-right: 20px
}

#settings .setting-rss>div>div select {
 border-bottom: 1px solid #D5D5D5;
 border-left: none;
 border-right: none;
 border-top: none;
 padding: 5px 10px
}

#settings .setting-rss button {
 background-color: #24a7ff;
 border: none;
 border-radius: 100px;
 font-size: 1rem;
 color: #ffffff;
 font-weight: bold;
 padding: 10px 30px;
 display: block;
 cursor: pointer;
 margin-left: auto;
 transition: 0.1s linear opacity
}

#settings .setting-rss button:hover {
 opacity: 0.8
}

#settings #container .basic section .setting-rss .item>textarea { 
 display: block;
 border-radius: 6px;
 font-size: 1.2rem;
 padding: 18px 15px;
 border: 1px solid #D5D5D5;
 outline: none;
 background: none;
 width: 100%;
 box-sizing: border-box
}

header .navbar .notification .box-notification ul>a {
  display: flex!important;
  padding:0!important;
}

header .navbar .notification .box-notification ul>a div {
  padding: 15px 0!important;
}

header .navbar .notification .box-notification ul>a div:first-child {
  border-right: 1px solid #E6ECF0;
}

header .navbar .notification .box-notification ul>a:hover {
  background-color: #fff!important;
  border-radius: 0 0 6px 6px
}

header .navbar .notification .box-notification ul>a div:hover {
  background-color: #f7f7f7!important;
  border-radius: 0 0 6px 6px
}


.timeline>.post>.user .data .posted-date {
  display: flex;
}

.timeline>.post>.user .data .posted-date .friend-only , .timeline>.post>.user .data .posted-date .circle-lock{
  margin-left: 5px;
}

.timeline>.post>.user .data .posted-date .friend-only , .timeline>.post>.user .data .posted-date .circle-lock {
  margin: 0 4px
}

@media screen and (max-width: 768px) {
  .timeline>.post>.user .data .posted-date .friend-only , .timeline>.post>.user .data .posted-date .circle-lock {
    margin: 0 2px
  }
}

.timeline>.post>.user .data .posted-date .friend-only , .timeline>.post>.user .data .posted-date .circle-lock {
  width: 15px;
  fill: #535353;
  cursor: pointer;
  padding: 2px
}

@media screen and (max-width: 768px) {
  .timeline>.post>.user .data .posted-date .friend-only , .timeline>.post>.user .data .posted-date .circle-lock {
    width: 15px
  }
}

.timeline>.post>.user .data .posted-date .friend-only , .timeline>.post>.user .data .posted-date .circle-lock {
  opacity: 0.8
}

.timeline>.post>.user .data .posted-date .friend-only , .timeline>.post>.user .data .posted-date .circle-lock {
  transform: translateY(1px)
}


/* .timeline>.post>.user .data .posted-date .day-before {
  margin-right: 5px;
} */

.timeline>.post>.user a:last-child {
  margin-right: 0px;
}

@media screen and (max-width: 768px) {
  .timeline>.post>.user a {
    margin-right: 0px
  }
}

#notifications {
  padding: 0 50px
}

@media screen and (max-width: 992px) {
  #notifications {
    padding: 0 30px
  }
}

@media screen and (max-width: 768px) {
  #notifications {
    padding: 0 10px
  }
}

#notifications #container {
  max-width: 1365px;
  margin: 30px auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr 1fr;
  grid-template-columns: 1fr 2fr 1fr;
  -moz-column-gap: 26px;
  column-gap: 26px
}

@media screen and (max-width: 768px) {
  #notifications #container {
    margin-top: 10px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr
  }
}

#notifications #container aside nav.tab {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.0313725)
}

#notifications #container aside nav.tab ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  padding: 0;
  margin: 0 0 20px 0
}

#notifications #container aside nav.tab ul li {
  width: 100%
}

#notifications #container aside nav.tab ul li a {
  color: #333;
  fill: #333
}

#notifications #container aside nav.tab ul li a.current {
  position: relative;
  color: #24a7ff
}

#notifications #container aside nav.tab ul li a.current:after {
  content: '';
  bottom: -14px;
  position: absolute;
  width: 0;
  height: 0;
  left: calc(50% - 14px);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid #ffffff;
  transition: 0.1s linear border-top
}

#notifications #container aside nav.tab ul li a.current.home svg {
  fill: #24a7ff
}

#notifications #container aside nav.tab ul li a {
  padding: 15px 0;
  display: block;
  text-decoration: none;
  color: #9197A3;
  font-weight: bold;
  transition: 0.1s linear color
}

#notifications #container aside nav.tab ul li a:hover {
  color: #24a7ff
}

#notifications #container aside nav.tab ul li a div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

#notifications #container aside nav.tab ul li a div:active {
  transform: translateY(1px)
}

#notifications #container aside nav.tab ul li a:hover svg {
  fill: #24a7ff
}

#notifications #container aside nav.tab ul li .home svg {
  width: 26px;
  height: 26px;
  fill: #9197A3
}

#notifications #container aside nav.stamp {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.0313725);
  height: 52px;
  overflow: hidden;
  margin-bottom: 20px
}

#notifications #container aside nav.stamp ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0;
  margin: 0 0 20px 0
}

#notifications #container aside nav.stamp ul li {
  height: 100%;
  width: 100%;
  text-align: center;
  display: inline-block
}

#notifications #container aside nav.stamp ul li:first-child {
  margin-left: 0px
}

#notifications #container aside nav.stamp ul li:last-child {
  margin-right: 0px
}

#notifications #container aside nav.stamp ul li a {
  text-decoration: none;
  display: inline-block;
  height: 100%;
  width: 100%
}

#notifications #container aside nav.stamp ul li a.current {
  border-bottom: 4px solid #24a7ff
}

#notifications #container aside nav.stamp ul li a:hover {
  border-bottom: 4px solid #9197A3
}

#notifications #container aside nav.stamp ul li a:hover img {
  transform: scale(1.4);
  display: block
}

#notifications #container aside nav.stamp ul li a:active img {
  transform: scale(1.8)
}

#notifications #container aside nav.stamp ul li a img {
  width: 28px;
  display: block;
  padding-top: 10px;
  margin: 0 auto;
  transition: transform ease 0.1s
}

#notifications #container aside nav.stamp ul li a span {
  font-size: 0.7rem;
  color: #333;
  display: inline-block;
  padding-bottom: 8px
}

#notifications #container .profile {
  position: relative;
  padding-bottom: 60px
}

#notifications #container .profile .more-btn {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  color: #24a7ff;
  z-index: 1;
  cursor: pointer
}

#notifications #container .profile .more-btn::before {
  font-weight: bold;
  content: "続きを読む"
}

#notifications #container .profile p {
  position: relative;
  overflow: hidden;
  height: 160px
}

#notifications #container .profile p::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  content: "";
  border-radius: 0px 0px 6px 6px
}

#notifications #container .profile .more {
  display: none
}

#notifications #container .profile .more:checked~.more-btn::before {
  content: "閉じる"
}

#notifications #container .profile .more:checked~p {
  height: auto
}

#notifications #container .profile .more:checked~p::before {
  display: none
}

#notifications #container .box-profile {
  margin-bottom: 20px
}

#notifications #container .box-profile .cover {
  background-color: #6bb3c7;
  border-radius: 8px 8px 0 0;
  height: 130px;
  padding-top: 58px;
  display: flex;
  justify-content: center
}

#notifications #container .box-profile .cover .image {
  width: 136px;
  height: 136px;
  overflow: hidden;
  border-radius: 100px;
  border: 4px solid #ffffff
}

#notifications #container .box-profile .cover .image img {
  width: 100%;
  height: auto;
  display: block
}

#notifications #container .box-profile h1 {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 75px;
  margin-bottom: 0
}

#notifications #container .box-profile .counter {
  display: flex;
  text-align: center;
  justify-content: center;
  padding: 26px 0
}

#notifications #container .box-profile .counter>div {
  padding: 0 20px
}

#notifications #container .box-profile .counter .follow {
  border-right: 1px solid #9197A3
}

#notifications #container .box-profile .counter a {
  font-size: 1.8rem;
  text-decoration: none;
  color: #333
}

#notifications #container .box-profile .counter a div {
  font-size: 0.8rem
}

#notifications #container .box-profile .button {
  padding: 0 20px
}

#notifications #container .box-profile .button a {
  background-color: #24a7ff;
  color: #ffffff;
  padding: 10px 0;
  width: 100%;
  display: block;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  border-radius: 100px;
  margin-bottom: 10px;
  transition: 0.1s linear opacity
}

#notifications #container .box-profile .button a:hover {
  opacity: 0.8
}

#notifications #container .box-profile .button a:active {
  transform: translateY(1px)
}

#notifications #container .box-profile .button a:nth-child(2) {
  border: 2px solid #24a7ff;
  background-color: #ffffff;
  color: #24a7ff
}

#notifications #container .box-profile p {
  font-size: 0.8rem;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  line-height: 1.6;
  margin: 0
}

#notifications #container .box-notification .title a:active {
  transform: translateY(1px)
}

#notifications #container .box-notification ul {
  list-style: none;
  margin: 0;
  padding: 0
}

#notifications #container .box-notification ul li {
  border-top: 1px solid #E6ECF0
}

#notifications #container .box-notification ul li>a {
  display: flex;
  text-decoration: none;
  padding: 10px 20px;
  transition: 0.1s linear background-color
}

#notifications #container .box-notification ul li>a:hover {
  background-color: #F7F7F7
}

#notifications #container .box-notification ul li>a .image {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 100px
}

#notifications #container .box-notification ul li>a .image img {
  width: 100%;
  height: auto;
  display: block
}

#notifications #container .box-notification ul li>a p {
  font-size: 0.8rem;
  margin-left: 10px;
  color: #333;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4
}

#notifications #container .box-notification ul li>a>.notifications-point {
  font-size: 0.3rem;
  color: #24a7ff;
  
}

#notifications #container .box-notification ul li>a>.notifications-done{
  color: #9197A3;
  font-weight:normal;
  
}

#notifications #container .box-notification ul>a {
  text-align: center;
  display: block;
  padding: 15px 0;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  border-top: 1px solid #E6ECF0;
  transition: 0.1s linear background-color
}

#notifications #container .box-notification ul>a:hover {
  background-color: #F7F7F7;
  border-radius: 0 0 6px 6px
}

#notifications #container .box-notification ul>a>div {
  width: 100%;
  height: 100%;
  display: inline-block
}

#notifications #container .box-notification ul>a>div:active {
  transform: translateY(1px)
}

.box .button {
  display: flex;
  padding: 0 20px 10px 20px;
  width:100%;
}

.box .button h3 {
  margin-right: auto;
  font-size: 0.7rem;
  background-color: #6bb3c7;
  color: #ffffff;
  padding:5px 10px 5px 10px;
  border-radius: 6px;
}

.box .button .all a, .box .button .unread a {
  margin-right: 10px;
  font-size: 0.7rem;
  padding:5px 10px 5px 10px;
  border-radius: 6px;
  text-decoration: none;
}

.box .button .all a:hover, .box .button .unread a:hover {
  opacity: 0.7
}

.box .button .all a{
  background-color: #6bb3c7;
  color: #ffffff;
  font-weight: bold;
}

.box .button .unread a {
  background-color: #9197A3;
  color: #000000;
}


.timeline>.post>.feedback .stamp .pochi {
  border :solid 1px #9197A3;
  border-radius: 50px;
  margin:5px;
  padding:2px
}


.timeline>.post>.feedback .stamp ul li img {
  margin-left: 2px;
}

.timeline>.post>.feedback .stamp span {
  margin-left: 0px !important;
  margin-right:2px;
  font-size:0.9rem;
}

.timeline>.post>.feedback .stamp .pochi {
  border :solid 1px #9197A3;
  border-radius: 50px;
  margin:5px;
  padding:2px
}

.timeline>.post>.feedback .stamp {
  position   : relative;                /* 指定した分だけ相対的に移動 */
}

.timeline>.post>.feedback .stamp:hover .balloon {
  display: inline;                /* インライン要素として表示 */
}

.balloon {
  position   : absolute;                /* 親要素を基準 */
  display: none;                        /* 要素を非表示 */
  padding: 10px;                         /* テキストの前後の余白 */
  background-color: rgba(0, 0, 0, 0.80);       /* 背景色（透明度） */
  width:140px;                          /* 吹き出し全体の幅 */
  left : 50;                           /* 表示位置 */
  bottom : 100%;                        /* 表示位置 */
  margin-bottom : 12px;                 /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  border-radius: 5px;
  color : #ffffff;
}
.balloon:after{
  border-top: 12px solid rgba(0, 0, 0, 0.80);    /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;    /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;   /* 吹き出し口の幅１／２ */
  bottom: -6px;                          /* 吹き出し口の位置調整 */
  left : 5%;                             /* 吹き出し口の横位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
.timeline>.post>.feedback .stamp .stanp-who {
  width: 100%;
  height: 100%;
}

.timeline>.post>.feedback .stamp .stamp-who li  {
  width: 100%;
  height: 100%;
}

.timeline>.post>.feedback .stamp .stamp-who li a img {
  width: 100%;
  height: 100%;
  display: block
}
.timeline>.post>.feedback .stamp .stamp-who li a span {
  padding-left: 10px;
}

.timeline>.post>.feedback .stamp .stamp-who li .icon-action img {
  width:40px;
  height:40px;

}

.timeline>.post>.feedback .stamp .stamp-who {
  display: flex;
  flex-direction:column;
}

.timeline>.post>.post-more {
  position: relative;
  padding-bottom: 60px
}

.timeline>.post>.post-more .more-btn {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  color: #24a7ff;
  z-index: 1;
  cursor: pointer
}

.timeline>.post>.post-more .more-btn::before {
  font-weight: bold;
  content: "続きを読む"
}

.timeline>.post>.post-more p {
  position: relative;
  overflow: hidden;
  height: 160px
}

.timeline>.post>.post-more p::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  content: "";
  border-radius: 0px 0px 6px 6px
}

.timeline>.post>.post-more .more {
  display: none
}

.timeline>.post>.post-more .more:checked~.more-btn::before {
  content: "閉じる"
}

.timeline>.post>.post-more .more:checked~p {
  height: auto
}

.timeline>.post>.post-more .more:checked~p::before {
  display: none
}

.timeline>.post>.post-more-rss>.rss {
  border-left: 3px solid #D5D5D5;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.5rem
}

.timeline>.post>.post-more-rss>.rss>p>span {
  font-weight: bold;
  display: block;
  font-size: 1rem;
  margin-bottom: 10px;
  color: #333333
}

.timeline>.post>.post-more-rss>img{
  width:100%;
}


.timeline>.post>.post-more-rss>.rss>p>span:before {
  content: 'RSS';
  background-color: #F08B00;
  color: #ffffff;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 0.6rem;
  margin-right: 10px
}


#circle-add .setting-rss button , #settings .setting-rss-delete button{
  margin-bottom:10px;
}

#settings .setting-rss-delete>div {
  border: 1px solid #D5D5D5;
  border-radius: 6px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin-bottom: 10px
}

#settings .setting-rss-delete>div>div {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

#settings .setting-rss-delete>div>div p {
  margin-right: 20px
}

#settings .setting-rss-delete>div>div select {
  border-bottom: 1px solid #D5D5D5;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 5px 10px
}

#settings .setting-rss-delete button {
  background-color: #24a7ff;
  border: none;
  border-radius: 100px;
  font-size: 1rem;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 30px;
  display: block;
  cursor: pointer;
  margin-left: auto;
  transition: 0.1s linear opacity
}

#settings .setting-rss-delete button:hover {
  opacity: 0.8
}

#settings #container .basic section .setting-rss-delete{
  display: block!important;
}

#settings .setting-rss-delete>h5 {
  color:#fa0000;
  margin-bottom: 10px;
 }

#settings .setting-rss-delete>div {
 display: block!important;
 border: 1px solid #fa0000;
 border-radius: 6px;
 padding-top: 10px;
 padding-left: 20px;
 padding-right: 20px;
 padding-bottom: 20px;
 margin-bottom: 10px
}

#settings .setting-rss-delete>div>div {
 align-items: center;
 justify-content: flex-end
}

#settings .setting-rss-delete>div>div p {
 margin-right: 20px
}

#settings .setting-rss-delete>div>div select {
 border-bottom: 1px solid #D5D5D5;
 border-left: none;
 border-right: none;
 border-top: none;
 padding: 5px 10px
}

#settings .setting-rss-delete button {
 background-color: #24a7ff;
 border: none;
 border-radius: 100px;
 font-size: 1rem;
 color: #ffffff;
 font-weight: bold;
 padding: 10px 30px;
 display: block;
 cursor: pointer;
 margin-left: auto;
 transition: 0.1s linear opacity
}

#settings .setting-rss-delete button:hover {
 opacity: 0.8
}
#settings #container .basic section .setting-rss-delete .item>textarea { 
  display: block;
  border-radius: 6px;
  font-size: 1.2rem;
  padding: 18px 15px;
  border: 1px solid #D5D5D5;
  outline: none;
  background: none;
  width: 100%;
  box-sizing: border-box
}



#circle-add .setting-rss-delete>div {
  border: 1px solid #fa0000;
  border-radius: 6px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin-bottom: 10px
}

#circle-add .setting-rss-delete>h5 {
 margin-bottom: 10px;
 color:#fa0000;
}

#circle-add .setting-rss-delete>div>div {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

#circle-add .setting-rss-delete>div>div p {
  margin-right: 20px
}

#circle-add .setting-rss-delete>div>div select {
  border-bottom: 1px solid #D5D5D5;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 5px 10px
}

#circle-add .setting-rss-delete button {
  background-color: #24a7ff;
  border: none;
  border-radius: 100px;
  font-size: 1rem;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 30px;
  display: block;
  cursor: pointer;
  margin-left: auto;
  transition: 0.1s linear opacity;
}

#circle-add .setting-rss-delete button:hover {
  opacity: 0.8
}

.timeline>.post {
  word-break: break-all;
}

.action-overlay .container p {
    font-weight: normal;
    font-size: 0.9rem;
  }

.action-overlay .container .rss>p span {
    font-weight: bold;
    display: block;
    font-size: 1rem;
    margin-bottom: 10px;
    color: #333333
  }
  
.action-overlay .container .rss>p span:before {
    content: 'RSS';
    color: #ffffff;
    background-color: #F08B00;
    border-radius: 3px;
    padding: 3px 5px;
    margin:0 5px;
    font-size: 0.6rem;
    margin-right: 10px;
    color: #333;
    font-weight: bold;
  }

.action-overlay .container .item {
  position: relative;
}

.close-button-2 {
  position: relative;
  top: 0;
  left: 95%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
}