.ecopost-title-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.ecopost-title{
    margin-top: 0;
    margin-bottom: 0;
}
#ecopost-title-sub{
    margin-left: 20px;
}
/* エコ活の使い方 */
.howto-ecopost-flex{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.howto-ecopost-container{
    width: 500px;
    text-align: center;
}
.howto-ecopost-title{
    color: #02ab2f;
}
.howto-ecopost-content{
    text-align: left;
    line-height: 1.8;
}
#coin-gold{
    color: gold;
}

/* 月次レポート */
.monthly-report-anounce{
    color: #02ab2f;
    margin: 0 0 8px 0;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}
.monthly-report{
    color: white;
    background-color: #02ab2f;
    width: 330px;
    border-radius: 10px;
    padding: 20px;
}
.monthly-report-title{
    margin-top: 0;
}
.monthly-report-title span{
    font-size: 12px;
}
.monthly-report-count{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 2px white solid;
    margin-bottom: 20px;
    padding: 10px 0;
}
.monthly-count{
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}
.monthly-count span{
    font-size: 32px;
}
.ranking-title{
    font-size: 14px;
    margin-bottom: 10px;
}
.ranking{
    margin: 5px 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.ranking-fifth{
  border-bottom: white 2px solid;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
/* タブデザイン */
.tab_post-area {
    padding-left: 0;
    list-style-type: none;
    display: flex;
    cursor: pointer;
}
.tab_post{
    width: calc(900px/2);
    padding: 10px;
    text-align: center;
    font-weight: bold;
    color: #888;
    background-color: #fafafa;
}
.tab_post:nth-child(1){
    border-radius: 8px 0 0 8px;
}
.tab_post:nth-child(2){
    border-radius: 0 8px 8px 0;
}
.tab_post.active{
    background-color: #000;
    color: #fff;
}

/* タブのパネルはデフォルト非表示 */
.panel_post-area .panel_post {
  display: none;
}

/* active のパネルだけ表示 */
.panel_post-area .panel_post.active {
  display: block;
}
/* ==========================
   エコ活投稿モーダル
========================== */
/* 背景スクロール抑止（任意） */
body.is-modal-open {
  overflow: hidden;
}

.ecoModal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* 開いてない時は非表示 */
  display: none;
}

.ecoModal.is-open {
  display: block;
}

/* 背景の暗幕 */
.ecoModal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* 中央の箱 */
.ecoModal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(92vw, 560px);
  max-height: 86vh;
  overflow: auto;

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  padding: 16px 16px 18px;
}

/* 見出し行 */
.ecoModal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ecoModal__head h3 {
  margin: 0;
  font-size: 18px;
}

/* ×ボタン */
.ecoModal__close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
}

/* フォーム */
.ecoModal__field {
  margin: 12px 0;
}

.ecoModal__field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.ecoModal__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  resize: vertical;
}
.ecoModal__actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.ecoModal__submit {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
}

