@charset "utf-8";
html, body{
    margin: 0;
    padding: 0;
}
/* ローディングテキスト */
.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #02ab2f;
    z-index: 555;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loader .txt {
    font-size: 45px;
    font-weight: bold;
    color: #fff;
    display: none;
  }
  .txt img{
    width: 30vw;
    margin-right: auto;
    margin-left: auto;
  }

/* ヘッダー */
#top-header-content{
    background-position: center center;
    width: 100vw;
    height: 90vh;
    position: relative;
}
/* navの中身は常に同じ高さ基準で中央揃え */
#top-gNavi{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5vh;
    padding-left: 0.75vw;
}
#p-globalNav{
    display: flex;
    align-items: center;
    list-style: none;
    padding-left: 0;
    margin: 0;
    gap: 1.5vw; /* paddingより扱いやすいので任意 */
  }
.p-globalNav_link{
    padding: 0;
} /* gapを使うならpaddingは薄くする */
#gNavi li a,
#header_sub li a,
.userMenu__btn,
.header-icon-link{
    padding-top: 0.8vh;
    padding-bottom: 0.8vh;
}
#gNavi{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
}
#gNavi li{
    padding: 0 0 0 1vw;   /* ★ 横だけ残す */
}
#gNavi li a:link{
    text-decoration: none;
    color:black;
    font-weight: bold;
}
#gNavi li a:visited{
    text-decoration: none;
    color: black;
    font-weight: bold;
}
#gNavi li a:hover{
    text-decoration: underline;
    text-underline-offset: 8px;
    color: white;
}

#top-header-main h1,
#top-header-main p{
    display: flex;
    justify-content: center;
}
#main-copywrite{
    padding-top: 4vh;
    padding-bottom: 4vh;
    font-size: 21px;
    font-weight: bold;
    color: black;
}
#topSearch_tabs{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    list-style: none;
}
#uq-topSearch_keyword{
    display: flex;
    justify-content: center;
    align-items: center;
}
#header-logo{
    width: 30vw;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 4vh;
}
#header-logo img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#keyword_search{
    position: relative;
}
#keyword_search a{
    display: block;
    color: white;
    background-color: black;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border-style: solid;
    border-width: 3px;
    border-color: black;
    border-radius: 10px 0px 0px 10px;
    width: 180px;
    height: 5vh;
    line-height: 5vh;
}
#js-prefecture{
    display: block;
    color: black;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border-style: solid;
    border-width: 3px 3px 3px 0px;
    width: 180px;
    height: 5vh;
    line-height: 5vh;
}
#js-prefecture:hover{
    color: white;
    background-color: black;
    border-color: black;
}
/*種類検索*/
#category_search a{
    display: block;
    color: black;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    border-style: solid;
    border-width: 3px 3px 3px 0px;
    border-radius: 0px 10px 10px 0px;
    width: 185px;
    height: 5vh;
    line-height: 5vh;
}

#category_search a:hover{
    color: white;
    background-color: black;
    border-color: black;
}
/*キーワード検索の下の三角形を作成*/
#triangle{
    position: absolute;
    bottom: -12px;
    left: 90px;
    background: black;
    height: calc(tan(60deg) * 15px / 2);
    width: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#uq-topSearch_keyword{
    margin-top: 3.5vh;
}
#c-formText{
    width: 491px;
    height: 8.5vh;
    margin-bottom: 4vh;
    border-style: hidden;
    border-radius: 10px;
}
#kensaku{
    width: 8.5vh;
    height: 8.5vh;
    margin-bottom: 4vh;
}
#text-animation{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8vh;
}
#family-illust{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6vh;
}
#heekun-family{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style: none;
}
#kobunchan img{
    width: auto;
    height: 11vh;
}
.mascot img{
    width: auto;
    height: 13vh;
}
main{
    background-color: #f5f5f5;
}
/* メインタグ要素 */
.main-top{
    height: 10vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    font-size: 14px;
    font-weight: bold;
}
.news-topic{
    color: #02ab2f;
}
.basic{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
    width: 1060px;
}
.big-ad{
    width: 100%;
    height: 40vh;
    background-color: #02ab2f;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 50px;
    font-weight: 700;
}
/* 新着エコ活タイトル */
.new-ecopost-title-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 30px;
}
.ecopost-title{
    font-size: 32px;
}
.ecopost-title-sub{
    margin-left: 20px;
}
.index-ecopost-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 50px;
}
/* エコ活とは */
.howto-ecopost-container{
    width: 300px;
    height: fit-content;
    background-color: white;
    padding: 30px;
    border-radius: 20px;
}
.howto-ecopost-title{
    text-align: center;
    margin: 15px 0;
    color: #02ab2f;
    font-size: 20px;
}
.howto-ecopost-content{
    font-size: 14px;
    line-height: 1.8;
}
/* 月次レポート */
.monthly-report-anounce{
    color: #02ab2f;
    margin: 15px 0 8px 0;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}
