@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&display=swap");
.txt_c {
  text-align: center;
}

.txt_r {
  text-align: right;
}

.txt_l {
  text-align: left;
}

.float_r {
  float: right;
}

.float_l {
  float: left;
}

.pc__only {
  display: block;
}

.editable {
  min-height:3rem;
  field-sizing: content;
  min-height: min-content;
}

@media (max-width: 767px) {
  .pc__only {
    display: none;
  }
}

.sp__only {
  display: none;
}
@media (max-width: 767px) {
  .sp__only {
    display: block;
  }
}

img {
  width: 100%;
  /* height: auto; */
  pointer-events: none;
  object-fit: cover;
}

button:disabled {
  opacity: 0.7;
}

.a__block {
  display: block;
  width: 100%;
  height: 100%;
}

.hover {
  transition: opacity 0.1s;
}
@media (min-width: 768px) {
  .hover:hover {
    opacity: 0.4;
  }
}

body {
  background: #fff;
  color: #0F172A;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  word-break: break-word;
}
@media (max-width: 767px) {
  body {
    font-size: 3.4666666667vw;
  }
}

#icon_picture img {
  border-radius: 50%;
}

.content__btn--account img {
  border-radius: 50%;

}
#container {
  padding: 0 20px;
}
@media (max-width: 767px) {
  #container {
    position: relative;
    left: 0;
    padding: 0 4vw;
    transition: left 0.5s;
  }
}

/* ------------------------------
  header
------------------------------ */
/* ログアウト時 */
@media (max-width: 767px) {
  .current__logout #site__header .content__inner {
    justify-content: left;
  }
  .current__logout #site__header .content__logo {
    margin-left: 6.4vw;
  }
}
#site__header {
  height: 68px;
  margin: 0 -20px;
  padding: 0 20px;
  background: #fff;
  border-bottom: #E2E8F0 1px solid;
}
@media (max-width: 767px) {
  #site__header {
    height: 16vw;
    margin: 0 -4vw;
    padding: 0 4vw;
  }
}
#site__header .content__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1315px;
  height: 100%;
  margin: 0 auto;
}
#site__header .content__logo {
  margin-right: 50px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 767px) {
  #site__header .content__logo {
    margin: 0 0 0 -8vw;
    font-size: 3.7333333333vw;
  }
}
@media (max-width: 767px) {
  #site__header .header__nav {
    height: 100%;
  }
}
#site__header .header__nav .header__menu {
  display: flex;
  align-items: center;
  height: 100%;
}
#site__header .header__nav .header__menu li {
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 767px) {
  #site__header .header__nav .header__menu li {
    font-size: 4.2666666667vw;
  }
}
#site__header .header__nav .header__menu li.pc__only {
  display: block;
}
@media (max-width: 767px) {
  #site__header .header__nav .header__menu li.pc__only {
    display: none;
  }
}
#site__header .header__nav .header__menu li.sp__only {
  display: none;
}
@media (max-width: 767px) {
  #site__header .header__nav .header__menu li.sp__only {
    display: block;
  }
}
#site__header .header__nav.header__nav--left {
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--left {
    display: block;
    background: #F1F5F9;
    z-index: 1;
    position: fixed;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    transition: left 0.5s;
  }
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--left .header__menu {
    display: inherit;
    padding: 16vw 0;
  }
}
#site__header .header__nav.header__nav--left .header__menu li + li {
  margin-left: 30px;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--left .header__menu li + li {
    margin: 0;
  }
}
#site__header .header__nav.header__nav--left .header__menu li a {
  display: block;
  color: #9CA3AF;
  line-height: 68px;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--left .header__menu li a {
    padding: 0 5.3333333333vw;
    line-height: 13.3333333333vw;
  }
}
#site__header .header__nav.header__nav--left .header__menu li a.active {
  color: #1F2937;
  border-bottom: #00B3DB 4px solid;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--left .header__menu li a.active {
    border-bottom: none;
  }
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--left .header__menu li.content__btn--signUp a {
    color: #00B3DB !important;
  }
}
#site__header .header__nav.header__nav--right .header__menu {
  justify-content: right;
}
#site__header .header__nav.header__nav--right .header__menu li + li {
  margin-left: 30px;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--right .header__menu li + li {
    margin-left: 5.3333333333vw;
  }
}
#site__header .header__nav.header__nav--right .header__menu .content__btn--login,
#site__header .header__nav.header__nav--right .header__menu .content__btn--logout {
  color: #00B3DB;
}
#site__header .header__nav.header__nav--right .header__menu .content__btn--signUp {
  width: 124px;
  padding-left: 0;
}
#site__header .header__nav.header__nav--right .header__menu .content__btn--post {
  width: 100px;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--right .header__menu .content__btn--search {
    width: 6.4vw;
  }
}
#site__header .header__nav.header__nav--right .header__menu .content__btn--mail a {
  position: relative;
  width: 24px;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--right .header__menu .content__btn--mail a {
    width: 6.4vw;
  }
}
#site__header .header__nav.header__nav--right .header__menu .content__btn--mail .content__mail--num {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-block;
  min-width: 17px;
  padding: 2px;
  background: #E11D48;
  border-radius: 50%;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--right .header__menu .content__btn--mail .content__mail--num {
    top: -2.6666666667vw;
    right: -2.6666666667vw;
    min-width: 4.5333333333vw;
    padding: 0.5333333333vw;
    font-size: 2.6666666667vw;
  }
}
#site__header .header__nav.header__nav--right .header__menu .content__btn--account {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
@media (max-width: 767px) {
  #site__header .header__nav.header__nav--right .header__menu .content__btn--account {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
  }
}

.hamburgerMenu__open #site__header .header__nav.header__nav--left {
  left: 0;
}

.hamburgerMenu__open #container {
  position: fixed;
  top: 0;
  left: 60%;
  width: 100%;
}

.content__btn--fixedPost {
  z-index: 1;
  position: fixed;
  right: 7%;
  bottom: 2%;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  background: #00B3DB;
  border-radius: 50%;
  text-align: center;
}
.content__btn--fixedPost img {
  width: 5.3333333333vw;
  vertical-align: top;
}

.content__ttl {
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .content__ttl {
    margin-bottom: 2.6666666667vw;
    font-size: 4.2666666667vw;
  }
}

.content__btn {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-left: 15px;
  background: #00B3DB;
  border-radius: 8px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 36px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .content__btn {
    padding-left: 4vw;
    border-radius: 2.1333333333vw;
    font-size: 3.7333333333vw;
    line-height: 9.6vw;
  }
}
.content__btn.content__btn--signUp a {
  position: relative;
  display: block;
  padding-left: 20px;
}
.content__btn.content__btn--signUp a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  width: 11px;
  height: 14px;
  background: url(/assets/images/common/icon-signUp.svg) no-repeat left top/100% auto;
}
.content__btn.content__btn--post::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: url(/assets/images/common/icon-post.svg) no-repeat left top/100% auto;
}
.content__btn.content__btn--follow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 15px;
  height: 11px;
  background: url(/assets/images/common/icon-follow.svg) no-repeat left top/100% auto;
}
.content__btn.content__btn--comment-submit {
  padding-left: 0;
  width: 40px;
  height: 40px;
}
.content__btn.content__btn--comment-submit img {
  width: 24px;
  vertical-align: middle;
}
.content__btn.content__btn--postSubmit {
  display: block;
  width: 352px;
  margin: 0 auto;
  padding-left: 0;
  font-size: 16px;
  line-height: 44px;
}
.content__btn.content__btn--postSubmit.button:disabled {
  background: #566568;
}

@media (max-width: 767px) {
  .content__btn.content__btn--postSubmit {
    width: calc(100% - 4vw);
    font-size: 4.2666666667vw;
    line-height: 11.7333333333vw;
  }
}

/* ------------------------------
  main
------------------------------ */
#site__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1132px;
  margin: 0 auto;
  padding-top: 25px;
}

#main__center {
  width: 58.3%;
  padding: 0 2.65%;
}
@media (max-width: 767px) {
  #main__center {
    width: 100%;
    padding: 0;
  }
}

#search {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  #search {
    margin-bottom: 0;
  }
}
#search .search__box {
  position: relative;
}
#search .search__box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url(/assets/images/common/icon-search.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  #search .search__box::before {
    left: 4vw;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
  }
}
#search .search__box #search__input {
  width: 100%;
  height: 44px;
  padding: 10px 15px 10px 35px;
  background: #F1F5F9;
  border: #D0D5DD 1px solid;
  border-radius: 8px;
  outline: none;
  -webkit-appearance: none;
  font-size: 14px;
  line-height: 44px;
}
@media (max-width: 767px) {
  #search .search__box #search__input {
    height: 11.7333333333vw;
    padding: 2.6666666667vw 4vw 2.6666666667vw 9.3333333333vw;
    border-radius: 2.1333333333vw;
    font-size: 3.7333333333vw;
    line-height: 11.7333333333vw;
  }
}
#search .search__box #search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  cursor: pointer;
  width: 10px;
  height: 10px;
  background: url(/assets/images/common/icon-delete.svg) no-repeat right center/100% auto;
}
@media (max-width: 767px) {
  #search .search__box #search__input::-webkit-search-cancel-button {
    width: 2.6666666667vw;
    height: 2.6666666667vw;
  }
}
#search .search__box #search__input::-moz-placeholder {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #9CA3AF;
}
#search .search__box #search__input::placeholder {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #9CA3AF;
}
@media (max-width: 767px) {
  #search .search__box #search__input::-moz-placeholder {
    font-size: 3.7333333333vw;
  }
  #search .search__box #search__input::placeholder {
    font-size: 3.7333333333vw;
  }
}

.search__modal--sp {
  display: none;
  z-index: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 95%;
  padding: 4vw;
  background: #fff;
  border-radius: 1.0666666667vw;
}
.search__modal--sp .search__modal--close {
  cursor: pointer;
  position: absolute;
  top: -8vw;
  right: 0;
  width: 3.4666666667vw;
  height: 3.4666666667vw;
  filter: brightness(10);
}

#member {
  margin-bottom: 30px;
  padding: 20px 15px;
  background: #F9FAFB;
  border-radius: 16px;
}
@media (max-width: 767px) {
  #member {
    margin-bottom: 8vw;
    padding: 5.3333333333vw 4vw;
    border-radius: 4.2666666667vw;
  }
}
#member .member__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  #member .member__head {
    margin-bottom: 2.6666666667vw;
  }
}
#member .member__head .content__ttl {
  margin-bottom: 0;
}
#member .member__head .member__all {
  color: #00B3DB;
  font-size: 12px;
  font-weight: 500;
}
@media (max-width: 767px) {
  #member .member__head .member__all {
    font-size: 3.2vw;
  }
}
#member .member__slider .swiper-slide {
  display: block;
}
#member .member__slider .swiper-slide a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
#member .member__slider {
  position: relative;
  overflow: hidden;
}

#member .member__slider .swiper-slide .member__img {
  width: 32px;
  height: 32px;

}
@media (max-width: 767px) {
  #member .member__slider .swiper-slide .member__img {
    width: 8.5333333333vw;
  }
}
#member .member__slider .swiper-slide .member__txt {
  width: calc(100% - 42px);
}
@media (max-width: 767px) {
  #member .member__slider .swiper-slide .member__txt {
    width: calc(100% - 11.2vw);
  }
}
#member .member__slider .swiper-slide .member__txt .member__name {
  display: flex;
  align-items: center;
}
#member .member__slider .swiper-slide .member__txt .member__name .member__nameLabel {
  max-width: 50%;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 767px) {
  #member .member__slider .swiper-slide .member__txt .member__name .member__nameLabel {
    margin-right: 2.6666666667vw;
    font-size: 3.2vw;
  }
}
#member .member__slider .swiper-slide .member__txt .member__name .member__nameId {
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #64748B;
}
@media (max-width: 767px) {
  #member .member__slider .swiper-slide .member__txt .member__name .member__nameId {
    font-size: 2.9333333333vw;
  }
}
#member .member__slider .swiper-slide .member__txt .member__job {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #64748B;
  width: 100%;
}
@media (max-width: 767px) {
  #member .member__slider .swiper-slide .member__txt .member__job {
    font-size: 2.9333333333vw;
  }
}
#member .member__slider .swiper-button-prev,
#member .member__slider .swiper-button-next {
  position: absolute;
  top: 50%;
  right: -5px;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  margin-top: 0;
  background: #F9FAFB;
  box-shadow: 0px 10px 10px 10px #F9FAFB;
  z-index: 10;
}
@media (max-width: 767px) {
  #member .member__slider .swiper-button-prev,
#member .member__slider .swiper-button-next {
    right: -1.3333333333vw;
    width: 10.1333333333vw;
    height: 10.1333333333vw;
    box-shadow: 0px 2.6666666667vw 2.6666666667vw 2.6666666667vw #F9FAFB;
  }
}
#member .member__slider .swiper-button-prev::after,
#member .member__slider .swiper-button-next::after {
  width: 28px;
  height: 28px;
  background: url(/assets/images/common/btn-sliderBtn.svg) no-repeat left top/100% auto;
  font-size: 0;
}
@media (max-width: 767px) {
  #member .member__slider .swiper-button-prev::after,
#member .member__slider .swiper-button-next::after {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
  }
}
#member .member__slider .swiper-button-prev.swiper-button-disabled,
#member .member__slider .swiper-button-next.swiper-button-disabled {
  display: none;
}
#member .member__slider .swiper-button-prev {
  right: auto;
  left: -5px;
  transform: translateY(-50%) rotate(180deg);
}
@media (max-width: 767px) {
  #member .member__slider .swiper-button-prev {
    left: -1.3333333333vw;
  }
}