/* ==========================
   エコ活（掲示板）表示CSS
   対象: view-spot.php エコ活タブ
========================== */
.eco-post-list{
  display: grid;
  gap: 14px;
  margin-top: 12px;
}
/* 投稿カード */
.eco-post-card{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
/* ヘッダー（アイコン＋名前＋日付） */
.eco-post-head{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
/* ミートボール */
.eco-meatball{
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 999px;
  padding: 2px 10px 4px;
  line-height: 1;
  cursor: pointer;
  font-size: 18px;
  color: #444;
}
.eco-meatball:hover{
  background: #f7f7f7;
}
.eco-meatball--small{
  font-size: 16px;
  padding: 1px 8px 3px;
}
.eco-post-user{
  display: flex;
  align-items: center;
  gap: 10px;
}
.eco-post-user-icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  flex: 0 0 auto;
}
.eco-user-link{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.eco-user-link:hover .eco-post-user-name,
.eco-user-link:hover .eco-reply-user-name{
  text-decoration: underline;
}
/* アイコン未登録の時の丸 */
.eco-post-user-icon.is-empty{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  background: #f3f3f3;
  flex: 0 0 auto;
}
/* 名前・時刻 */
.eco-post-user-meta{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.eco-post-user-name{
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}
.eco-post-time{
  margin-top: 2px;
  font-size: 12px;
  color: #777;
}
/* 本文 */
.eco-post-body{
  display: grid;
  gap: 10px;
}
.eco-post-comment{
  font-size: 14px;
  line-height: 1.7;
  color: #222;
  word-break: break-word;
}
/* 画像エリア：デカくなりすぎない＋見栄え */
.eco-post-images{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.eco-post-image{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  display: block;
}
/* 画像が1枚のときは高さを少し上げる */
.eco-post-images a:only-child .eco-post-image{
  height: 220px;
}
/* フッター（今回は“見た目だけ”のボタンも整える） */
.eco-post-foot{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.eco-action-btn{
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.eco-action-btn:hover{
  background: #f7f7f7;
}
.eco-action-btn:active{
  transform: translateY(1px);
}
/* いいね押下状態 */
.eco-action-btn.is-liked{
  border-color: #cfead8;
  background: #eefaf2;
}
/* リプライ入力ボックス */
.eco-reply-box{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.eco-reply-text{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  background: #fff;
}
.eco-reply-actions{
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.eco-reply-submit{
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.eco-reply-cancel{
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

/* ==========================
   リプライ一覧
========================== */
.eco-replies{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.eco-replies-empty{
  margin: 0;
  font-size: 13px;
  color: #777;
}
.eco-replies-list{
  display: grid;
  gap: 10px;
}
/* 1リプライ行 */
.eco-reply-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.eco-reply-user-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  flex: 0 0 auto;
}
.eco-reply-user-icon.is-empty{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e5e5e5;
  background: #f3f3f3;
  flex: 0 0 auto;
}
.eco-reply-content{
  min-width: 0;
  flex: 1;
  background: #fbfbfb;
  border: 1px solid #efefef;
  border-radius: 12px;
  padding: 10px 12px;
}
.eco-reply-meta{
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 6px;
  justify-content: space-between;
}
.eco-reply-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.eco-reply-user-name{
  font-weight: 800;
  font-size: 13px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vw;
}
.eco-reply-time{
  font-size: 12px;
  color: #777;
}
.eco-reply-comment{
  font-size: 13px;
  line-height: 1.6;
  color: #222;
  word-break: break-word;
}
/* もっと見るボタン */
.eco-replies-more{
  margin-top: 10px;
  margin-bottom: 10px; /* ★追加：ボタン下に余白 */
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.eco-replies-more:hover{
  background: #f7f7f7;
}
/* エコ活メニューモーダル */
.ecoMenuModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.ecoMenuModal.is-open{
    display:block;
}
.ecoMenuModal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
}
.ecoMenuModal__dialog{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: min(92vw, 420px);
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  padding: 14px;
}
.ecoMenuModal__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ecoMenuModal__close{
  border:none;
  background:transparent;
  font-size: 32px;
  cursor:pointer;
  padding: 6px 10px;
}
.ecoMenuBtn{
  width: 100%;
  text-align: left;
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}
.ecoMenuBtn:hover{ 
    background:#f7f7f7;
}
.ecoMenuBtn--danger{
  border-color: #ffd6d6;
  background: #fff5f5;
}
/* いいねしたユーザー一覧 */
.eco-likers{
  display: grid;
  gap: 10px;
  margin-top: 6px;
}
.eco-liker{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #efefef;
  background: #fbfbfb;
  border-radius: 12px;
  padding: 10px 12px;
}
.eco-liker-icon{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  flex: 0 0 auto;
}
.eco-liker-icon.is-empty{
  background: #f3f3f3;
}
.eco-liker-name{
  font-weight: 800;
  font-size: 14px;
  color: #222;
}
.eco-edit-text{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}
/* リプライのフッター（いいね/リプライ） */
.eco-reply-foot{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* リプライ配下（返信）の見た目用の余白：後で表示実装すると綺麗 */
.eco-reply-children{
  margin-top: 10px;
  margin-left: 44px; /* アイコン分インデント */
  display: grid;
  gap: 10px;
}
/* リプライ返信boxは既存eco-reply-textを使うので最小 */
.eco-reply2-box{
  margin-top: 10px;
}
.eco-reply-item--child{
  opacity: 0.98;
}
.eco-reply-item--child .eco-reply-content{
  background: #ffffff;
}
/* ==========================
   rest側も top3 と同じ gap(10px) を維持
========================== */
/* rest と top3 の境目にも余白を作る */
.eco-replies-list.is-rest{
  display: grid;
  gap: 10px;
  margin-bottom: 10px; /* ★追加：rest(追加表示) と 最新3件の境目 */
}
/* 「閉じる」ボタンは見た目は “もっと見る” と同じでOK */
.eco-replies-close{
  margin-left: 8px; /* 横並びに見える感じの微調整（任意） */
}

/* ページネーション */
.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 20px 0 10px;
}
.pagination__link,
.pagination__current {
    min-width: 32px;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 14px;
    text-align: center;
}
.pagination__link {
    cursor: pointer;
}
.pagination__link:hover {
    background: #f5f5f5;
}
.pagination__current {
    background: #02ab2f;
    border-color: #02ab2f;
    color: #fff;
    font-weight: 700;
}
/* ==========================
   トースト警告表示
========================== */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  min-width: 200px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #323232;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 20000;
}
.toast.is-show {
  opacity: 1;
  transform: translateY(0);
}
.toast--success {
  background: #2e7d32;
}
.toast--error {
  background: #c62828;
}
/* ==========================
   ecoMenuModal レイヤー修正（dialog型）
========================== */
.ecoMenuModal__overlay{
  z-index: 1;
}

.ecoMenuModal__dialog{
  z-index: 2;
}
/* ==========================
   モーダルの重なり順を固定（最重要）
   overlay < dialog にする
========================== */

/* ecoModal（投稿モーダル / 報告モーダルで流用してる想定） */
.ecoModal { 
  position: fixed;
  inset: 0;
  z-index: 15000; /* メニュー(9999)より上でもOK。必要なら調整 */
}

.ecoModal__overlay{
  position: absolute;
  inset: 0;
  z-index: 1; /* 暗幕は下 */
}

.ecoModal__dialog{
  position: absolute;
  z-index: 2; /* 本体は上 */
}

/* ecoMenuModal（メニュー）も念のため「親に position」を付けて確実化 */
.ecoMenuModal{
  position: fixed;
  inset: 0;
  z-index: 14000;
}
.ecoMenuModal__overlay{ z-index: 1; }
.ecoMenuModal__dialog{ z-index: 2; }
/* ==========================
   報告モーダル（ecoMenuModal__content型）の重なり修正
   overlay < content を固定
========================== */

/* report modal のルート（ecoMenuModal流用） */
#js-reportModal.ecoMenuModal{
  position: fixed;
  inset: 0;
  z-index: 16000;            /* 他のモーダルより上に出す */
  display: none;
}

#js-reportModal.ecoMenuModal.is-open{
  display: block;
}

/* 暗幕 */
#js-reportModal .ecoMenuModal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1;                /* 下 */
}

/* 本体（←ここが今まで効いてなかった） */
#js-reportModal .ecoMenuModal__content{
  position: absolute;
  z-index: 2;                /* 上 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(92vw, 720px);
  max-height: 86vh;
  overflow: auto;

  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  padding: 24px;
}

/* ×ボタンを右上に固定（任意） */
#js-reportModal .ecoMenuModal__close{
  position: absolute;
  top: 10px;
  right: 10px;
}

/* エコ活カード内のスポットリンク色 */
.eco-post-card a.eco-spot-link{
    color: #02ab2f;
    font-weight: 700;
    text-decoration: none;
}
.eco-post-card a.eco-spot-link:hover{
    text-decoration: underline;
}
/* ==========================
   view-ecopost.php 用：中央寄せ崩れ修正
   （末尾に置いて後勝ちさせる）
========================== */
/* 右側のメタ領域（ユーザー名/日時/スポット） */
.eco-post-meta{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ユーザー名 + 日時 + … を1行に */
.eco-post-meta-top{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

/* …（ミートボール）を右端へ */
.eco-post-meta-top .eco-meatball{
  margin-left: auto;
}

/* 本文が中央寄せにならないよう強制 */
.eco-post-comment{
  text-align: left !important;
}

/* スポットリンク：1枚目の見た目（左寄せ＆緑） */
.eco-spot-link{
  display: inline-block;
  color: #02ab2f;
  font-weight: 700;
  text-decoration: none;
}
.eco-spot-link:hover{
  text-decoration: underline;
}

/* スポット名と住所（見た目を整える） */
.eco-spot-title{
  font-size: 20px;
  line-height: 1.3;
}
.eco-spot-sub{
  font-size: 14px;
  color: #666;
  margin-top: 2px;
}
/* 出した資源物一覧 */
.eco-post-resources{
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #444;
}

/* 以下追加実装項目 */
/* ==========================
   投稿編集モード時の ecoMenuModal 拡張
========================== */
#js-ecoMenuModal.is-post-edit .ecoMenuModal__dialog {
  width: min(92vw, 720px);
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
}

#js-ecoMenuModal.is-post-edit .ecoMenuModal__head {
  margin-bottom: 0;
  min-height: 56px;
  padding: 0 56px 0 20px;
  border-bottom: 1px solid #ececec;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
  background: #fff;
}

#js-ecoMenuModal.is-post-edit .ecoMenuModal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

#js-ecoMenuModal.is-post-edit .ecoMenuModal__close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* 画像エリア */
#js-ecoMenuModal.is-post-edit .ecoModal_pic {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fcfcfc;
  box-sizing: border-box;
}

#js-ecoMenuModal.is-post-edit .ecoModal_pic > .ecoModal__field,
#js-ecoMenuModal.is-post-edit .eco-edit-image-slot {
  flex: 1 1 0;
  min-width: 0;
  width: calc(50% - 7px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

#js-ecoMenuModal.is-post-edit .eco-edit-slot-title {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #222;
}

/* ドロップエリア */
#js-ecoMenuModal.is-post-edit .drop-area-ecopost,
#js-ecoMenuModal.is-post-edit .eco-edit-drop-area {
  position: relative;
  border: 2px dashed #cfcfcf !important;
  background-color: #f6f6f6 !important;
  border-radius: 12px;
  margin: 0;
  padding: 18px;
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

#js-ecoMenuModal.is-post-edit .drop-area-ecopost label,
#js-ecoMenuModal.is-post-edit .eco-edit-drop-label {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}

/* ネイティブの file ボタンを完全非表示 */
#js-ecoMenuModal.is-post-edit input[type="file"].js-ecoEditImageInput {
  display: none !important;
}

/* 説明テキストとアイコンは常に表示 */
#js-ecoMenuModal.is-post-edit .pic_copywrite_ecopost {
  font-size: 13px;
  font-weight: 700;
  color: #8a8a8a;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

#js-ecoMenuModal.is-post-edit .eco-edit-drop-icon,
#js-ecoMenuModal.is-post-edit .drop-area-ecopost svg {
  width: 50px;
  fill: currentColor;
  color: #909090;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

/* プレビュー領域 */
#js-ecoMenuModal.is-post-edit .preview-area-ecopost {
  width: 100%;
  margin-top: 10px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

#js-ecoMenuModal.is-post-edit .eco-edit-drop-area.has-image .preview-area-ecopost {
  margin-top: 8px;
}

/* 画像本体ラッパー */
#js-ecoMenuModal.is-post-edit .eco-edit-image-preview-wrap {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 70%;
}

#js-ecoMenuModal.is-post-edit .eco-edit-image-preview-wrap img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  border-radius: 10px;
}

