body{
  /*background-color: #fcfcfc; */
  background-color: #153351;
  color: #CCC  ;
}


.btn {
  border-radius: 300px;
}

.btn-primary{
  color: #fcfcfc;
}

.navbar {
  background-color: #06BBCC;
  color: #FCFCFC;
}

a.navbar-brand{
  color: #FCFCFC;
  
}

.form-control{
  border-radius: 20px;
}

.form-control.post-text {
  border-radius: 20px; /* 例として8pxのボーダー半径を設定 */
  overflow: auto; /* スクロールバーを表示 */
  box-sizing: border-box; /* ボーダーとパディングを含めてサイズを計算 */
}

.input-group-prepend{
  border-radius: 20px;
}

.input-group-text{
  border-radius:  20px 0 0 20px;
}

.input-group{
  border-radius: 20px;
}

.spacer{
  padding-bottom: 50px;
}

.icon-img{
  width: 50px;
  height: 50px;

  border-radius: 100%;
}

.prof-name{
  font-size: 150%;
}


.prof-area{
  margin: 16px;
}


.uploadarea{
    height: 100px;
    border-radius: 20px;
    background-color: #6c757d !important;
}

.upload-area {
    color: #52565b;
    padding: 20px;
    border-radius: 20px;  
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #6c757d;
    border-radius: 10px;
    background-color: #f8f9fa;
}
.upload-area input {
    display: none;
}
.upload-label {
    text-align: center;
    cursor: pointer;
}

.upload-description{
      text-align: left;
    justify-content: left;
    align-items: left;

}

.loading {
  display: none; /* 初期状態では非表示 */

  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: #fcfcfc;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* 他の要素より前面に表示 */
  
  justify-content: center; /* 追加 */
  align-items: center; /* 追加 */
  /* justify-contentとalign-itemsはdisplay: flex;が有効なときに機能 */

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

.spinner {
  border: 8px solid #CCC; /* ライトグレーの背景 */
  border-top: 8px solid #06BBCC; /* 青色のスピナー */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.target_img_div {
  cursor: pointer;

}

.cut-line-area {
  border-top: 2px dashed #ccc; /* 点線のスタイル */
  margin: 20px 0; /* 上下の余白 */
  padding: 10px 0; /* 上下のパディング */
  text-align: center; /* 中央揃え */
  position: relative; /* 擬似要素のために必要 */
}

.post-btn-area {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.post-btn-area .post-btn {
  background-color: #06BBCC;
  color: #FCFCFC;
  border: none;
  border-radius: 50px 50px 0 0;
  padding: 15px 30px; /* サイズを大きく */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 1.2em; /* フォントサイズを大きく */
}

/* スマホ用スタイル */
@media (max-width: 768px) {
  .post-btn-area {
      padding-right: 10px; /* スマホでは右端に寄せる */
  }
}

/* PC用スタイル */
@media (min-width: 769px) {
  .post-btn-area {
      right: 20%; /* メインコンテンツに近い位置に配置 */
      padding-right: 0;
  }
}

.post-content{
  color: #333;
}

/* CSSファイル */
.text-limit-exceeded {
  color: red;
  font-weight: bold;
  font-size: 18px;
}


.overlay-text {
  opacity: 0.7; /* 透明度を調整 */
}

.post-content {
  word-wrap: break-word; /* テキストを折り返す */
  overflow-wrap: break-word; /* テキストを折り返す */
}

.no-post-content {
  display: none;
  color: #CCC;
}

.post-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.post-image-item {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 正方形にするための比率 */
  position: relative;
}

.post-image-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をクロップして縦横比を統一 */
}

@media (max-width: 768px) {
  .post-image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer-text{
  padding: 0px;
  margin: 0px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  display: none; /* 初期状態では非表示 */
  z-index: 999; /* ローディングインジケーターよりも前面に表示 */
}