#topics .topics__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  #topics .topics__head .content__box.content__box--left {
    width: 53.3333333333vw;
  }
  #topics .topics__head .content__box.content__box--right {
    width: calc(100% - 58.6666666667vw);
    text-align: right;
  }
}
#topics .topics__head .content__ttl {
  margin-bottom: 0;
}
#topics .topics__head .content__ttl .topics__ttl--txt {
  display: inline-block;
  padding-left: 34px;
  background: no-repeat left center/24px auto;
  line-height: 24px;
}
@media (max-width: 767px) {
  #topics .topics__head .topics__select {
    position: relative;
    overflow: hidden;
  }
  #topics .topics__head .topics__select::before {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5.3333333333vw;
    height: 100%;
    background: #fff;
  }
  #topics .topics__head .topics__select::after {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 40%;
    right: 1.6vw;
    transform: translateY(-40%) rotate(45deg);
    width: 1.8666666667vw;
    height: 1.8666666667vw;
    border-right: #0F172A solid 2px;
    border-bottom: #0F172A solid 2px;
  }
  #topics .topics__head .topics__select #topics__select {
    outline: none;
    padding-left: 8vw;
    background: no-repeat left center/6.4vw auto;
    font-family: "Inter", sans-serif;
    font-size: 4vw;
    line-height: 6.4vw;
    font-weight: 700;
  }
}
#topics .topics__head .topics__item {
  display: inline-block;
}
#topics .topics__head .topics__item + .topics__item {
  margin-left: 30px;
  line-height: 14px;
}
@media (max-width: 767px) {
  #topics .topics__head .topics__item + .topics__item {
    margin-left: 4vw;
    line-height: 3.4666666667vw;
  }
}
#topics .topics__head .topics__item.topics__item--hashtag {
  color: #00B3DB;
}
#topics .topics__head .topics__item.topics__item--popularity {
  position: relative;
  padding-left: 20px;
  color: #344054;
}
@media (max-width: 767px) {
  #topics .topics__head .topics__item.topics__item--popularity {
    padding-left: 5.3333333333vw;
  }
}
#topics .topics__head .topics__item.topics__item--popularity::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background: url(/assets/images/common/icon-sort.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  #topics .topics__head .topics__item.topics__item--popularity::before {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
  }
}
#topics .topics__body .topics__tab {
  display: flex;
  margin-bottom: 15px;
  border-bottom: #E2E8F0 1px solid;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__tab {
    margin-bottom: 4vw;
  }
}
#topics .topics__body .topics__tab .topics__tab--item {
  cursor: pointer;
  text-align: center;
}
#topics .topics__body .topics__tab .topics__tab--item + .topics__tab--item {
  margin-left: 30px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__tab .topics__tab--item + .topics__tab--item {
    margin-left: 8vw;
  }
}
#topics .topics__body .topics__tab .topics__tab--item span {
  display: inline-block;
  font-size: 14px;
  line-height: 36px;
  font-weight: 700;
  color: #9CA3AF;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__tab .topics__tab--item span {
    font-size: 3.7333333333vw;
    line-height: 9.6vw;
  }
}
#topics .topics__body .topics__tab .topics__tab--item.js-active span {
  color: #0F172A;
  border-bottom: 2px solid #00B3DB;
}
@media (min-width: 768px) {
  #topics .topics__body .topics__tab .topics__tab--item:hover span {
    color: #0F172A;
    border-bottom: 2px solid #00B3DB;
  }
}
#topics .topics__body .topics__panel {
  position: relative;
}
#topics .topics__body .topics__panel .topics__article {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#topics .topics__body .topics__panel .topics__article.js-active {
  display: block;
}
#topics .topics__body .topics__panel .topics__article--moreBtn {
  cursor: pointer;
  width: 114px;
  margin: 15px auto 0;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  font-size: 14px;
  line-height: 36px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__panel .topics__article--moreBtn {
    width: 30.4vw;
    margin-top: 4vw;
    border-radius: 2.1333333333vw;
    font-size: 3.7333333333vw;
    line-height: 9.6vw;
  }
}
#topics .topics__body .topics__article--box {
  cursor: pointer;
  padding: 2.51%;
  border: #E2E8F0 1px solid;
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box {
    border-radius: 4.2666666667vw;
  }
}
#topics .topics__body .topics__article--box + .topics__article--box {
  margin-top: 20px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box + .topics__article--box {
    margin-top: 5.3333333333vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--owner {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--owner {
    margin-bottom: 2.6666666667vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-img {
  width: 40px;
  height: 40px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-img {
    width: 10.6666666667vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-img img {
  border-radius: 50%;
}
#topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-name {
  overflow: hidden;
  width: calc(100% - 158px);
  margin: 0 10px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-name {
    width: calc(100% - 42.1333333333vw);
    margin: 0 2.6666666667vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-name .topics__article--owner-nameLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
#topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-name .topics__article--owner-nameId {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "DM Sans", sans-serif;
  color: #64748B;
}

.topics__article--owner-desc {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height:3.5rem;
}

#topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-date {
  width: 98px;
  color: #64748B;
  text-align: right;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--owner .topics__article--owner-date {
    width: 26.1333333333vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--ttl {
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--ttl {
    margin-bottom: 2.6666666667vw;
    font-size: 4.2666666667vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--txt {
  overflow: hidden;
  width: 100%;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--txt {
    margin-bottom: 2.6666666667vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--txt p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#topics .topics__body .topics__article--box .topics__article--hashtag {
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--hashtag {
    margin-bottom: 2.6666666667vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--hashtag a {
  display: inline-block;
  margin-right: 10px;
  color: #00B3DB;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--hashtag a {
    margin-right: 2.6666666667vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--hashtag a:hover {
  text-decoration: underline;
}
#topics .topics__body .topics__article--box .topics__article--gallery {
  cursor: pointer;
}
#topics .topics__body .topics__article--box .topics__article--gallery ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--gallery ul {
    gap: 2px;
    margin-bottom: 1.3333333333vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--gallery ul li {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--gallery ul li {
    border-radius: 2.1333333333vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--gallery ul li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: auto;
}
/* 1枚 */
#topics .topics__body .topics__article--box .gallery-count-1 ul li {
  width: 100%;
  aspect-ratio: 16 / 9;
}
/* 2枚 */
#topics .topics__body .topics__article--box .gallery-count-2 ul li {
  width: calc(50% - 2px);
  aspect-ratio: 1 / 1;
}
/* 3枚: 1枚目が左半分全高、2・3枚目が右半分上下 */
#topics .topics__body .topics__article--box .gallery-count-3 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
#topics .topics__body .topics__article--box .gallery-count-3 ul li:first-child {
  grid-row: 1 / 3;
}
#topics .topics__body .topics__article--box .gallery-count-3 ul li {
  width: 100%;
  aspect-ratio: auto;
  height: 100%;
  min-height: 100px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .gallery-count-3 ul li {
    min-height: 21.3333333333vw;
  }
}
/* 4枚: 2x2グリッド */
#topics .topics__body .topics__article--box .gallery-count-4 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
#topics .topics__body .topics__article--box .gallery-count-4 ul li {
  width: 100%;
  aspect-ratio: auto;
  height: 100%;
  min-height: 100px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .gallery-count-4 ul li {
    min-height: 21.3333333333vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list {
  display: flex;
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li {
  width: 33.333333%;
  line-height: 28px;
  text-align: center;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li {
    line-height: 7.4666666667vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li .content__wrap {
  display: inline-block;
  cursor: pointer;
  transition: color 0.3s;
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li .content__wrap svg {
  vertical-align: middle;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li .content__wrap svg {
    width: 5.6vw;
    height: 5.6vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li .content__wrap svg path {
  transition: all 0.3s;
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li .content__wrap span {
  display: inline-block;
  font-family: "Lato", sans-serif;
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconGood .content__wrap:hover {
  color: #F87171;
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconGood .content__wrap:hover path {
  fill: #F87171;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconGood .content__wrap svg {
    width: 4.8vw;
    height: 4.5333333333vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconGood.topics__article--icon-active .content__wrap {
  color: #F87171;
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconGood.topics__article--icon-active .content__wrap path {
  fill: #F87171;
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconShare {
  position: relative;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconShare svg {
    width: 4.2666666667vw;
    height: 4.5333333333vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconShare .topics__article--iconShare-list {
  display: none;
  z-index: 1;
  position: absolute;
  top: 40px;
  width: 240px;
  height: 120px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.3);
  font-family: "Inter", sans-serif;
  color: #344054;
  font-size: 14px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconShare .topics__article--iconShare-list {
    top: 8vw;
    right: 0;
    width: 64vw;
    height: 32vw;
    font-size: 3.7333333333vw;
  }
}
#topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconShare .topics__article--iconShare-list ul li {
  padding: 0 20px;
  line-height: 40px;
  text-align: left;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box .topics__article--icon .topics__article--icon-list > li.topics__article--iconShare .topics__article--iconShare-list ul li {
    padding: 0 5.3333333333vw;
    line-height: 10.6666666667vw;
  }
}
#topics .topics__body .topics__article--box.js-active .topics__article--icon .topics__article--icon-list > li.topics__article--iconShare {
  background: #F8FAFC;
  border-radius: 8px;
}
@media (max-width: 767px) {
  #topics .topics__body .topics__article--box.js-active .topics__article--icon .topics__article--icon-list > li.topics__article--iconShare {
    border-radius: 2.1333333333vw;
  }
}

/* モーダル時の背景 */
.modal__layer {
  display: none;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* トピックス - modal */
.topics__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 740px;
  max-height: calc(100% - 60px);
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .topics__modal {
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
  }
}
.topics__modal::-webkit-scrollbar {
  display: none;
}

#topics--content {
  display: block;
  position:relative;
  overflow-y: auto;
  max-width:none;
  max-height:none;
}

#topics--content .topics__modal--box {
  margin-top:0;

}

.topics__modal .topics__modal--close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.topics__modal .topics__modal--box {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 40px;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box {
    margin-top: 8vw;
    padding: 4vw;
    border-radius: 0;
  }
}
.topics__modal .topics__modal--box .content__box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box {
    margin-bottom: 4vw;
  }
}
.topics__modal .topics__modal--box .content__box .topics__article--hashtag {
  width: calc(100% - 98px);
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box .topics__article--hashtag {
    width: calc(100% - 26.1333333333vw);
  }
}
.topics__modal .topics__modal--box .content__box .topics__article--hashtag a {
  display: inline-block;
  margin-right: 10px;
  font-size: 15px;
  color: #00B3DB;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box .topics__article--hashtag a {
    margin-right: 2.6666666667vw;
    font-size: 4vw;
  }
}
.topics__modal .topics__modal--box .content__box .topics__article--hashtag a:hover {
  text-decoration: underline;
}
.topics .topics__modal .topics__modal--box .content__box .topics__article--date {
  width: 98px;
  font-family: "Lato", sans-serif;
  line-height: 22px;
  color: #94A3B8;
  text-align: right;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box .topics__article--date {
    width: 26.1333333333vw;
    line-height: 5.8666666667vw;
  }
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom {
    display: inherit;
  }
}
.topics__modal .topics__modal--box .content__box.content__box--bottom > div[class^=topics__article--] {
  width: 48%;
  margin-bottom: 0;
  padding: 10px 20px;
  border: #E2E8F0 1px solid;
  border-radius: 12px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom > div[class^=topics__article--] {
    width: 100%;
    margin-bottom: 2.6666666667vw;
    padding: 2.6666666667vw 5.3333333333vw;
    border-radius: 3.2vw;
  }
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner {
    margin-bottom: 2.6666666667vw;
  }
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-img {
  width: 64px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-img {
    width: 17.0666666667vw;
  }
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-img img {
  border-radius: 50%;
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-name {
  overflow: hidden;
  width: calc(100% - 184px);
  margin: 0 10px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-name {
    width: calc(100% - 49.0666666667vw);
    margin: 0 2.6666666667vw;
  }
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-name .topics__article--owner-nameLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-name .topics__article--owner-nameId {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "DM Sans", sans-serif;
  color: #64748B;
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-followBtn {
  width: 100px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--owner .topics__article--owner-followBtn {
    width: 26.6666666667vw;
  }
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--icon .topics__article--icon-list .topics__article--iconGood .topics__article--iconGood-num {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  vertical-align: middle;
  color: #F87171;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--icon .topics__article--icon-list .topics__article--iconGood .topics__article--iconGood-num {
    font-size: 4.2666666667vw;
  }
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--icon .topics__article--icon-list .topics__article--iconCopy {
  position: relative;
  margin-left: 60px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--icon .topics__article--icon-list .topics__article--iconCopy {
    margin-left: 16vw;
  }
}
.topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--icon .topics__article--icon-list .topics__article--iconCopy::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  background: #E2E8F0;
  width: 1px;
  height: 150%;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .content__box.content__box--bottom .topics__article--icon .topics__article--icon-list .topics__article--iconCopy::before {
    left: -8vw;
  }
}
.topics__modal .topics__modal--box .topics__article--ttl {
  margin-bottom: 10px;
  font-size: 25px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--ttl {
    margin-bottom: 2.6666666667vw;
    font-size: 6.6666666667vw;
  }
}
.topics__modal .topics__modal--box .topics__article--icon {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--icon {
    margin-bottom: 5.3333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--icon .topics__article--icon-list {
  display: flex;
  justify-content: right;
}
.topics__modal .topics__modal--box .topics__article--icon .topics__article--icon-list li + li {
  margin-left: 20px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--icon .topics__article--icon-list li + li {
    margin-left: 5.3333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--icon .topics__article--icon-list li svg {
  vertical-align: middle;
}
.topics__modal .topics__modal--box .topics__article--icon .topics__article--icon-list li span {
  font-family: "Lato", sans-serif;
  color: #94A3B8;
  font-weight: 500;
}
.topics__modal .topics__modal--box .topics__article--icon.topics__article--iconBottom .topics__article--icon-list {
  justify-content: center;
  align-items: center;
  height: 100%;
}
.topics__modal .topics__modal--box .topics__article--gallery {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--gallery {
    margin-bottom: 5.3333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--gallery ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--gallery ul {
    gap: 2px;
    margin-bottom: 2.6666666667vw;
  }
}
.topics__modal .topics__modal--box .topics__article--gallery ul li {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--gallery ul li {
    border-radius: 2.1333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--gallery ul li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* 1枚 */
.topics__modal .topics__modal--box .gallery-count-1 ul li {
  width: 100%;
  aspect-ratio: 16 / 9;
}
/* 2枚 */
.topics__modal .topics__modal--box .gallery-count-2 ul li {
  width: calc(50% - 2px);
  aspect-ratio: 1 / 1;
}
/* 3枚: 1枚目が左半分全高、2・3枚目が右半分上下 */
.topics__modal .topics__modal--box .gallery-count-3 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.topics__modal .topics__modal--box .gallery-count-3 ul li:first-child {
  grid-row: 1 / 3;
}
.topics__modal .topics__modal--box .gallery-count-3 ul li {
  width: 100%;
  aspect-ratio: auto;
  height: 100%;
  min-height: 120px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .gallery-count-3 ul li {
    min-height: 26.6666666667vw;
  }
}
/* 4枚: 2x2グリッド */
.topics__modal .topics__modal--box .gallery-count-4 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.topics__modal .topics__modal--box .gallery-count-4 ul li {
  width: 100%;
  aspect-ratio: auto;
  height: 100%;
  min-height: 120px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .gallery-count-4 ul li {
    min-height: 26.6666666667vw;
  }
}
.topics__modal .topics__modal--box .topics__article--txt {
  margin-bottom: 10px;
  font-size: 15px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--txt {
    margin-bottom: 2.6666666667vw;
    font-size: 4vw;
  }
}
.topics__modal .topics__modal--box .topics__article--txt p + p {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--txt p + p {
    margin-top: 5.3333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--head {
  display: flex;
  line-height: 24px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--head {
    line-height: 6.4vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--head .topics__article--content-num {
  margin-left: 10px;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #64748B;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--head .topics__article--content-num {
    margin-left: 2.6666666667vw;
    font-size: 3.7333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--head .topics__article--content-num i {
  font-style: normal;
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--form {
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--form {
    margin-bottom: 4vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--form #comment__input {
  width: calc(100% - 45px);
  height: 40px;
  padding: 5px 10px;
  border: 1px #D0D5DD solid;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--form #comment__input {
    width: calc(100% - 12vw);
    height: 10.6666666667vw;
    padding: 1.3333333333vw 2.6666666667vw;
    border-radius: 1.0666666667vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--form #comment__input::-moz-placeholder {
  line-height: 28px;
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--form #comment__input::placeholder {
  line-height: 28px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--form #comment__input::-moz-placeholder {
    line-height: 7.4666666667vw;
  }
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--form #comment__input::placeholder {
    line-height: 7.4666666667vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box {
  display: flex;
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box + .topics__comment--box {
  margin-top: 15px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box + .topics__comment--box {
    margin-top: 4vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--owner-img {
  width: 32px;
  margin-right: 5px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--owner-img {
    width: 8.5333333333vw;
    margin-right: 1.3333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--owner-img img {
  border-radius: 50%;
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap {
  width: calc(100% - 37px);
  padding: 10px;
  background: #F7F8F9;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap {
    width: calc(100% - 9.8666666667vw);
    padding: 2.6666666667vw;
    border-radius: 2.6666666667vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--details {
  display: flex;
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--details {
    margin-bottom: 1.3333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--details .topics__comment--owner-nameLabel {
  margin-right: 5px;
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--details .topics__comment--owner-nameLabel {
    margin-right: 1.3333333333vw;
    font-size: 3.7333333333vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--details .topics__comment--owner-nameId {
  color: #64748B;
  font-family: "DM Sans", sans-serif;
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--details .topics__comment--date {
  color: #64748B;
  font-size: 12px;
  font-family: "Lato", sans-serif;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--details .topics__comment--date {
    font-size: 3.2vw;
  }
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--details .topics__comment--date::before {
  content: "・";
}
.topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--txt {
  font-size: 14px;
}
@media (max-width: 767px) {
  .topics__modal .topics__modal--box .topics__article--comment .topics__comment--list .topics__comment--box .topics__comment--wrap .topics__comment--txt {
    font-size: 3.7333333333vw;
  }
}

/* 新規投稿 - modal */
.post__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .post__modal {
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
  }
}
.post__modal::-webkit-scrollbar {
  display: none;
}
.post__modal .post__modal--close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .post__modal .post__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.post__modal .post__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
  }
}
.post__modal .post__modal--box #post__form {
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box #post__form {
    margin-bottom: 2.6666666667vw;
  }
}
.post__modal .post__modal--box .content__wrap {
  padding: 10px 15px;
  border-bottom: #E5E7EB 1px solid;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap {
    padding: 2.6666666667vw 4vw;
  }
}
.post__modal .post__modal--box .content__wrap input, .post__modal .post__modal--box .content__wrap textarea {
  outline: none;
  width: 100%;
  height: 100%;
  padding: 5px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap input, .post__modal .post__modal--box .content__wrap textarea {
    padding: 1.3333333333vw;
  }
}
.post__modal .post__modal--box .content__wrap input::-moz-placeholder, .post__modal .post__modal--box .content__wrap textarea::-moz-placeholder {
  color: #9CA3AF;
}
.post__modal .post__modal--box .content__wrap input::placeholder, .post__modal .post__modal--box .content__wrap textarea::placeholder {
  color: #9CA3AF;
}
.post__modal .post__modal--box .content__wrap .post__ttl {
  height: 40px;
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__ttl {
    height: 10.6666666667vw;
    margin-bottom: 1.3333333333vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__ttl #post__ttl {
  line-height: 40px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__ttl #post__ttl {
    line-height: 10.6666666667vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__ttl #post__ttl::-moz-placeholder {
  font-size: 22px;
}
.post__modal .post__modal--box .content__wrap .post__ttl #post__ttl::placeholder {
  font-size: 22px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__ttl #post__ttl::-moz-placeholder {
    font-size: 5.8666666667vw;
  }
  .post__modal .post__modal--box .content__wrap .post__ttl #post__ttl::placeholder {
    font-size: 5.8666666667vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__txt {
  height: 300px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__txt {
    height: 80vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__txt #post__txt::-moz-placeholder {
  font-size: 14px;
}
.post__modal .post__modal--box .content__wrap .post__txt #post__txt::placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__txt #post__txt::-moz-placeholder {
    font-size: 3.7333333333vw;
  }
  .post__modal .post__modal--box .content__wrap .post__txt #post__txt::placeholder {
    font-size: 3.7333333333vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__hashtag {
  position: relative;
  display: flex;
  align-items: center;
}
.post__modal .post__modal--box .content__wrap .post__hashtag::before {
  content: "＃";
  font-weight: 700;
}
.post__modal .post__modal--box .content__wrap .post__hashtag input {
  width: calc(100% - 13px);
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__hashtag input {
    width: calc(100% - 3.4666666667vw);
  }
}
.post__modal .post__modal--box .content__wrap .post__category {
  position: relative;
  display: flex;
  align-items: center;
}
.post__modal .post__modal--box .content__wrap .post__category::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url(/assets/images/common/icon-folder.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__category::before {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__category .select__box {
  position: relative;
  width: 216px;
  margin-left: 10px;
  padding-right: 18px;
  border: #CBD5E1 1px solid;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__category .select__box {
    width: 57.6vw;
    margin-left: 2.6666666667vw;
    padding-right: 4.8vw;
    border-radius: 2.1333333333vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__category .select__box::before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 45%;
  right: 10px;
  transform: translateY(-45%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-right: #667085 2px solid;
  border-bottom: #667085 2px solid;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__category .select__box::before {
    right: 2.6666666667vw;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__category .select__box select {
  outline: none;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  font-size: 14px;
  line-height: 32px;
}
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__category .select__box select {
    padding: 0 2.6666666667vw;
    font-size: 3.7333333333vw;
    line-height: 8.5333333333vw;
  }
}
.post__modal .post__modal--box .content__wrap .post__galleryBtn input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.content__wrap .post__galleryBtn input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* ログイン - modal */
.login__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  /* max-height: calc(100% - 60px); */
  max-height: 500px;
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .login__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.login__modal::-webkit-scrollbar {
  display: none;
}
.login__modal .login__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .login__modal .login__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.login__modal .login__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.login__modal .login__modal--box .login__modal__ttl{
  display:block;
  text-align:center;
  font-weight: bold;
  padding-top: 20px;
  background: white;
  font-size: 20px;
}
.login__modal .login__modal--box #login__form {
  margin-bottom: 10px;
  margin-top: 50px!important;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box #login__form {
    margin-bottom: 2.6666666667vw;
  }
}
.login__modal .login__modal--box .content__wrap {
  padding: 10px 15px;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap {
    padding: 2.6666666667vw 4vw;
  }
}
.login__modal .login__modal--box .content__wrap input {
  outline: none;
  width: 100%;
  height: 100%;
  padding: 5px;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap label{
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap input {
    padding-left:10px;
  }
}
.login__modal .login__modal--box .content__wrap input::-moz-placeholder {
  color: #9CA3AF;
}
.login__modal .login__modal--box .content__wrap input::placeholder {
  color: #9CA3AF;
}
.login__modal .login__modal--box .content__wrap .login__mail {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap .login__mail {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.login__modal .login__modal--box .content__wrap .login__mail::before {
  content: "";
  width: 16px;
  height: 16px;
  padding-left:10px;
  position: absolute;
  top: 35%;
  left: 2%;
  background: url(/assets/images/common/icon_field_mail.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap .login__mail::before {
    position: absolute;
    top: 35%;
    left: 2%;
  }
}
.login__modal .login__modal--box .content__wrap .login__mail #login__mail {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap .login__mail #login__mail {
    line-height: 40px;
  }
}
.login__modal .login__modal--box .content__wrap .login__mail #login__mail::-moz-placeholder {
  font-size: 14px;
}
.login_modal .login__modal--box .content__wrap .login__mail #login__mail::placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap .login__mail #login__mail::-moz-placeholder {
    font-size: 5.8666666667vw;
  }
  .login__modal .login__modal--box .content__wrap .login__mail #login__mail::placeholder {
    font-size: 5.8666666667vw;
  }
}
.login__modal .login__modal--box .content__wrap .login__pass {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap .login__pass {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.login__modal .login__modal--box .content__wrap .login__pass::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 30%;
  left: 2%;
  background: url(/assets/images/common/icon_field_pass.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap .login__pass::before {
    position: absolute;
    top: 30%;
    left: 2%;
  }
}
.login__modal .login__modal--box .content__wrap .login__pass #login__pass {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap .login__pass #login__pass {
    line-height: 40px;
  }
}
.login__modal .login__modal--box .content__wrap .login__pass #login__pass:-moz-placeholder {
  font-size: 14px;
}
.login_modal .login__modal--box .content__wrap .login__pass #login__pass::placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box .content__wrap .login__pass #login__pass::-moz-placeholder {
    font-size: 5.8666666667vw;
  }
  .login__modal .login__modal--box .content__wrap .login__pass #login__pass::placeholder {
    font-size: 5.8666666667vw;
  }
}
.login__modal .login__modal--box .content__wrap .login__pass_txt a, .login__modal .login__modal--box .content__wrap .login__passmail_txt a{
  color:#00B3DB;
}
.login__modal .login__modal--box #login__form hr{
  margin:20px auto;
  color: #E5E7EB;
  width:30%
}
.login__modal .login__modal--box #login__form p.login_txt{
  text-align: center!important;
  margin-bottom:20px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box #login__form p.login_txt{
    font-size: 3.7333333333vw;
  }
}
.login__modal .login__modal--box #login__form #login__account{
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  justify-content: center;
}
.login__modal .login__modal--box #login__form #login__account button{
  border: #E5E7EB 1px solid;
  border-radius:4px;
  padding:10px;
  margin-left:30px;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box #login__form #login__account button{
    margin-left:20px;
  }
}
.login__modal .login__modal--box #login__form #login__account button a{
  width:30px;
  height:30px;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box #login__form #login__account button a{
    width:20px;
    height:20px;
  }
}
.login__modal .login__modal--box #login__form #login__account button a img{
  width:30px;
  height:30px;
}
@media (max-width: 767px) {
  .login__modal .login__modal--box #login__form #login__account button a img{
    width:20px;
    height:20px;
  }
}
.login__modal .login__modal--box #login__form p.login_txt a{
  color:#00B3DB;
}
.login__modal .login__modal--box #login__form #login__submit{
margin: 20px;
width: 90%;
}

/*パスワード再発行*/
.newpass__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .newpass__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.newpass__modal::-webkit-scrollbar {
  display: none;
}
.newpass__modal .newpass__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .newpass__modal .newpass__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.newpass__modal .newpass__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .newpass__modal .newpass__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.newpass__modal .newpass__modal--box .newpass__modal__ttl{
  display:block;
  text-align:center;
  font-weight: bold;
  padding-top: 20px;
  background: white;
  font-size: 20px;
}
.newpass__modal .newpass__modal--box .content__wrap {
  padding: 10px 15px;
}

.newpass__modal .newpass__modal--box .content__wrap .newpass__pass {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .newpass__modal .newpass__modal--box .content__wrap .newpass__pass {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.newpass__modal .newpass__modal--box .content__wrap .newpass__pass::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 30%;
  left: 2%;
  background: url(/assets/images/common/icon_field_pass.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .newpass__modal .newpass__modal--box .content__wrap .newpass__pass::before {
    position: absolute;
    top: 30%;
    left: 2%;
  }
}
.newpass__modal .newpass__modal--box .content__wrap .newpass__pass #newpass__pass {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .newpass__modal .newpass__modal--box .content__wrap .newpass__pass #newpass__pass {
    line-height: 40px;
  }
}
.newpass__modal .newpass__modal--box .content__wrap .newpass__pass #newpass__pass::-moz-placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .newpass__modal .newpass__modal--box .content__wrap .newpass__pass #newpass__pass::-moz-placeholder {
    font-size: 14px;
  }
}
.newpass__modal .newpass__modal--box #newpass__form p{
  padding:10px 15px;
  margin: 15px 0;
}
.newpass__modal .newpass__modal--box #newpass__form p.newpass_txt{
  text-align:center;
}
.newpass__modal .newpass__modal--box #newpass__form p.newpass_txt a{
  color:#00B3DB;
}
.newpass__modal .newpass__modal--box #newpass__form #newpass__submit{
  margin: 20px;
  width: 90%;
}

/*メールでパスワード再発行*/
.newpass_mail__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .newpass_mail__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.newpass_mail__modal::-webkit-scrollbar {
  display: none;
}
.newpass_mail__modal .newpass_mail__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .newpass_mail__modal .newpass_mail__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.newpass_mail__modal .newpass_mail__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .newpass_mail__modal .newpass_mail__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.newpass_mail__modal .newpass_mail__modal--box .newpass_mail__modal__ttl{
  display:block;
  text-align:center;
  font-weight: bold;
  padding-top: 20px;
  background: white;
  font-size: 20px;
}
.newpass_mail__modal .newpass_mail__modal--box .content__wrap{
  padding: 10px 15px;
}
.newpass_mail__modal .newpass_mail__modal--box .content__wrap .newpass_mail__mail{
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .newpass_mail__modal .newpass_mail__modal--box .content__wrap .newpass_mail__mail {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.newpass_mail__modal .newpass_mail__modal--box .content__wrap .newpass_mail__mail::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 30%;
  left: 2%;
  background: url(/assets/images/common/icon_field_pass.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .newpass_mail__modal .newpass_mail__modal--box .content__wrap .newpass_mail__mail::before {
    position: absolute;
    top: 30%;
    left: 2%;
  }
}
.newpass_mail__modal .newpass_mail__modal--box .content__wrap .newpass_mail__mail #newpass_mail__mail {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .newpass_mail__modal .newpass_mail__modal--box .content__wrap .newpass_mail__mail #newpass_mail__mail {
    line-height: 40px;
  }
}
.newpass_mail__modal .newpass_mail__modal--box .content__wrap .newpass_mail__mail #newpass_mail__mail::-moz-placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .newpass_mail__modal .newpass_mail__modal--box .content__wrap .newpass_mail__mail #newpass_mail__mail::-moz-placeholder {
    font-size: 14px;
  }
}
.newpass_mail__modal .newpass_mail__modal--box #newpass_mail__form p{
  padding: 10px 15px;
  margin: 15px 0;
}
.newpass_mail__modal .newpass_mail__modal--box #newpass_mail__form .newpass_mail_txt{
  text-align:center;
}
.newpass_mail__modal .newpass_mail__modal--box #newpass_mail__form .newpass_mail_txt a{
  color:#00B3DB;
}
.newpass_mail__modal .newpass_mail__modal--box .newpass_mail__form_txt {
  padding: 10px 15px;
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.6;
}
.newpass_mail__modal .newpass_mail__modal--box #newpass_mail__submit {
  margin: 20px;
  width: 90%;
}

/* メールログインモーダル */
.email_login__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .email_login__modal {
    height: 70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.email_login__modal::-webkit-scrollbar {
  display: none;
}
.email_login__modal .email_login__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .email_login__modal .email_login__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.email_login__modal .email_login__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .email_login__modal .email_login__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.email_login__modal .email_login__modal--box .email_login__modal__ttl {
  display: block;
  text-align: center;
  font-weight: bold;
  padding-top: 20px;
  background: white;
  font-size: 20px;
}
.email_login__modal .email_login__modal--box .content__wrap {
  padding: 10px 15px;
}
.email_login__modal .email_login__modal--box .content__wrap .email_login__mail {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .email_login__modal .email_login__modal--box .content__wrap .email_login__mail {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position: relative;
  }
}
.email_login__modal .email_login__modal--box .content__wrap .email_login__mail::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 30%;
  left: 2%;
  background: url(/assets/images/common/icon_field_pass.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .email_login__modal .email_login__modal--box .content__wrap .email_login__mail::before {
    position: absolute;
    top: 30%;
    left: 2%;
  }
}
.email_login__modal .email_login__modal--box .content__wrap .email_login__mail #email_login__mail {
  line-height: 40px;
  width: 100%;
  padding-left: 35px;
  position: relative;
}
@media (max-width: 767px) {
  .email_login__modal .email_login__modal--box .content__wrap .email_login__mail #email_login__mail {
    line-height: 40px;
  }
}
.email_login__modal .email_login__modal--box #email_login__form p {
  padding: 10px 15px;
  margin: 15px 0;
}
.email_login__modal .email_login__modal--box #email_login__form .email_login_txt {
  text-align: center;
}
.email_login__modal .email_login__modal--box #email_login__form .email_login_txt a {
  color: #00B3DB;
}
.email_login__modal .email_login__modal--box .email_login__form_txt {
  padding: 10px 15px;
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.6;
}
.email_login__modal .email_login__modal--box #email_login__submit {
  margin: 20px;
  width: 90%;
}
.login__email_login_txt {
  text-align: center;
  padding: 10px 15px;
}
.login__email_login_txt a {
  color: #00B3DB;
  font-size: 13px;
}

/* メールログイン認証コード入力ページ */
.email_verify__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: 40px 20px;
}
.email_verify__box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 40px;
  width: 100%;
  max-width: 480px;
}
@media (max-width: 767px) {
  .email_verify__box {
    padding: 24px 16px;
  }
}
.email_verify__ttl {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
}
.email_verify__txt {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: center;
  color: #666;
}
.email_verify__code_wrap {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.email_verify__code_wrap input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
}
.email_verify__code_wrap input:focus {
  border-color: #00B3DB;
}
@media (max-width: 767px) {
  .email_verify__code_wrap input {
    width: 40px;
    height: 48px;
    font-size: 20px;
  }
}
.email_verify__error {
  color: #dc3545;
  font-size: 13px;
  text-align: center;
  margin-bottom: 15px;
  display: none;
}
.email_verify__submit {
  display: block;
  width: 100%;
  padding: 12px;
  background: #00B3DB;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
  text-align: center;
}
.email_verify__submit:hover {
  opacity: 0.8;
}
.email_verify__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.email_verify__timer {
  text-align: center;
  font-size: 13px;
  color: #999;
  margin-top: 15px;
}

/* パスワードリセットページ */
.reset-password__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: 40px 20px;
}
.reset-password__box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 40px;
  width: 100%;
  max-width: 480px;
}
@media (max-width: 767px) {
  .reset-password__box {
    padding: 24px 16px;
  }
}
.reset-password__ttl {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 30px;
}
.reset-password__status--success {
  background: #d4edda;
  color: #155724;
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}
.reset-password__box .content__wrap {
  padding: 10px 0;
}
.reset-password__field {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 4px;
  position: relative;
}
.reset-password__field input {
  outline: none;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
}
.reset-password__error {
  color: #dc3545;
  font-size: 13px;
  margin-top: 4px;
}
.content__btn--reset-password {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: #00B3DB;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.content__btn--reset-password:hover {
  opacity: 0.8;
}







/* 新規登録 - modal */
.signUp__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  /* max-height: calc(100% - 60px); */
  max-height: 600px;
  padding: 60px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .signUp__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.signUp__modal::-webkit-scrollbar {
  display: none;
}
.signUp__modal .signUp__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.signUp__modal .signUp__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 85%;
  }
}
.signUp__modal .signUp__modal--box .signUp__modal__ttl{
  display:block;
  text-align:center;
  font-weight: bold;
  padding-top: 20px;
  background: white;
  font-size: 20px;
}
.signUp__modal .signUp__modal--box #signUp__form {
  margin-bottom: 10px;
  margin-top: 50px!important;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box #signUp__form {
    margin-bottom: 2.6666666667vw;
  }
}
.signUp__modal .signUp__modal--box .content__wrap {
  padding: 10px 15px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap {
    padding: 2.6666666667vw 4vw;
  }
}
.signUp_modal .signUp__modal--box .content__wrap input {
  outline: none;
  width: 100%;
  height: 100%;
  padding: 5px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap label{
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap input {
    padding-left:10px;
  }
}
.signUp__modal .signUp__modal--box .content__wrap input::-moz-placeholder {
  color: #9CA3AF;
}
.signUp__modal .signUp__modal--box .content__wrap input::placeholder {
  color: #9CA3AF;
}

.signUp__modal .signUp__modal--box .content__wrap .signUp__txt {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__txt {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__txt::before {
  content: "";
  width: 16px;
  height: 16px;
  padding-left:10px;
  position: absolute;
  top: 35%;
  left: 2%;
  background: url(/assets/images/common/icon_field_name.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__txt::before {
    position: absolute;
    top: 35%;
    left: 2%;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__txt #signUp__txt {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__txt #signUp__txt {
    line-height: 40px;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__txt #signUp__txt::-moz-placeholder {
  font-size: 14px;
}
.signUp_modal .signUp__modal--box .content__wrap .signUp__txt #signUp__txt::placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__txt #signUp__txt::-moz-placeholder {
    font-size: 14px;
  }
  .signUp__modal .signUp__modal--box .content__wrap .signUp__txt #signUp__txt::placeholder {
    font-size: 14px;
  }
}

.signUp__modal .signUp__modal--box .content__wrap .signUp__mail {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__mail {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__mail::before {
  content: "";
  width: 16px;
  height: 16px;
  padding-left:10px;
  position: absolute;
  top: 35%;
  left: 2%;
  background: url(/assets/images/common/icon_field_mail.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__mail::before {
    position: absolute;
    top: 35%;
    left: 2%;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__mail #signUp__mail {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__mail #signUp__mail {
    line-height: 40px;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__mail #signUp__mail::-moz-placeholder {
  font-size: 14px;
}
.signUp_modal .signUp__modal--box .content__wrap .signUp__mail #signUp__mail::placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__mail #signUp__mail::-moz-placeholder {
    font-size: 14px;
  }
  .signUp__modal .signUp__modal--box .content__wrap .signUp__mail #signUp__mail::placeholder {
    font-size: 14px;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__pass {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__pass {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__pass::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 30%;
  left: 2%;
  background: url(/assets/images/common/icon_field_pass.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__pass::before {
    position: absolute;
    top: 30%;
    left: 2%;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__pass #signUp__pass {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__pass #signUp__pass {
    line-height: 40px;
  }
}
.signUp__modal .signUp__modal--box .content__wrap .signUp__pass #signUp__pass:-moz-placeholder {
  font-size: 14px;
}
.signUp_modal .signUp__modal--box .content__wrap .signUp__pass #signUp__pass::placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box .content__wrap .signUp__pass #signUp__pass::-moz-placeholder {
    font-size: 14px;
  }
  .signUp__modal .signUp__modal--box .content__wrap .signUp__pass #signUp__pass::placeholder {
    font-size: 14px;
  }
}
.signUp__modal .signUp__modal--box #signUp__form hr{
  margin:20px auto;
  color: #E5E7EB;
  width:30%
}
.signUp__modal .signUp__modal--box #signUp__form p.signUp_txt{
  text-align: center!important;
  margin-bottom:20px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box #signUp__form p.signUp_txt{
    font-size: 3.7333333333vw;
  }
}
.signUp__modal .signUp__modal--box #signUp__form #signUp__account{
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  justify-content: center;
}
.signUp__modal .signUp__modal--box #signUp__form #signUp__account button{
  border: #E5E7EB 1px solid;
  border-radius:4px;
  padding:10px;
  margin-left:30px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box #signUp__form #signUp__account button{
    margin-left:20px;
  }
}
.signUp__modal .signUp__modal--box #signUp__form #signUp__account button a{
  width:30px;
  height:30px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box #signUp__form #signUp__account button a{
    width:20px;
    height:20px;
  }
}
.signUp__modal .signUp__modal--box #signUp__form #signUp__account button a img{
  width:30px;
  height:30px;
}
@media (max-width: 767px) {
  .signUp__modal .signUp__modal--box #signUp__form #signUp__account button a img{
    width:20px;
    height:20px;
  }
}
.signUp__modal .signUp__modal--box #signUp__form p.signUp_txt a{
  color:#00B3DB;
}
.signUp__modal .signUp__modal--box #signUp__form #signUp__submit{
margin: 20px;
width: 90%;
}