/* ×ボタンは画像の内側右上 */
#js-ecoMenuModal.is-post-edit .eco-edit-image-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

#js-ecoMenuModal.is-post-edit .eco-edit-image-remove-btn:hover {
  opacity: 0.9;
}

#js-ecoMenuModal.is-post-edit .is-hidden {
  display: none !important;
}

/* 保存ボタンエリア */
#js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions .ecoModal__submit {
  display: block;
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 0 0 16px 16px;
  background: #02ab2f;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-sizing: border-box;
}

#js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions .ecoModal__submit:hover {
  opacity: 0.95;
}

/* =========================================================
   追加修正：投稿フォームと編集フォームの画像UI統一
   ＋ 編集モーダルを「ヘッダー固定 / 中央だけスクロール / 保存ボタン固定」にする
========================================================= */

/* 投稿フォーム側の画像エリアも編集フォームと同じ見た目に統一 */
.ecoModal__field.ecoModal_pic,
.ecoModal_pic {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fcfcfc;
  box-sizing: border-box;
}

.ecoModal_pic > .ecoModal__field,
.eco-edit-image-slot {
  flex: 1 1 0;
  min-width: 0;
  width: calc(50% - 7px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

/* ドロップエリア共通 */
.drop-area-ecopost,
.eco-edit-drop-area {
  position: relative;
  border: 2px dashed #cfcfcf !important;
  background-color: #f6f6f6 !important;
  border-radius: 12px;
  margin: 0;
  padding: 18px;
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.drop-area-ecopost label,
.eco-edit-drop-label {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}

.drop-area-ecopost label input,
input[type="file"].js-ecoEditImageInput {
  display: none !important;
}

.drop-area-ecopost label svg,
.eco-edit-drop-icon {
  width: 50px;
  fill: currentColor;
  color: #909090;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.pic_copywrite_ecopost {
  font-size: 13px;
  font-weight: 700;
  color: #8a8a8a;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.preview-area-ecopost {
  width: 100%;
  margin-top: 10px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.drop-area-ecopost.has-image .preview-area-ecopost,
.eco-edit-drop-area.has-image .preview-area-ecopost {
  margin-top: 8px;
}

/* 画像プレビュー共通 */
.eco-image-preview-wrap,
.eco-edit-image-preview-wrap {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 70%;
}

.eco-image-preview-wrap img,
.eco-edit-image-preview-wrap img,
.drop-area-ecopost label .preview-area-ecopost img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  margin-top: 0;
  border-radius: 10px;
}

/* ファイル名ラベル（投稿フォーム側） */
.eco-image-filename {
  position: absolute;
  left: 5px;
  bottom: 5px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
  line-height: 1.3;
}

/* ×ボタンを投稿フォームの四角寄りデザインに統一 */
.delete-image,
.eco-edit-image-remove-btn,
.eco-image-remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: auto;
  height: auto;
  min-width: 24px;
  min-height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: none;
}

.delete-image:hover,
.eco-edit-image-remove-btn:hover,
.eco-image-remove-btn:hover {
  opacity: 0.9;
}

/* ==========================
   投稿編集モード：スクロール構造を修正
========================== */
#js-ecoMenuModal.is-post-edit .ecoMenuModal__dialog {
  width: min(92vw, 720px);
  height: min(86vh, 900px);
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
}

#js-ecoMenuModal.is-post-edit .ecoMenuModal__body {
  padding: 0;
  overflow: hidden;
  background: #fff;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
}