.monthly-report{
    color: white;
    background-color: #02ab2f;
    width: 260px;
    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: 10px;
    padding: 10px 0;
}
.monthly-count{
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}
.monthly-count span{
    font-size: 25px;
}
.ranking-title{
    font-size: 14px;
    margin-bottom: 10px;
}
.ranking{
    margin: 5px 0;
    padding: 0;
    font-size: 12px;
    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;
}
/* みんなのエコ活最新5件 */
.ecopost-container{
    width: 610px;
    height: fit-content;
    background-color: white;
    padding: 30px;
    border-radius: 20px;
}
/* ==========================
   エコ活投稿モーダル
========================== */
/* 背景スクロール抑止（任意） */
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: 32px;
  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;
}
/* フッター（今回は“見た目だけ”のボタンも整える） */
.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; /* 横並びに見える感じの微調整（任意） */
}
.show-more{
    color: white;
    background-color: #02ab2f;
    text-decoration: none;
    font-weight: 700;
    justify-content: center;
    display: flex;
    margin: 0 auto;
    width: 180px;
    height: 50px;
    border: none;
    border-radius: 10px;
}
/* ==========================
   トースト警告表示
========================== */
.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: 4px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #444;
}
/* =========================================================
   index.php 用：エコ活編集モーダル最終版
   - mypage と同じ見た目
   - ヘッダー固定
   - 中央だけスクロール
   - 保存ボタン固定
========================================================= */

/* 既存の古い .ecoModal__actions の影響を打ち消す */
#js-ecoMenuModal.is-post-edit .ecoModal__actions{
  display: block;
  justify-content: initial;
  margin-top: 0;
}

/* 編集モーダル本体 */
#js-ecoMenuModal.is-post-edit .ecoMenuModal__dialog{
  width: min(92vw, 720px);
  height: min(86vh, 900px);
  max-height: 86vh;
  min-height: 0;
  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;
}

/* ボディ */
#js-ecoMenuModal.is-post-edit .ecoMenuModal__body{
  padding: 0;
  overflow: hidden;
  background: #fff;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* フォーム全体 */
#js-ecoMenuModal.is-post-edit .eco-edit-post-form{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* スクロールするのはここだけ */
#js-ecoMenuModal.is-post-edit .eco-edit-scroll{
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px 0;
  background: #fff;
  box-sizing: border-box;
}

/* 固定フッター */
#js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions{
  flex: 0 0 auto;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ccc;
  background: #fff;
  position: relative;
  z-index: 20;
  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 .ecoModal__submit{
  display: block;
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0 0 16px 16px;
  background: #02ab2f;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 56px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  flex: none;
}

#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;
}

/* =========================================
   トップページ：お知らせ
========================================= */

/* 上段の最新1件 */
.top-news-line {
  margin: 0;
}

.top-news-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #2b2b2b;
  text-decoration: none;
  line-height: 1.8;
}

.top-news-link:hover .news-topic {
  text-decoration: underline;
}

.top-news-date {
  color: black;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.news-topic {
  color: #02ab2f;
  font-weight: 600;
}

/* 下段一覧の外枠 */
.top-announcements-box {
  margin-top: 0;
  margin-bottom: 50px;
  background: white;
  border-radius: 28px;
  padding: 30px 34px;
}

/* スクロール枠 */
.top-announcements-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 10px;
}

/* スクロールバー（対応ブラウザ用） */
.top-announcements-scroll::-webkit-scrollbar {
  width: 8px;
}

.top-announcements-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.top-announcements-scroll::-webkit-scrollbar-thumb {
  background: #1d5fd0;
  border-radius: 999px;
}

/* 各行 */
.top-announcement-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 26px;
  align-items: start;
  padding: 18px 0;
  color: #2b2b2b;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.top-announcement-row:last-child {
  border-bottom: none;
}

.top-announcement-row:hover .top-announcement-title {
  text-decoration: underline;
}