/* 左サイド */
.topics__list li a {
  display: block;
  padding-left: 30px;
  background: no-repeat 5px center/20px auto;
  font-size: 13px;
  line-height: 32px;
  font-weight: 700;
  transition: background-color 0.3s;
}
.topics__list li a:hover {
  background-color: #f2fcfe;
}

.topics__list .topics__list--item-all a,
#topics .topics__head .content__ttl .topics__list--item-all,
#topics .topics__head .topics__select #topics__select.topics__list--item-all {
  background-image: url(/assets/images/common/icon_topics-all.svg);
}

.topics__list .topics__list--item-intermediary a,
#topics .topics__head .content__ttl .topics__list--item-intermediary,
#topics .topics__head .topics__select #topics__select.topics__list--item-intermediary {
  background-image: url(/assets/images/common/icon_topics-intermediary.svg);
}

.topics__list .topics__list--item-lifestyle a,
#topics .topics__head .content__ttl .topics__list--item-lifestyle,
#topics .topics__head .topics__select #topics__select.topics__list--item-lifestyle {
  background-image: url(/assets/images/common/icon_topics-lifestyle.svg);
}

.topics__list .topics__list--item-finance a,
#topics .topics__head .topics__list--item-finance,
#topics .topics__head .topics__select #topics__select.topics__list--item-finance {
  background-image: url(/assets/images/common/icon_topics-finance.svg);
}