#js-ecoMenuModal.is-post-edit .eco-edit-post-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

#js-ecoMenuModal.is-post-edit .eco-edit-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 0;
  background: #fff;
  box-sizing: border-box;
}

#js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0;
  border-top: 1px solid #ccc;
  background: #fff;
  position: relative;
  z-index: 20;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* =========================================================
   mypage 編集フォーム不足分
   スクショ2枚目の見た目に寄せるための中身側スタイル
========================================================= */

/* 編集モーダル本体サイズ・見た目をspot側に合わせる */
#js-ecoMenuModal.is-post-edit .ecoMenuModal__dialog{
  width: min(92vw, 720px);
  height: min(86vh, 900px);
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

/* ヘッダー */
#js-ecoMenuModal.is-post-edit .ecoMenuModal__head{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 56px;
  padding: 0 56px 0 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ececec;
  background: #fff;
  flex: 0 0 auto;
}

#js-ecoMenuModal.is-post-edit .ecoMenuModal__title{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #222;
}

#js-ecoMenuModal.is-post-edit .ecoMenuModal__close{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  color: #333;
}

/* bodyの中はスクロールさせない。中の .eco-edit-scroll だけスクロール */
#js-ecoMenuModal.is-post-edit .ecoMenuModal__body{
  padding: 0;
  overflow: hidden;
  background: #fff;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
}

#js-ecoMenuModal.is-post-edit .eco-edit-post-form{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

#js-ecoMenuModal.is-post-edit .eco-edit-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 0;
  background: #fff;
  box-sizing: border-box;
}

/* 各項目カード */
#js-ecoMenuModal.is-post-edit .ecoModal__field{
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fcfcfc;
  box-sizing: border-box;
}

/* ラベル */
#js-ecoMenuModal.is-post-edit .ecoModal__label,
#js-ecoMenuModal.is-post-edit .ecoModal__field > label,
#js-ecoMenuModal.is-post-edit .eco-edit-slot-title{
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  color: #222;
}

/* 入力欄 */
#js-ecoMenuModal.is-post-edit .ecoModal__field input[type="date"],
#js-ecoMenuModal.is-post-edit .ecoModal__field textarea,
#js-ecoMenuModal.is-post-edit .eco-edit-text{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