.top-announcement-date {
  color: #8d8d8d;
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.top-announcement-title {
  color: #2c2c2c;
  font-size: 19px;
  line-height: 1.7;
  font-weight: 500;
}

/* お知らせが無い場合 */
.top-announcements-empty {
  margin: 0;
  color: #7b7b7b;
  font-size: 18px;
  line-height: 1.8;
}

.donations a:visited{
  color: black;
}

/* =========================================
   index.php スマホ最終版
========================================= */
@media screen and (max-width: 768px){

  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body{
    touch-action: pan-y;
  }

  /* 横スクロール・カクつき対策 */
  *{
    box-sizing: border-box;
  }

  #top-header-content{
    width: 100%;
    height: 95vh;
    min-height: 95vh;
    position: relative;
    overflow: visible;
    padding: 0;
  }

  #top-gNavi{
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 0;
    min-height: 60px;
  }

  /* ハンバーガー */
  .sp-menu-toggle{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 10001;
  }

  .sp-menu-toggle span{
    display: block;
    width: 26px;
    height: 3px;
    background: #111;
    border-radius: 999px;
    transition: transform .25s ease, opacity .25s ease;
  }

  .sp-menu-toggle.is-open span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .sp-menu-toggle.is-open span:nth-child(2){
    opacity: 0;
  }
  .sp-menu-toggle.is-open span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  /* グロナビ開閉 */
  #gNavi{
    display: none;
    position: absolute;
    top: 72px;
    left: 16px;
    right: 16px;
    z-index: 10000;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.18);
  }

  #gNavi.is-open{
    display: flex;
  }

  #gNavi li{
    width: 100%;
    padding: 0;
  }

  #gNavi li + li{
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  #gNavi li a{
    display: block;
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    box-sizing: border-box;
  }

  #gNavi li a:hover{
    color: black;
    text-decoration: none;
    background: rgba(2,171,47,0.08);
  }

  /* 右上アイコン */
  #header_sub{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 0;
  }

  #header_sub > li{
    display: flex;
    align-items: center;
    height: auto;
    padding: 0;
  }

  #header_sub > li > a{
    height: auto;
    line-height: 1;
    padding: 0;
  }

  .header-icon-link{
    width: 42px;
    height: 42px;
  }

  .header-icon-link svg{
    width: 30px;
    height: 30px;
  }

  .userMenu__btn{
    width: 42px;
    height: 42px;
  }

  .userMenu__icon_img{
    width: 34px;
    height: 34px;
  }

  .userMenu__panel{
    top: 48px;
    right: 0;
    min-width: 190px;
  }

  /* コピー */
  #main-copywrite{
    display: block;
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 26px 0 16px;
    font-size: 10px;
    line-height: 1.45;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }

  /* ロゴ */
  #header-logo{
    width: min(82vw, 520px);
    margin: 0 auto 18px;
  }

  /* 検索エリア */
  #topSearch{
    width: calc(100% - 24px);
    margin: 0 auto;
  }

  #topSearch_tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
  }

  #topSearch_tabs li{
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  #keyword_search{
    position: relative;
  }

  #keyword_search a,
  #js-prefecture,
  #category_search a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 56px;
    padding: 0 8px;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    box-sizing: border-box;
  }

  #keyword_search a{
    border-radius: 14px 0 0 14px;
    border-width: 3px;
  }

  #js-prefecture{
    border-width: 3px 3px 3px 0;
  }

  #category_search a{
    border-width: 3px 3px 3px 0;
    border-radius: 0 14px 14px 0;
  }

  #triangle{
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
  }

  /* 検索ボックス：タブと横幅を完全一致 */
  #uq-topSearch_keyword{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    width: 100%;
    margin: 20px 0 0;
    padding: 0;
    align-items: stretch;
    gap: 0;
  }

  #c-formText{
    width: 100%;
    min-width: 0;
    height: 60px;
    margin: 0;
    padding: 0 16px;
    border: none;
    border-radius: 14px 0 0 14px;
    font-size: 16px;
    box-sizing: border-box;
  }

  #kensaku{
    display: block;
    width: 64px;
    height: 60px;
    margin: 0;
    border-radius: 0 14px 14px 0;
    object-fit: cover;
  }

  /* テキストアニメ */
  #text-animation{
    position: static;
    left: auto;
    transform: none;
    width: calc(100% - 32px);
    margin: 20px auto 0;
    text-align: center;
  }

  #text-animation h5{
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
  }

  /* マスコットは境界線上 */
  #family-illust{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
    width: auto;
    z-index: 2;
  }

  #heekun-family{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  #kobunchan img{
    height: 68px;
    width: auto;
  }

  .mascot img{
    height: 78px;
    width: auto;
  }

  /* main */
  main{
    width: 100%;
    overflow-x: hidden;
  }

  .main-top{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: auto;
    gap: 10px;
    padding: 22px 16px 16px;
    font-size: 13px;
    line-height: 1.6;
  }

  .basic{
    width: calc(100% - 24px);
    margin: 20px auto 0;
  }

  .top-news-line{
    margin-top: 15px;
  }

  .donations{
    margin-top: 20px;
  }
  .donations a{
    color: black;
  }

  .new-ecopost-title-flex{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 18px;
  }

  .ecopost-title{
    font-size: 28px;
  }

  .ecopost-title-sub{
    margin-left: 0;
    font-size: 14px;
  }

  .index-ecopost-flex{
    display: block;
    margin-bottom: 32px;
  }

  .howto-ecopost-container{
    display: none;
  }

  .ecopost-container{
    width: 100%;
    padding: 18px 14px;
    border-radius: 16px;
  }
}

@media screen and (min-width: 769px){
  .sp-menu-toggle{
    display: none;
  }
}

/* =========================================================
   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;
  }
}