.topics__list .topics__list--item-social a,
#topics .topics__head .content__ttl .topics__list--item-social,
#topics .topics__head .topics__select #topics__select.topics__list--item-social {
  background-image: url(/assets/images/common/icon_topics-social.svg);
}

.topics__list .topics__list--item-media a,
#topics .topics__head .content__ttl .topics__list--item-media,
#topics .topics__head .topics__select #topics__select.topics__list--item-media {
  background-image: url(/assets/images/common/icon_topics-media.svg);
}

.topics__list .topics__list--item-education a,
#topics .topics__head .content__ttl .topics__list--item-education,
#topics .topics__head .topics__select #topics__select.topics__list--item-education {
  background-image: url(/assets/images/common/icon_topics-education.svg);
}

.topics__list .topics__list--item-productivity a,
#topics .topics__head .content__ttl .topics__list--item-productivity,
#topics .topics__head .topics__select #topics__select.topics__list--item-productivity {
  background-image: url(/assets/images/common/icon_topics-productivity.svg);
}

.topics__list .topics__list--item-blockchain a,
#topics .topics__head .content__ttl .topics__list--item-blockchain,
#topics .topics__head .topics__select #topics__select.topics__list--item-blockchain {
  background-image: url(/assets/images/common/icon_topics-blockchain.svg);
}