#js-ecoMenuModal.is-post-edit .ecoModal__field textarea,
#js-ecoMenuModal.is-post-edit .eco-edit-text{
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
}

/* 補助文 */
#js-ecoMenuModal.is-post-edit .eco-edit-help,
#js-ecoMenuModal.is-post-edit .ecoModal__field p{
  margin: 6px 0 0;
  font-size: 12px;
  color: #666;
  line-height: 1.7;
}

/* 資源物セクション */
#js-ecoMenuModal.is-post-edit .ecoModal__resources{
  margin-top: 4px;
}

#js-ecoMenuModal.is-post-edit .ecoModal__resGroup + .ecoModal__resGroup{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ececec;
}

#js-ecoMenuModal.is-post-edit .ecoModal__resCat{
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
  font-size: 15px;
}

#js-ecoMenuModal.is-post-edit .ecoModal__resList{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

#js-ecoMenuModal.is-post-edit .ecoModal__resItem{
  position: relative;
  display: flex;
  align-items: center;
}

#js-ecoMenuModal.is-post-edit .ecoModal__resItem input[type="checkbox"]{
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  flex: 0 0 auto;
}

#js-ecoMenuModal.is-post-edit .ecoModal__resItem input[type="checkbox"] + label{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  line-height: 1.25;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 500;
  color: #222;
}

/* コメント欄 */
#js-ecoMenuModal.is-post-edit .ecoModal_comment{
  border-top: none;
  padding-top: 14px;
}

/* 画像エリア */
#js-ecoMenuModal.is-post-edit .ecoModal_pic{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fcfcfc;
  box-sizing: border-box;
}

#js-ecoMenuModal.is-post-edit .ecoModal_pic > .ecoModal__field,
#js-ecoMenuModal.is-post-edit .eco-edit-image-slot{
  flex: 1 1 0;
  min-width: 0;
  width: calc(50% - 7px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

/* ドロップエリア */
#js-ecoMenuModal.is-post-edit .drop-area-ecopost,
#js-ecoMenuModal.is-post-edit .eco-edit-drop-area{
  position: relative;
  border: 2px dashed #cfcfcf !important;
  background-color: #f6f6f6 !important;
  border-radius: 12px;
  margin: 0;
  padding: 18px;
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

#js-ecoMenuModal.is-post-edit .drop-area-ecopost label,
#js-ecoMenuModal.is-post-edit .eco-edit-drop-label{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}

#js-ecoMenuModal.is-post-edit input[type="file"].js-ecoEditImageInput{
  display: none !important;
}

#js-ecoMenuModal.is-post-edit .pic_copywrite_ecopost{
  font-size: 13px;
  font-weight: 700;
  color: #8a8a8a;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

#js-ecoMenuModal.is-post-edit .eco-edit-drop-icon,
#js-ecoMenuModal.is-post-edit .drop-area-ecopost svg{
  width: 50px;
  fill: currentColor;
  color: #909090;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

#js-ecoMenuModal.is-post-edit .preview-area-ecopost{
  width: 100%;
  margin-top: 10px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

#js-ecoMenuModal.is-post-edit .eco-edit-drop-area.has-image .preview-area-ecopost{
  margin-top: 8px;
}

#js-ecoMenuModal.is-post-edit .eco-edit-image-preview-wrap{
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 70%;
}

#js-ecoMenuModal.is-post-edit .eco-edit-image-preview-wrap img{
  display: block;
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  border-radius: 10px;
}

/* ×ボタンは投稿フォームと同じ四角寄り */
#js-ecoMenuModal.is-post-edit .eco-edit-image-remove-btn{
  position: absolute;
  top: 5px;
  right: 5px;
  width: auto;
  height: auto;
  min-width: 24px;
  min-height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: none;
}

#js-ecoMenuModal.is-post-edit .eco-edit-image-remove-btn:hover{
  opacity: 0.9;
}

/* 保存ボタン固定 */
#js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions{
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0;
  border-top: 1px solid #ccc;
  background: #fff;
  position: relative;
  z-index: 20;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

#js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions .ecoModal__submit{
  display: block;
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 0 0 16px 16px;
  background: #02ab2f;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-sizing: border-box;
}

#js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions .ecoModal__submit:hover{
  opacity: 0.95;
}
/* =========================================================
   リプライ編集モーダル（JS改修版）
   投稿編集モーダルと統一感を持たせる
========================================================= */

/* 通常の ecoMenuModal を投稿編集寄りに整える */
#js-ecoMenuModal:not(.is-post-edit) .ecoMenuModal__dialog{
  width: min(92vw, 560px);
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.20);
}

#js-ecoMenuModal:not(.is-post-edit) .ecoMenuModal__head{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 64px;
  padding: 0 56px 0 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ececec;
  background: #fff;
  flex: 0 0 auto;
}

#js-ecoMenuModal:not(.is-post-edit) .ecoMenuModal__title{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #222;
}

#js-ecoMenuModal:not(.is-post-edit) .ecoMenuModal__close{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  color: #333;
}

/* body */
#js-ecoMenuModal:not(.is-post-edit) .ecoMenuModal__body{
  padding: 18px 20px 20px;
  background: #fff;
  overflow-y: auto;
  box-sizing: border-box;
}