.topics__list .topics__list--item-nocode a,
#topics .topics__head .content__ttl .topics__list--item-nocode,
#topics .topics__head .topics__select #topics__select.topics__list--item-nocode {
  background-image: url(/assets/images/common/icon_topics-nocode.svg);
}

.topics__list .topics__list--item-ai a,
#topics .topics__head .content__ttl .topics__list--item-ai,
#topics .topics__head .topics__select #topics__select.topics__list--item-ai {
  background-image: url(/assets/images/common/icon_topics-ai.svg);
}

#main__side--left {
  width: 16.25%;
}

#main__side--right {
  width: 23.32%;
}

/* 右サイド */
.content__list li + li {
  margin-top: 10px;
}
.content__list li a {
  position: relative;
  display: flex;
}
.content__list li .content__list--img {
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 56px;
  margin-right: 15px;
  border-radius: 12px;
}
.content__list li .content__list--img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.content__list li .content__list--txt {
  width: calc(100% - 71px);
}
.content__list li .content__list--txt .content__list--txtTtl {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: 700;
}
.content__list li .content__list--txt .content__list--txt-others {
  font-size: 12px;
  color: #64748B;
  white-space: nowrap;
}
.content__list li .content__list--txt .content__list--txt-others span {
  display: inline-block;
  max-width: 33.333333%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.content__list li .content__list--txt .content__list--txt-others span + span {
  margin-left: 5px;
}
.content__list li .content__list--txt .content__list--txt-others .content__list--txt-othersDate {
  position: relative;
}
.content__list li .content__list--txt .content__list--txt-others .content__list--txt-othersDate::before {
  content: "・";
}

/* おすすめ記事 */
#recommend-article .content__list li a::before {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  background: #1F2937;
  border-radius: 12px 0 8px 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}