/* リプライ編集ラッパー */
#js-ecoMenuModal:not(.is-post-edit) .ecoReplyEdit{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 入力カード */
#js-ecoMenuModal:not(.is-post-edit) .ecoReplyEdit__field{
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fcfcfc;
  box-sizing: border-box;
}

/* ラベル */
#js-ecoMenuModal:not(.is-post-edit) .ecoReplyEdit__label{
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  color: #222;
}

/* textarea */
#js-ecoMenuModal:not(.is-post-edit) .ecoReplyEdit__textarea,
#js-ecoMenuModal:not(.is-post-edit) #js-ecoEditTextarea{
  width: 100%;
  box-sizing: border-box;
  display: block;
  min-height: 180px;
  padding: 12px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
  color: #222;
  resize: vertical;
}

/* ボタンエリア */
#js-ecoMenuModal:not(.is-post-edit) .ecoReplyEdit__actions{
  margin: 0;
  padding: 0;
}

/* 保存ボタン */
#js-ecoMenuModal:not(.is-post-edit) .ecoReplyEdit__submit{
  display: block;
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 14px;
  background: #02ab2f;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-sizing: border-box;
}

#js-ecoMenuModal:not(.is-post-edit) .ecoReplyEdit__submit:hover{
  opacity: 0.95;
}

/* 既存の ecoMenuBtn の見た目が混ざらないよう保険 */
#js-ecoMenuModal:not(.is-post-edit) .ecoReplyEdit__submit.ecoMenuBtn{
  text-align: center;
  margin-top: 0;
  padding: 0;
  border: none;
  background: #02ab2f;
  color: #fff;
}

/* モーダル表示中の背景スクロール固定を強化 */
body.is-modal-open,
body.is-fix-menu-open{
  overflow: hidden !important;
  touch-action: none;
}

/* =========================================================
   view-ecopost.php スマホ対応
   eco-post.css の末尾にそのまま追記
========================================================= */
@media screen and (max-width: 767px) {

  /* 全体の横はみ出し防止 */
  html,
  body {
    overflow-x: hidden;
  }

  main {
    overflow-x: hidden;
  }

  .basic {
    width: min(100%, 100vw);
    margin-top: 24px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  .info {
    padding: 24px 10px 32px 10px;
    border-radius: 24px;
  }

  body.is-modal-open,
  body.is-fix-menu-open{
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }

  /* -------------------------
     タイトル周り
  ------------------------- */
  .ecopost-title-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ecopost-title {
    font-size: 28px;
    line-height: 1.35;
    margin-left: 10px;
  }

  #ecopost-title-sub {
    margin-left: 10px;
    font-size: 14px;
    line-height: 1.6;
  }

  /* -------------------------
     説明エリア + 月次レポート
  ------------------------- */
  .howto-ecopost-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .howto-ecopost-container,
  .monthly-report-container,
  .monthly-report {
    width: 100%;
    box-sizing: border-box;
  }

  .howto-ecopost-container {
    text-align: left;
  }

  .howto-ecopost-title {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .howto-ecopost-content {
    font-size: 14px;
    line-height: 1.9;
  }

  .monthly-report-anounce {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .monthly-report {
    padding: 16px 14px;
    border-radius: 14px;
  }

  .monthly-report-title {
    font-size: 18px;
    line-height: 1.5;
  }

  .monthly-report-title span {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
  }

  .monthly-report-count {
    gap: 10px;
    padding: 12px 0;
  }

  .monthly-count {
    flex: 1 1 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }

  .monthly-count span {
    font-size: 24px;
  }

  .ranking-title {
    font-size: 13px;
    line-height: 1.5;
  }

  .ranking {
    gap: 12px;
    align-items: flex-start;
  }

  .ranking-spot-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
  }

  .ranking-spot-count {
    flex: 0 0 auto;
    font-size: 13px;
    white-space: nowrap;
  }

  /* -------------------------
     タブ
  ------------------------- */
  .tab_post-area {
    width: 100%;
    margin: 0 0 14px;
  }

  .tab_post {
    width: 50%;
    min-width: 0;
    padding: 12px 10px;
    font-size: 13px;
    line-height: 1.4;
  }

  /* -------------------------
     エコ活カード
  ------------------------- */
  .eco-post-list {
    gap: 12px;
  }

  .eco-post-card {
    padding: 12px 12px 10px;
    border-radius: 14px;
  }

  .eco-post-head {
    gap: 8px;
  }

  .eco-post-user {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    align-items: flex-start;
  }

  .eco-post-user-icon,
  .eco-post-user-icon.is-empty {
    width: 40px;
    height: 40px;
  }

  .eco-post-user-meta {
    flex: 1 1 auto;
    min-width: 0;
  }

  .eco-post-user-name {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.4;
  }

  .eco-post-time {
    font-size: 11px;
  }

  .eco-meatball {
    flex: 0 0 auto;
    padding: 2px 9px 4px;
    font-size: 16px;
  }

  .eco-post-body {
    gap: 8px;
  }

  .eco-post-body > div[style*="margin-top:8px"] {
    margin-top: 4px !important;
  }

  .eco-post-comment {
    font-size: 13px;
    line-height: 1.8;
  }

  .eco-post-resources {
    font-size: 13px;
    line-height: 1.7;
    word-break: break-word;
  }

  .eco-spot-link,
  .eco-post-card a.eco-spot-link {
    font-size: 16px;
    line-height: 1.5;
    word-break: break-word;
  }

  .eco-spot-title {
    font-size: 16px;
    line-height: 1.5;
  }

  .eco-spot-sub {
    font-size: 12px;
    line-height: 1.6;
  }

  /* インライン住所表示対策 */
  .eco-post-body span[style*="font-size:12px"] {
    display: inline-block;
    margin-left: 0 !important;
    margin-top: 4px;
    line-height: 1.6;
  }

  /* -------------------------
     投稿画像
  ------------------------- */
  .eco-post-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .eco-post-image {
    height: 112px;
    border-radius: 10px;
  }

  .eco-post-images a:only-child .eco-post-image {
    height: 200px;
  }

  /* -------------------------
     いいね / リプライボタン
  ------------------------- */
  .eco-post-foot {
    gap: 8px;
  }

  .eco-action-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    text-align: center;
    padding: 9px 10px;
    font-size: 13px;
  }

  /* -------------------------
     リプライ一覧
  ------------------------- */
  .eco-replies {
    margin-top: 12px;
    padding-top: 12px;
  }

  .eco-reply-item {
    gap: 8px;
  }

  .eco-reply-user-icon,
  .eco-reply-user-icon.is-empty {
    width: 30px;
    height: 30px;
  }

  .eco-reply-content {
    padding: 10px;
    border-radius: 10px;
  }

  .eco-reply-meta {
    gap: 6px;
    margin-bottom: 4px;
    align-items: flex-start;
  }

  .eco-reply-flex {
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }

  .eco-reply-user-name {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.5;
  }

  .eco-reply-time {
    font-size: 11px;
    line-height: 1.5;
  }

  .eco-reply-comment {
    font-size: 12px;
    line-height: 1.7;
  }

  .eco-reply-foot {
    gap: 8px;
  }

  .eco-reply-foot .eco-action-btn {
    flex: 0 1 auto;
    min-width: 110px;
  }

  .eco-reply-children {
    margin-left: 18px;
    gap: 8px;
  }

  .eco-replies-more {
    width: 100%;
    text-align: center;
    padding: 9px 12px;
    font-size: 13px;
  }

  .eco-replies-close {
    margin-left: 0;
  }

  /* -------------------------
     リプライ入力
  ------------------------- */
  .eco-reply-box {
    margin-top: 12px;
    padding-top: 12px;
  }

  .eco-reply-text {
    min-height: 96px;
    font-size: 14px;
  }

  .eco-reply-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }

  .eco-reply-submit,
  .eco-reply-cancel {
    width: 100%;
    text-align: center;
    padding: 10px 12px;
  }

  /* -------------------------
     ログイン誘導 / 空表示
  ------------------------- */
  .eco-login-required,
  .eco-empty {
    padding: 18px 14px;
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
  }

  .eco-login-btn {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    text-align: center;
  }

  /* -------------------------
     ページネーション
  ------------------------- */
  .pagination-form {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pagination {
    width: max-content;
    min-width: 100%;
    gap: 6px;
    padding-bottom: 4px;
  }

  .pagination__link,
  .pagination__current {
    min-width: 30px;
    padding: 6px 8px;
    font-size: 13px;
  }

  /* -------------------------
     トースト
  ------------------------- */
  .toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    min-width: 0;
    width: auto;
    font-size: 13px;
  }

  /* -------------------------
     モーダル共通
  ------------------------- */
  .ecoModal__dialog,
  .ecoMenuModal__dialog,
  #js-reportModal .ecoMenuModal__content {
    width: min(94vw, 94vw);
    max-height: 88vh;
    border-radius: 14px;
  }

  .ecoModal__dialog {
    padding: 14px 12px 16px;
  }

  .ecoMenuModal__dialog {
    padding: 12px;
  }

  #js-reportModal .ecoMenuModal__content {
    padding: 18px 14px 16px;
  }

  .ecoModal__head h3,
  .ecoMenuModal__title {
    font-size: 16px;
    line-height: 1.5;
  }

  .ecoModal__close,
  .ecoMenuModal__close {
    font-size: 28px;
  }

  /* -------------------------
     投稿フォーム画像エリア
  ------------------------- */
  .ecoModal__field.ecoModal_pic,
  .ecoModal_pic,
  #js-ecoMenuModal.is-post-edit .ecoModal_pic {
    flex-direction: column;
    gap: 16px;
    padding: 12px;
  }

  .ecoModal_pic > .ecoModal__field,
  .eco-edit-image-slot,
  #js-ecoMenuModal.is-post-edit .ecoModal_pic > .ecoModal__field,
  #js-ecoMenuModal.is-post-edit .eco-edit-image-slot {
    width: 100%;
  }

  .drop-area-ecopost,
  .eco-edit-drop-area,
  #js-ecoMenuModal.is-post-edit .drop-area-ecopost,
  #js-ecoMenuModal.is-post-edit .eco-edit-drop-area {
    padding: 14px;
    aspect-ratio: 4 / 3;
  }

  .pic_copywrite_ecopost,
  #js-ecoMenuModal.is-post-edit .pic_copywrite_ecopost {
    font-size: 12px;
    line-height: 1.7;
  }

  .drop-area-ecopost label svg,
  .eco-edit-drop-icon,
  #js-ecoMenuModal.is-post-edit .eco-edit-drop-icon,
  #js-ecoMenuModal.is-post-edit .drop-area-ecopost svg {
    width: 42px;
  }

  .eco-image-preview-wrap,
  .eco-edit-image-preview-wrap,
  #js-ecoMenuModal.is-post-edit .eco-edit-image-preview-wrap {
    max-width: 88%;
  }

  .eco-image-preview-wrap img,
  .eco-edit-image-preview-wrap img,
  .drop-area-ecopost label .preview-area-ecopost img,
  #js-ecoMenuModal.is-post-edit .eco-edit-image-preview-wrap img {
    max-height: 140px;
  }

  /* -------------------------
     投稿編集モーダル
  ------------------------- */
  #js-ecoMenuModal.is-post-edit .ecoMenuModal__dialog {
    width: min(94vw, 94vw);
    max-height: 88vh;
    border-radius: 14px;
  }

  #js-ecoMenuModal.is-post-edit .ecoMenuModal__head {
    min-height: 52px;
    padding: 0 44px 0 14px;
  }

  #js-ecoMenuModal.is-post-edit .ecoMenuModal__title {
    font-size: 16px;
  }

  #js-ecoMenuModal.is-post-edit .ecoMenuModal__close {
    right: 6px;
  }
}