#recommend-article .content__list li:first-child a::before {
  content: "1";
}
#recommend-article .content__list li:nth-child(2) a::before {
  content: "2";
}
#recommend-article .content__list li:nth-child(3) a::before {
  content: "3";
}
/* ------------------------------
  プロフィール
------------------------------ */
#profile__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1132px;
  margin: 0 auto;
  padding-top: 25px;
}
#profile_main__center {
  width: 500px;
  margin-right: 0;
}
#profile_main__center .profile__txt--box1,.profile__txt--box2,.profile__txt--box3,.profile__txt--box4 {
  margin-bottom: 1rem;
}
#profile_main__center .profile_ttl.m-0 {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  #profile_main__center {
    width: 100%;
    padding: 0;
    margin-bottom: 50px;
  }
}
#profile_main__side--left {
  width: 280px;
}
@media (max-width: 767px) {
  #profile_main__side--left {
    width: 100%;
    padding: 0;
  }
}
#profile_main__side--right {
  width: 23.32%;
}
#profile_main__side--left .profile__box {
  width: 270px;
  background:#F1F5F9;
  padding:16px;
  border-radius: 3px;
}
@media (max-width: 767px) {
  #profile_main__side--left .profile__box {
    width:100%;
  }
}
#profile_main__side--left .profile__box .profile_picture {
  position:relative;
}
#profile_main__side--left .profile__box .profile_picture #icon_picture {
  width:70px;
  height:70px;
  border-radius: 50%;
}
#profile_main__side--left .profile__box .profile_picture #icon_picture_edit {
  position:absolute;
  bottom:0;
  left: 45px;
  cursor: pointer;
}
#profile_main__side--left .profile__box .profile_picture #icon_edit {
  width:20px;
  height:20px;
  position:absolute;
  top:0;
  right:0;
}
#profile_main__side--left .profile__box .profile_picture .edit_txt_box {
  position: absolute;
  top: 5px;
  left: 90px;
  width:140px;
  height:60px;
}
#profile_main__side--left .profile__box .profile_picture #edit_txt b{
 font-size:15px;
}
#profile_main__side--left .profile__box .iine_follow p{
  display:inline-block;
  margin:10px;
}
#profile_main__side--left .profile__box .profile_tag ul{
  list-style:none;
}
#profile_main__side--left .profile__box .profile_tag ul li{
  display: inline-block;
  margin-left:5px;
  margin-top:6px;
  background:#E2E8F0;
  border-radius:4px;
  padding:2px 5px;
  color:#64748B;
}
#profile_main__side--left .profile__box .profile_tag ul li span,#profile_main__side--left .profile__box .profile_tag ul #tag_plus a{
  color:#344054;
}
#profile_main__side--left .profile__box .profile_tag ul #tag_plus{
  background:#F1F5F9;
}
#profile_main__side--left .profile__box .profile_tag ul #tag_plus a:hover{
  color:#00B3DB;
}
#profile_main__side--left .profile__box #profile_pass #profile_team {
  margin-left:5px;
  margin-top:20px;
}
#profile_main__side--left .profile__box #profile_pass:hover #profile_team:hover {
cursor: pointer;
}
#profile_main__side--left #tagbox{
  margin: 5px 5px 100px 5px;
  visibility: hidden;
}
#profile_main__side--left #tagbox select{
  width: 35%;
  border: #CBD5E1 solid 1px;
  border-radius: 4px;
  margin: 0 3px;
  padding: 1.5px;
}
#profile_main__side--left #tagbox select:hover{
  cursor: pointer;
}
#profile_main__side--left #tagbox #add_delete{
  display: inline;
  border: #CBD5E1 solid 1px;
  padding: 0 5px 2px 5px;
  border-radius: 4px;
  cursor: pointer;
}
#profile_main__side--left #tagbox #add_delete span{
  padding: 0 5px;
}
#profile_main__side--left #tagbox #add_delete span:hover{
  color:#00B3DB;
}
#profile_main__center .profile_ttl{
  /* margin-bottom: 10px; */
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  position:relative;
  margin-bottom:0.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  max-height: calc(1.4em * 2);
}
#profile_main__center .profile_ttl img{
  width:20px;
  height:20px;
  position:absolute;
  bottom: 2px;
  left: 70px;
}
#profile_main__center .profile_txt{
  margin-bottom:40px;
}
#profile_main__center .profile__txt--box2 .profile_ttl img{
  width:20px;
  height:20px;
  position:absolute;
  bottom: 2px;
  left: 90px;
}
#profile_main__center .profile_txt input{
  border:#CBD5E1 solid 1px;
  border-radius:4px;
  padding:10px;
  width:100%;
}
#profile_main__center .profile__txt--box3 .profile_ttl img{
  width:20px;
  height:20px;
  position:absolute;
  bottom: 2px;
  left: 150px;
}
#profile_main__center .profile__txt--box4 .profile_ttl img{
  width:20px;
  height:20px;
  position:absolute;
  bottom: 2px;
  left: 40px;
}
#profile_main__center .profile_topics__body h2{
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding-left:30px;
  position:relative;
}
#profile_main__center .profile_topics__body h2::before{
  content:"";
  width:20px;
  height:20px;
  background-image:url("/assets/images/common/icon_topics-all.svg");
  position:absolute;
  left:0;
}
.profile__topics--moreBtn {
  cursor: pointer;
  width: 114px;
  margin: 15px auto 0;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  font-size: 14px;
  line-height: 36px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 767px) {
.profile__topics--moreBtn {
    width: 30.4vw;
    margin-top: 4vw;
    border-radius: 2.1333333333vw;
    font-size: 3.7333333333vw;
    line-height: 9.6vw;
  }
}
.profile_topics__body .profile_topics_box ul{
  display:flex;
  flex-wrap:wrap;
  /* justify-content: space-evenly; */
}
.profile_topics__body .profile_topics_box ul li{
  width:40%;
  margin:10px;
}
.profile_topics__body .profile_topics_box ul li img{
  border-radius:8px;
  width:100%;
  height:133px;
  object-fit:contain;
}
.profile_topics__body .profile_topics_box ul li .topics_office_name{
  margin:5px 0 0 25px;
  color:#64748B;
  position:relative;
  display:inline-block;
}
@media (max-width: 767px) {
  .profile_topics__body .profile_topics_box ul li .topics_office_name {
    font-size:12px;
  }
}
.profile_topics__body .profile_topics_box ul li .topics_office_name:before{
  content:"";
  background-image:url("/assets/images/common/icon-office-name.svg");
  width:16px;
  height:16px;
  position: absolute;
  left:  -20px;
  bottom: 0;
}
.profile_topics__body .profile_topics_box ul li .edit_btn{
  padding:2px 2px 2px 20px;
  margin:5px 0 5px 20px;
  width:60px;
  border-radius:4px;
  border:#D0D5DD 1px solid;
  position:relative;
  display:inline-block;
}
@media (max-width: 767px) {
  .profile_topics__body .profile_topics_box ul li .edit_btn {
    margin:5px 0 5px 12px;
    font-size:14px;
  }
}
.profile_topics__body .profile_topics_box ul li .edit_btn:before{
  content:"";
  background-image:url("/assets/images/common/icon_edit_btn.svg");
  width:12px;
  height:12px;
  margin:6px 0 10px 6px;
  position: absolute;
  left: 0;
}
.profile_topics__body .profile_topics_box ul li .profile_txt{
  color:#64748B;
}
#profile_main__side--right #new-article h2{
  margin-top:30px;
}
@media (max-width: 767px) {
  #profile_main__side--right {
    display:inline-block;
    width:100%;
  }
}
.profile__box .profile_icon_btn{
  margin-top: 10px;
}
.profile__box .profile_icon_btn ul{
  display:flex;
}
.profile__box .profile_icon_btn #iine{
  background: #fff;
  border-radius: 4px;
  padding: 3px 3px 3px 15px;
  text-align: center;
  margin: 5px;
  width: 45%;
  border:#CBD5E1 solid 1px;;
  position:relative;
  font-weight: 600;
}
.profile__box .profile_icon_btn #iine:before{
  content:"";
  background-image:url("/assets/images/common/icon-iine-btn.svg");
  position:absolute;
  left: 23px;
  bottom: 3px;
  width: 16px;
  height: 15px;
}
.profile__box .profile_icon_btn #follow{
  background:#00B3DB;
  border-radius: 4px;
  padding: 3px 3px 3px 15px;
  text-align: center;
  margin: 5px;
  width: 45%;
  color:#fff;
  position:relative;
  font-weight: 600;
}
.profile__box .profile_icon_btn #follow:before{
  content:"";
  background-image:url("/assets/images/common/icon-follow-btn.svg");
  position:absolute;
  left: 17px;
  bottom: 6px;
  height: 12px;
  width: 16px;
}
/* プロフアイコンmodal */
.img_upload__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .img_upload__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.img_upload__modal::-webkit-scrollbar {
  display: none;
}
.img_upload__modal .img_upload__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .img_upload__modal .img_upload__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.img_upload__modal .img_upload__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
@media (max-width: 767px) {
  .img_upload__modal .img_upload__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.img_upload__modal .img_upload__modal--box .img_upload__modal__ttl{
  display:block;
  text-align:left;
  font-weight: bold;
  background: white;
  font-size: 20px;
}
.img_upload__modal .img_upload__modal--box .content__wrap{
  padding:15px;
}
.img_upload__modal .img_upload__modal--box #img_upload #img_upload__form #upload_box{
  padding: 100px;
  border: 2px dashed #E2E8F0;
}
.img_upload__modal .img_upload__modal--box #img_upload #img_upload__form #upload_box img{
  width:80px;
  margin: auto;
  display: block;
}
.img_upload__modal .img_upload__modal--box #img_upload #img_upload__form #upload_box p{
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  margin-top: 100px;
}
.img_upload__modal .img_upload__modal--box #img_upload #img_upload__form #upload_box p #msg_br{
  display:none;
}
@media (max-width: 767px) {
  .img_upload__modal .img_upload__modal--box #img_upload #img_upload__form #upload_box p #msg_br{
    display:inline;
  }
}
.img_upload__modal .img_upload__modal--box #img_upload #img_upload__form #upload_box p span {
  color:#00B3DB;
}
.img_upload__modal .img_upload__modal--box #img_upload #img_upload__form #upload_box p #filesize_msg {
  color:#94A3B8;
}
.img_upload__modal .img_upload__modal--box #img_upload #img_upload__form #img_upload__submit{
  margin: 20px;
  width: 90%;
}

/* プロフアイコンプレビューmodal */
.img_preview__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .img_preview__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.img_preview__modal::-webkit-scrollbar {
  display: none;
}
.img_preview__modal .img_preview__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .img_preview__modal .img_preview__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.img_preview__modal .img_preview__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
@media (max-width: 767px) {
  .img_preview__modal .img_preview__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.img_preview__modal .img_preview__modal--box .img_preview__modal__ttl{
  display:block;
  text-align:left;
  font-weight: bold;
  background: white;
  font-size: 20px;
}
.img_preview__modal .img_preview__modal--box .content__wrap{
  padding:15px;
}
.img_preview__modal .img_preview__modal--box #img_preview #img_preview__form #preview_box{
  padding: 50px;
  border: 2px dashed #E2E8F0;
}
.img_preview__modal .img_preview__modal--box #img_preview #img_preview__form #preview_box img{
  width: 200px;
  margin: auto;
  display: block;
  border: solid 1px #D0D5DD;
  border-radius: 200px;
}
.img_preview__modal .img_preview__modal--box #img_preview #img_preview__form #preview_box p{
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  margin-top: 40px;
  color:#00B3DB;
}
.img_preview__modal .img_preview__modal--box #img_preview #img_preview__form #preview_btn_set{
  display:flex;
  justify-content:space-between;
}
.img_preview__modal .img_preview__modal--box #img_preview #img_preview__form #preview_btn_set #img_dell__submit{
  margin: 10px;
  width: 45%;
  text-align: center;
  padding-left: 0;
  color:#000;
  border:solid 1px #D0D5DD;
  background:#fff;
}
.img_preview__modal .img_preview__modal--box #img_preview #img_preview__form #preview_btn_set #img_prev__submit{
  margin: 10px;
  width: 45%;
  text-align: center;
  padding-left: 0;
}

/*パスワード再発行*/
.profile_pass__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .profile_pass__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.profile_pass__modal::-webkit-scrollbar {
  display: none;
}
.profile_pass__modal .profile_pass__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .profile_pass__modal .profile_pass__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.profile_pass__modal .profile_pass__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .profile_pass__modal .profile_pass__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.profile_pass__modal .profile_pass__modal--box .profile_pass__modal__ttl{
  display:block;
  text-align:center;
  font-weight: bold;
  padding-top: 20px;
  background: white;
  font-size: 20px;
}
.profile_pass__modal .profile_pass__modal--box .content__wrap {
  padding: 10px 15px;
}

.profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 30%;
  left: 2%;
  background: url(/assets/images/common/icon_field_pass.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass::before {
    position: absolute;
    top: 30%;
    left: 2%;
  }
}
.profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass #profile_pass__oldpass, .profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass #profile_pass__newpass {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass #profile_pass__oldpass, .profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass #profile_pass__newpass {
    line-height: 40px;
  }
}
.profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass #profile_pass__oldpass::-moz-placeholder, .profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass #profile_pass__newpass::-moz-placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass #profile_pass__oldpass::-moz-placeholder, .profile_pass__modal .profile_pass__modal--box .content__wrap .profile_pass__pass #profile_pass__newpass::-moz-placeholder {
    font-size: 14px;
  }
}
.profile_pass__modal .profile_pass__modal--box #profile_pass__form #profile_pass__submit{
  margin: 20px;
  width: 90%;
}

/*チーム作成*/
.profile_team__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .profile_team__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.profile_team__modal::-webkit-scrollbar {
  display: none;
}
.profile_team__modal .profile_team__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .profile_team__modal .profile_team__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.profile_team__modal .profile_team__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 10px 0;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .profile_team__modal .profile_team__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.profile_team__modal .profile_team__modal--box .profile_team__modal__ttl{
  display:block;
  text-align:center;
  font-weight: bold;
  padding-top: 20px;
  background: white;
  font-size: 20px;
}
.profile_team__modal .profile_team__modal--box .content__wrap {
  padding: 10px 15px;
}

.profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name {
  height: 40px;
  margin-bottom: 5px;
  border: #E5E7EB 1px solid;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 767px) {
  .profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name {
    height: 40px;
    margin-bottom: 1.3333333333vw;
    border: #E5E7EB 1px solid;
    border-radius: 8px;
    position:relative;
  }
}
.profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 30%;
  left: 2%;
  background: url(/assets/images/common/icon-team_list.svg) no-repeat left top/100% auto;
}
@media (max-width: 767px) {
  .profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name::before {
    position: absolute;
    top: 30%;
    left: 2%;
  }
}
.profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name , .profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name {
  line-height: 40px;
  width:100%;
  padding-left:35px;
  position:relative;
}
@media (max-width: 767px) {
  .profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name, .profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name  {
    line-height: 40px;
  }
}
.profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name ::-moz-placeholder, .profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name::-moz-placeholder {
  font-size: 14px;
}
@media (max-width: 767px) {
  .profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name::-moz-placeholder, .profile_team__modal .profile_team__modal--box .content__wrap .profile_team__name::-moz-placeholder {
    font-size: 14px;
  }
}
.profile_team__modal .profile_team__modal--box #profile_team__form #profile_team__submit{
  margin: 20px;
  width: 90%;
}

/* QRコード名刺ボタン */
.qrcode-btn {
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.qrcode-btn:hover {
  background: #F1F5F9;
  border-color: #00B3DB;
  color: #00B3DB;
}

/* QRコード名刺modal */
.qrcode__modal {
  display: none;
  z-index: 2;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  border-top: 5px solid #00B3DB;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
@media (max-width: 767px) {
  .qrcode__modal {
    width: 280px;
    padding: 16px;
  }
}
.qrcode__modal .qrcode__modal--close {
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 12px;
  width: 20px;
  height: 20px;
  z-index: 3;
}
.qrcode__modal .qrcode__modal--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 20px;
}
.qrcode__modal .qrcode__modal--qr {
  background: #F1F5F9;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.qrcode__modal .qrcode__modal--qr #qrcode-container {
  width: 180px;
  height: 180px;
}
.qrcode__modal .qrcode__modal--qr #qrcode-container img {
  display: block;
}
.qrcode__modal .qrcode__modal--qr #qrcode-container canvas {
  display: none;
}
.qrcode__modal .qrcode__modal--profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qrcode__modal .qrcode__modal--avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #00B3DB;
  margin-bottom: 10px;
}
.qrcode__modal .qrcode__modal--avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qrcode__modal .qrcode__modal--name {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 4px;
}
.qrcode__modal .qrcode__modal--uid {
  font-size: 13px;
  color: #64748B;
}


/* ------------------------------
  チーム一覧
------------------------------ */

#team_list__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1132px;
  margin: 0 auto;
  padding-top: 25px;
}

#team_list_main__center {
  width: 600px;
  margin-right: 0;
}

#team_list_main__center .team_list_ttl{
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  position:relative;
  margin-bottom:10px;
}
#team_list_main__center .team_list_txt{
  margin-bottom:40px;
}
#team_list_main__center .team_list_topics__body h1{
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  padding-left:35px;
  margin:30px 0;
  position:relative;
}
#team_list_main__center .team_list_topics__body h1::before{
  content:"";
  width:25px;
  height:25px;
  background-image:url("/assets/images/common/icon-team_list.svg");
  position:absolute;
  left:0;
}
.team_list_topics__body .team_list_topics_box ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.team_list_topics__body .team_list_topics_box ul a{
  display: block;
}
.team_list_topics__body .team_list_topics_box ul a li{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.team_list_topics__body .team_list_topics_box ul a li img{
  border-radius:8px;
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
}
.team_list_topics__body .team_list_topics_box ul a li .topics_office_name{
  margin:5px 0 0 25px;
  color:#64748B;
  position:relative;
  display:inline-block;
}
@media (max-width: 767px) {
  .team_list_topics__body .team_list_topics_box ul li .topics_office_name {
    font-size:12px;
  }
}
.team_list_topics__body .team_list_topics_box ul li .topics_office_name:before{
  content:"";
  background-image:url("/assets/images/common/icon-office-name.svg");
  width:16px;
  height:16px;
  position: absolute;
  left:  -20px;
  bottom: 0;
}
.team_list_topics__body .team_list_topics_box{
  display:flex;
  justify-content: space-between;
}
.team_list_topics__body .team_list_topics_box .back{
  color:#CBD5E1;
}
.team_list_topics__body .team_list_topics_box .back,.team_list_topics__body .team_list_topics_box .next{
  font-weight:400;
  margin-top:20px;
}
.team_list_topics__body .team_list_topics_box .pager{
  flex-wrap:nowrap;
  width: 300px;
  margin: 10px 0 40px;
  color:667085;
}
.team_list_topics__body .team_list_topics_box .pager #current{
  background:#F1F5F9;
  border-radius:4px;
  padding:1px 0 5px 10px;
}

/* pager */
.pagination {
  display:flex;
  justify-content: space-between;
}
.pagination .back{
  color:#CBD5E1;
}
.pagination .back,.pagination .next{
  font-weight:400;
  margin-top:20px;
}
.pagination .pager{
  display:flex;
  flex-wrap:nowrap;
  width: 300px;
  margin: 10px 0 40px;
  padding: 0.3rem 0;
  color:667085;
}
.pagination .pager li {
  margin:0 10px;
  width:2rem;
  text-align:center;
  padding:0.3rem 0;
}
.pagination .pager #current{
  background:#F1F5F9;
  border-radius:4px;
}

/* ------------------------------
  チーム詳細
------------------------------ */
#team_list_main__center #team_detail_top{
  position:relative;
}
#team_list_main__center #team_detail_top h1{
  font-family: "Inter", sans-serif;
  font-size: 25px;
  font-weight: 700;
}
#team_list_main__center #team_detail_top .team_icon_btn{
  position:absolute;
  right:0;
  top:0;
  width: 280px;
}
#team_list_main__center #team_detail_top .team_icon_btn ul{
  display:flex;
}
#team_list_main__center #team_detail_top .team_icon_btn #iine{
  background: #fff;
  border-radius: 4px;
  padding: 3px 3px 3px 15px;
  text-align: center;
  margin: 5px;
  width: 80%;
  border: #D0D5DD solid 1px;
  position:relative;
  font-weight: 600;
}
#team_list_main__center #team_detail_top .team_icon_btn #iine:before{
  content:"";
  background-image:url("/assets/images/common/icon-iine-btn.svg");
  position:absolute;
  left: 23px;
  bottom: 3px;
  width: 16px;
  height: 15px;
}
#team_list_main__center #team_detail_top .team_icon_btn #follow{
  background:#00B3DB;
  border-radius: 4px;
  padding: 3px 3px 3px 15px;
  text-align: center;
  margin: 5px;
  width: 80%;
  color:#fff;
  position:relative;
  font-weight: 600;
}
#team_list_main__center #team_detail_top .team_icon_btn #follow:before{
  content:"";
  background-image:url("/assets/images/common/icon-follow-btn.svg");
  position:absolute;
  left: 17px;
  bottom: 6px;
  height: 12px;
  width: 16px;
}
#team_list_main__center #team_main_pocture{
  margin:30px 0;
}
#team_list_main__center div #team_detail_ttl{
  font-family: "Inter", sans-serif;
  font-size: 25px;
  font-weight: 700;
}
#team_list_main__center .team_list_topics__body h2{
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding-left:30px;
  position:relative;
}
#team_list_main__center .team_list_topics__body h2::before{
  content:"";
  width:20px;
  height:20px;
  background-image:url("/assets/images/common/icon_topics-all.svg");
  position:absolute;
  left:0;
}
#team_list_main__center #dream{
  margin-left:30px;
  position:relative;
}
#team_list_main__center #dream::before{
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(/assets/images/common/icon-team-dream.svg);
  position: absolute;
  left: -30px;
  bottom:2px;
}
#team_list_main__center #favorite{
  margin-left:30px;
  position:relative;
}
#team_list_main__center #favorite::before{
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(/assets/images/common/icon-team-favorite.svg);
  position: absolute;
  left: -30px;
  bottom:2px;
}
#team_list_main__center .content__ttl img{
  width:20px;
  height:20px;
  position:absolute;
}
#team_list_main__center #team_member{
  margin-left:30px;
  position:relative;
  bottom: -50px;
}
#team_list_main__center #team_member::before{
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(/assets/images/common/icon-team_list.svg);
  position: absolute;
  left: -30px;
  bottom:2px;
}
div#member.team_content__wrap{
  margin-bottom: 30px;
  padding: 20px 15px;
  background:#fff;
}
#team_swiper-slide1,#team_swiper-slide2,#team_swiper-slide3,#team_swiper-slide4{
  position:relative;
}
/* #team_swiper-slide1:after,#team_swiper-slide2:after,#team_swiper-slide3:after,#team_swiper-slide4:after{
  content:"";
  background-image:url("/assets/images/common/icon-team-close.svg");
  width: 21px;
  height: 21px;
  position: absolute;
  top: 0;
  right: 0;
  cursor:pointer;
} */
div#member.team_content__wrap .member__head .member__all{
  color:#94A3B8;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-left: 470px;
}
/* チームメンバー追加 */
.teamadd__modal{
  display:none;
  background:#fff;
  width:320px;
  height:200px;
  border: 1px solid #D0D5DD;
  padding:20px;
  border-radius: 8px;
  position: relative;
  top: -1100px;
  right: -450px;
  z-index: 10;
  overflow-y: scroll;
}
.teamadd__modal #teamadd #teamadd__form .teamadd__box{
  position:relative;
}
.teamadd__modal #teamadd #teamadd__form .teamadd__box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url(/assets/images/common/icon-search.svg) no-repeat left top/100% auto;
}
.teamadd__modal #teamadd #teamadd__form .teamadd__box #teamadd__input {
  width: 100%;
  height: 44px;
  padding: 10px 15px 10px 35px;
  background: #F1F5F9;
  border: #D0D5DD 1px solid;
  border-radius: 8px;
  outline: none;
  -webkit-appearance: none;
  font-size: 14px;
  line-height: 44px;
}
.teamadd__modal #teamadd #teamadd__form .teamadd__box #teamadd__input::-moz-placeholder {
  font-size: 14px;
}
.teamadd__modal #teamadd #teamadd__form .teamadd__box span{
  position: absolute;
  top: 10px;
  right: 20px;
}
.teamadd__modal #teamadd #teamadd__form #teamadd_list__box li{
  margin-top:10px;
}
.teamadd__modal #teamadd #teamadd__form #teamadd_list__box li img{
  width:32px;
}
.teamadd__modal #teamadd #teamadd__form #teamadd_list__box li b{
margin-left: 10px;
}
.teamadd__modal #teamadd #teamadd__form #teamadd_list__box li .content__btn--teamaddSubmit{
  cursor: pointer;
  width: 114px;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  font-size: 14px;
  line-height: 36px;
  font-weight: 700;
  text-align: center;
  padding:0;
  background:#fff;
  color:#000;
  margin-left: 30px;
}
.teamadd__modal #teamadd #teamadd__form #teamadd_list__box li #teamadd__submit{
  color:#fff;
  background:#00B3DB;
  width: 100px;
  margin-left: 40px;
}

/* チームメンバー追加sp */
@media (max-width: 767px) {
  .teamadd__modal--sp {
    display:none;
    overflow-y: scroll;
    z-index: 2;
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height:70%;
    max-width: 660px;
    max-height: calc(100% - 60px);
    padding: 30px;
    -ms-overflow-style: none;
    background:#fff;
  }
  .teamadd__modal--sp .teamadd_sp__modal--close {
    cursor: pointer;
    position: absolute;
    right: 30px;
    width: 20px;
    height: 20px;
    filter: brightness(10);
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form .teamadd_sp__box {
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
    position:relative;
    width:80%;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form .teamadd_sp__box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url(/assets/images/common/icon-search.svg) no-repeat left top/100% auto;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form .teamadd_sp__box #teamadd_sp__input {
    width: 100%;
    height: 44px;
    padding: 10px 15px 10px 35px;
    background: #F1F5F9;
    border: #D0D5DD 1px solid;
    border-radius: 8px;
    outline: none;
    -webkit-appearance: none;
    font-size: 14px;
    line-height: 44px;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form .teamadd_sp__box #teamadd_sp__input::-moz-placeholder {
    font-size: 14px;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form .teamadd_sp__box span{
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form #teamadd_list__box li{
    margin-top:10px;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form #teamadd_list__box li img{
    width:32px;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form #teamadd_list__box li b{
  margin-left: 10px;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form #teamadd_list__box li .content__btn--teamaddSubmit{
    cursor: pointer;
    width: 114px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 14px;
    line-height: 36px;
    font-weight: 700;
    text-align: center;
    padding:0;
    background:#fff;
    color:#000;
    margin-left: 140px;
  }
  .teamadd__modal--sp #teamadd_sp #teamadd_sp__form #teamadd_list__box li #teamadd__submit{
    color:#fff;
    background:#00B3DB;
    width: 100px;
    margin-left: 150px;
  }
}
/* チームメンバー削除modal */
.team_delete__modal {
  display: none;
  overflow-y: scroll;
  z-index: 2;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 660px;
  max-height: calc(100% - 60px);
  padding: 30px;
  -ms-overflow-style: none;
}
@media (max-width: 767px) {
  .team_delete__modal {
    height:70%;
    max-width: 100%;
    max-height: calc(100% - 17.3333333333vw);
    padding: 0px;
    top: 50%;
  }
}
.team_delete__modal::-webkit-scrollbar {
  display: none;
}
.team_delete__modal .team_delete__modal--close {
  cursor: pointer;
  position: absolute;
  right: 30px;
  width: 20px;
  height: 20px;
  filter: brightness(10);
}
@media (max-width: 767px) {
  .team_delete__modal .team_delete__modal--close {
    right: 4vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.team_delete__modal .team_delete__modal--box {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  margin-top: 30px;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
}
@media (max-width: 767px) {
  .team_delete__modal .team_delete__modal--box {
    margin-top: 8vw;
    padding: 2.6666666667vw 0;
    border-radius: 0;
    height: 80%;
  }
}
.team_delete__modal .team_delete__modal--box .team_delete__modal__ttl{
  display:block;
  text-align:left;
  font-weight: bold;
  background: white;
  font-size: 20px;
}
.team_delete__modal .team_delete__modal--box .content__wrap{
  padding:15px;
}
.team_delete__modal .team_delete__modal--box #team_delete #team_delete__form #team_delete_box{
  padding: 50px;
}
.team_delete__modal .team_delete__modal--box #team_delete #team_delete__form #team_delete_box img{
  width: 200px;
  margin: auto;
  display: block;
  border: solid 1px #D0D5DD;
  border-radius: 200px;
}
.team_delete__modal .team_delete__modal--box #team_delete #team_delete__form #team_delete_box p{
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  margin-top: 40px;
}
.team_delete__modal .team_delete__modal--box #team_delete #team_delete__form #team_delete_btn_set{
  display:flex;
  justify-content:space-between;
}
.team_delete__modal .team_delete__modal--box #team_delete #team_delete__form #team_delete_btn_set #team_delete_no__submit{
  margin: 10px;
  width: 45%;
  text-align: center;
  padding-left: 0;
  color:#000;
  border:solid 1px #D0D5DD;
  background:#fff;
}
.team_delete__modal .team_delete__modal--box #team_delete #team_delete__form #team_delete_btn_set #team_delete__submit{
  margin: 10px;
  width: 45%;
  text-align: center;
  padding-left: 0;
  background:#EF4444;
}