/* =========================================================
   index.php：エコ活編集モーダル スマホ調整
   - 訪問日inputのはみ出し防止
   - 画像エリアを1カラム化
   - 保存ボタンを下端まで塗りつぶし
========================================================= */
@media screen and (max-width: 767px){

  /* モーダル本体：投稿モーダルと同じ見え方に寄せる */
  #js-ecoMenuModal.is-post-edit .ecoMenuModal__dialog{
    width: min(94vw, 720px);
    height: 90vh;
    max-height: 90vh;
    border-radius: 14px;
  }

  #js-ecoMenuModal.is-post-edit .ecoMenuModal__head{
    min-height: 58px;
    padding: 0 48px 0 16px;
  }

  #js-ecoMenuModal.is-post-edit .ecoMenuModal__title{
    font-size: 16px;
  }

  #js-ecoMenuModal.is-post-edit .eco-edit-scroll{
    padding: 14px 14px 0;
  }

  #js-ecoMenuModal.is-post-edit .ecoModal__field{
    padding: 12px;
    margin-bottom: 14px;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ① 訪問日 input が右にはみ出す問題の修正 */
  #js-ecoMenuModal.is-post-edit .ecoModal__field input[type="date"],
  #js-ecoMenuModal.is-post-edit .ecoModal__field textarea,
  #js-ecoMenuModal.is-post-edit .eco-edit-text{
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #js-ecoMenuModal.is-post-edit .ecoModal__field input[type="date"]{
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px;
    line-height: 1.4;
  }

  /* ② 画像投稿部分をスマホでは1カラム化 */
  #js-ecoMenuModal.is-post-edit .ecoModal__field.ecoModal_pic,
  #js-ecoMenuModal.is-post-edit .ecoModal_pic{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 12px;
  }

  #js-ecoMenuModal.is-post-edit .ecoModal__field.ecoModal_pic > .ecoModal__field,
  #js-ecoMenuModal.is-post-edit .ecoModal_pic > .ecoModal__field,
  #js-ecoMenuModal.is-post-edit .eco-edit-image-slot{
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
  }

  /* 画像選択エリア */
  #js-ecoMenuModal.is-post-edit .drop-area-ecopost,
  #js-ecoMenuModal.is-post-edit .eco-edit-drop-area{
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    min-height: 220px;
    padding: 18px;
    box-sizing: border-box;
  }

  #js-ecoMenuModal.is-post-edit .drop-area-ecopost label,
  #js-ecoMenuModal.is-post-edit .eco-edit-drop-label{
    width: 100%;
    min-height: 180px;
    box-sizing: border-box;
  }

  #js-ecoMenuModal.is-post-edit .pic_copywrite_ecopost{
    font-size: 13px;
    line-height: 1.7;
  }

  #js-ecoMenuModal.is-post-edit .drop-area-ecopost label svg,
  #js-ecoMenuModal.is-post-edit .eco-edit-drop-icon{
    width: 52px;
  }

  #js-ecoMenuModal.is-post-edit .preview-area-ecopost{
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
  }

  #js-ecoMenuModal.is-post-edit .eco-image-preview-wrap,
  #js-ecoMenuModal.is-post-edit .eco-edit-image-preview-wrap{
    max-width: 78%;
  }

  #js-ecoMenuModal.is-post-edit .eco-image-preview-wrap img,
  #js-ecoMenuModal.is-post-edit .eco-edit-image-preview-wrap img,
  #js-ecoMenuModal.is-post-edit .drop-area-ecopost label .preview-area-ecopost img{
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
  }

  /* 現在画像表示がある場合の保険 */
  #js-ecoMenuModal.is-post-edit .eco-edit-image-preview{
    max-width: 100%;
    text-align: center;
  }

  #js-ecoMenuModal.is-post-edit .eco-edit-image-preview img{
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    border-radius: 10px;
  }

  /* 保存ボタン：下部を全面グリーンで塗りつぶす */
  #js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions{
    margin: 0;
    padding: 0;
    border-top: 1px solid #ccc;
    background: #02ab2f;
  }

  #js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions .ecoModal__submit{
    display: block;
    width: 100%;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    margin: 0;
    padding: 0;
    border-radius: 0 0 14px 14px;
    font-size: 16px;
    line-height: 56px;
  }
}