/* ------------------------------
  メッセンジャー
------------------------------ */
#messenger__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1132px;
  margin: 0 auto;
  padding-top: 25px;
  max-height: 1000px;
}
#messenger_main__center {
  width: 600px;
  margin-right: 0;
  background:#F9FAFB;
  border-radius:4px;
  padding:10px;
  height:100%;
  /* max-height: 1300px; */
}
@media (max-width: 767px) {
  #messenger_main__center {
    display:none;
    width: 100%;
    padding: 0;
    height: 100%;
  }
}
#messenger_main__side--left {
  padding: 0 10px 0 100px;
  width: 360px;
  overflow-y: scroll;
  max-height: 1000px;
}
@media (max-width: 767px) {
  #messenger_main__side--left {
    width: 100%;
    padding: 0;
  }
}
#messenger_main__side--right {
  width: 15%;
  max-height: 1000px;
}
#messenger_main__side--left .msg_ttl{
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  margin-bottom: 10px;
}
#messenger_main__side--left .msg_member {
  display: flex;
  justify-content: space-between;
  margin:10px 0 10px 0;
}
#messenger_main__side--left #msg_active {
 background:#F1F5F9;
}
#messenger_main__side--left .msg_member .msg_icon {
  width:42px;
  height:42px;
  display:inline-block;
}
@media (max-width: 767px) {
  #messenger_main__side--left .msg_member .msg_icon {
    margin-left: 10%;
  }
  #messenger_main__side--left .msg_member .msg_member_txtbox{
    width: 50% !important;
    margin-right: 20%;
  }
}
#messenger_main__side--left .msg_member .msg_member_txtbox .msg_time{
  float:right;
}
#messenger_main__side--left .msg_member .msg_member_txtbox .msg_txt .content__mail--num{
  display: inline-block;
  min-width: 17px;
  padding: 2px;
  background: #E11D48;
  border-radius: 50%;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
#messenger_main__side--left .msg_member .msg_member_txtbox .msg_txt .content__mail--num_none{
  padding-right: 1.5em;
}
#messenger_main__center .msg_ttl{
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  margin: 20px;
}
#messenger_main__center .msg_ttl #msg_backicon_sp{
  display:none;
  margin:2px;
  width:20px;
  pointer-events: auto;
}
#messenger_main__center hr{
  border:solid 1px #E2E8F0;
  margin-bottom: 20px;
}
#messenger_main__center .member_messenger {
  display: flex;
  justify-content: space-between;
  margin:10px 0 10px 0;
}
#messenger_main__center .member_messenger .msg_icon {
  width:42px;
  height:42px;
  display:inline-block;
}
#messenger_main__center .member_messenger .msg_member_txtbox{
  padding:10px;
}
#messenger_main__center .member_messenger .msg_member_txtbox .msg_name{
  display: inline-block;
  padding-left:10px;
}
#messenger_main__center .member_messenger .msg_member_txtbox .msg_time{
  display: inline-block;
  padding-left:10px;
}
#messenger_main__center .member_messenger .msg_member_txtbox .msg_txt{
  background:#fff;
  border:solid 1px rgba(107, 114, 128, 0.3);
  border-radius:0 4px 4px 4px;
  padding:10px;
  margin-top:10px;
}
#messenger_main__center .member_messenger .msg_my_txtbox {
  padding:10px;
  margin:0 0 0 auto;
}
#messenger_main__center .member_messenger .msg_my_txtbox .msg_txt{
  background:#CBD5E1;
  box-shadow: 1px 3px 3px 1px #fff;
  border-radius:4px 0 4px 4px;
  padding:10px;
  margin-top:10px;
}
#messenger_main__center .msg_up_img{
  padding-left:50px;
  display: inline-block;
}
#messenger_main__center .msg_post {
  position: relative;
}
#messenger_main__center .msg_post #mymsg_post__form{
  width: 100%;
  position: absolute;
  top: 260px;
}
#messenger_main__center .msg_post #mymsg_post__form .mymsg_post #mymsg_post {
  /* border:solid 1px #D0D5DD; */
  background:#fff;
  border-radius: 4px;
  line-height: 20px;
  width:90%;
  cursor:pointer;
  position:relative;
  padding-left:10px;
}
@media (max-width: 767px) {
  #messenger_main__center .msg_post #mymsg_post__form .mymsg_post #mymsg_post {
  line-height: 20px;
}
}
#messenger_main__center .msg_post #mymsg_post__form .mymsg_post #mymsg_post::-moz-placeholder, #messenger_main__center #mymsg_post__form .mymsg_post #mymsg_post::placeholder {
  font-size: 14px;
}
#messenger_main__center .msg_post #mymsg_post__form .mymsg_post a .icon_msg_imgpost {
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 11px;
  left: 490px;
}
#messenger_main__center #mymsg_post_up {
  display:none;
  border:solid 1px #D0D5DD;
  background:#fff;
  border-radius: 4px;
  line-height: 20px;
  width:91%;
  height: 150px;
  cursor:pointer;
  padding:2px 10px;
  position: relative;
  top: 152px;
  right: 1px;
}
#messenger_main__center #mymsg_post_up #mymsg_img_1{
  width:60px;
  border-radius:4px;
  margin:5px;
}
#messenger_main__center #mymsg_post_up #mymsg_img_2{
  width:50px;
  border-radius:4px;
  margin:5px;
}
#messenger_main__center #mymsg_post_up a .icon_msg_imgpost {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 115px;
  left: 490px;
}
#messenger_main__center .msg_post #mymsg_post__form .content__btn--msgpost-submit{
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 3px;
  right: 10px;
  padding-left:0;
}
@media (max-width: 767px) {
  #messenger_main__center .msg_post #mymsg_post__form .mymsg_post #mymsg_post {
    width: 87%;
  }
  #messenger_main__center .msg_post #mymsg_post__form .content__btn--msgpost-submit .icon_msg_post {
    position: absolute;
    bottom: 3px;
    right: 0px;
  }
  #messenger_main__center .msg_post #mymsg_post__form .mymsg_post a .icon_msg_imgpost {
    width: 24px;
    height: 24px;
    position: absolute;
    bottom: 11px;
    left: 310px;
  }
  #messenger_main__center #mymsg_post_up a .icon_msg_imgpost {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 110px;
    left: 410px;
  }
  #messenger_main__center .msg_post #mymsg_post__form .content__btn--msgpost-submit{
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 2px;
    right: 4px;
    padding-left: 0;
  }
}





#alert {
  border: 1px solid #f42828;
  margin: 5px 0;
  padding: 7px;
  border-radius: 7px;
  background-color: #ffe6e6;
  color: #F00;

}











/* ------------------------------
  footer
------------------------------ */
#site__footer {
  margin-top: 30px;
  color: #475569;
  font-size: 12px;
}
#site__footer .footer__list {
  overflow: hidden;
  margin-bottom: 10px;
}
#site__footer .footer__list li {
  float: left;
  line-height: 25px;
}
#site__footer .footer__list li + li {
  margin-left: 20px;
}
#site__footer .footer__list li:last-child {
  width: 100%;
  margin-left: 0;
}
#site__footer .footer__privacyPolicy {
  font-family: "Inter", sans-serif;
  font-size: 11px;
}

button.send-message{
  background:#fff;
  border: solid #00B3DB 1px;
  border-radius: 4px;
  padding: 3px 3px 3px 15px;
  text-align: center;
  margin: 5px;
  width: 80%;
  color:#00B3DB;
  position:relative;
  font-weight: 600;
}
button.send-message:before{
  content:"";
  background-image:url("/assets/images/common/icon-send-message.svg");
  position:absolute;
  left: 17px;
  bottom: 6px;
  height: 12px;
  width: 16px;
}

button.follow{
  background:#fff;
  border: solid #00B3DB 1px;
  border-radius: 4px;
  padding: 3px 3px 3px 15px;
  text-align: center;
  margin: 5px;
  width: 80%;
  color:#00B3DB;
  position:relative;
  font-weight: 600;
}
button.follow:before{
  content:"";
  background-image:url("/assets/images/common/icon-follow-btn.svg");
  position:absolute;
  left: 17px;
  bottom: 6px;
  height: 12px;
  width: 16px;
}

button.follow.followed{
  background:#00B3DB;
  color:#fff;
}
button.follow.followed:before{
  content:"";
  background-image:url("/assets/images/common/icon-followed-btn.svg");
  position:absolute;
  left: 17px;
  bottom: 6px;
  height: 12px;
  width: 16px;
}

/* URLコピー通知スタイル */
.copy-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
}

@media (max-width: 767px) {
  .copy-notification {
    top: 16px;
    right: 16px;
    left: 16px;
    font-size: 3.7333333333vw;
    padding: 3.2vw 4vw;
  }
}

.copy-notification.copy-success {
  background-color: #10B981;
}

.copy-notification.copy-error {
  background-color: #EF4444;
}

/* URLコピーボタンのスタイル */
.copy-url-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  width: 100%;
}

/* モーダル内のURLコピーボタン */
.topics__article--iconCopy .copy-url-btn {
  justify-content: center;
  height: 100%;
}

/* シェアリスト内のURLコピーボタン */
.topics__article--iconShare-list .copy-url-btn {
  text-align: left;
  display: block;
}

/* メッセージフォーム用スタイル */
.mymsg_post .mymsg_post_container {
  position: relative;
  border: 1px solid #ddd;
  /* border-radius: 8px; */
  padding: 9px 8px;
  background: white;
  min-height: 32px;
  display: flex;
  flex-direction: column;
}

.mymsg_post .mymsg_post_content {
  flex: 1;
}

.mymsg_post .mymsg_post_textarea {
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  min-height: 18px;
  line-height: 1.1;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  padding: 0;
}

.mymsg_post .mymsg_preview_container {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}

.mymsg_post .mymsg_preview_container:not(:empty) {
  margin-top: 8px;
}

.mymsg_post .mymsg_preview_container.show {
  display: flex !important;
}

.mymsg_post .mymsg_preview_item {
  position: relative;
  display: inline-block;
}

.mymsg_post .mymsg_preview_img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.mymsg_post .mymsg_img_delete {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ff4444;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.mymsg_post .mymsg_post_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  flex-shrink: 0;
}

.mymsg_post .mymsg_file_btn {
  display: inline-flex;
  align-items: center;
}

.mymsg_post .mymsg_submit_btn {
  margin: 0;
}

#agreement h1 {
  font-size: 1.5rem;
}

#agreement h2 {
  margin-top: 0.5rem;
  font-size: 1.3rem;
}

#agreement h3 {
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

section {
  margin: 1rem 0;
}

/* Tag Input UI - 既存の post__hashtag スタイルを上書き */
.post__modal .post__modal--box .content__wrap .post__hashtag {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 40px;
  margin-bottom: 10px;
}

.post__modal .post__modal--box .content__wrap .post__hashtag::before {
  content: "＃";
  font-weight: 700;
  line-height: 40px;
  flex-shrink: 0;
}

.post__modal .post__hashtag .tag-container {
  flex: 1;
  border: #CBD5E1 1px solid;
  border-radius: 8px;
  padding: 2px 6px;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 32px;
  background: #fff;
  margin-left: 10px;
}

.post__modal .post__hashtag .selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.post__modal .post__hashtag .tag-item {
  display: inline-flex;
  align-items: center;
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid #bbdefb;
  white-space: nowrap;
  line-height: 1.2;
}

.post__modal .post__hashtag .tag-remove {
  margin-left: 4px;
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  padding: 2px;
}

.post__modal .post__hashtag .tag-remove:hover {
  color: #d32f2f;
}

.post__modal .post__hashtag .tag-container input#post__hashtag {
  border: none !important;
  outline: none;
  flex: 1;
  min-width: 80px !important;
  width: auto !important;
  padding: 6px 4px;
  font-size: 14px;
  background: transparent;
  line-height: 1.4;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .post__modal .post__modal--box .content__wrap .post__hashtag {
    margin-bottom: 2.6666666667vw;
  }
  
  .post__modal .post__modal--box .content__wrap .post__hashtag::before {
    line-height: 10.6666666667vw;
  }
  
  .post__modal .post__hashtag .tag-container {
    margin-left: 2.6666666667vw;
    padding: 1.0666666667vw 2.1333333333vw;
    min-height: 8.5333333333vw;
    border-radius: 2.1333333333vw;
  }
  
  .post__modal .post__hashtag .tag-item {
    font-size: 3.7333333333vw;
    padding: 0.5333333333vw 2.1333333333vw;
  }
  
  .post__modal .post__hashtag .tag-container input#post__hashtag {
    font-size: 3.7333333333vw;
    padding: 1.6vw 1.0666666667vw;
  }
}