@charset "utf-8";
html{
    /* スクロールバーのスペースを常に確保する */
    scrollbar-gutter: stable;
}
body{
    background-color: #f5f5f5;
}
/* モーダル表示中は背面スクロール停止 */
body.is-modal-open{
  overflow: hidden;
}

a:link{
    color: black;
}
a:visited{
    color: black;
}

.p-globalNav_link img{
    height: 7.5vh;
}
.p-globalNav_link{
    padding: 1.25vh 1.5vw 0 0;
}
.p-globalNav_link a:link{
    text-decoration: none;
    color:black;
    font-weight: bold;
}
.p-globalNav_link a:visited{
    text-decoration: none;
    color:black;
    font-weight: bold;
}
.p-globalNav_link a:hover{
    text-decoration: underline;
    text-decoration-color: #02ab2f;
    text-underline-offset: 8px;
    color:black;
    font-weight: bold;
}
/* メインコンテンツ */
/* タイトル部分 */
#main-contents{
    background-color: white;
    width: 900px;
    display: flex;
    flex-direction: column;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 50px 80px 50px 80px;
    border-radius: 30px;
}
.point-etcetera{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.weight-bold{
    font-weight: bold;
    color: black;
}
.error-icon {
    height: 20px;
    width: 20px;
    background-color: red; /* 背景色を赤に */
    border-radius: 50%; /* 角丸を50%にして円形に */
    display: inline-block;
    color: white; /* 文字色を白に */
    text-align: center;
    line-height: 20px; /* アイコンを垂直方向に中央揃え */
    font-weight: bold; /* 文字を太字に */
    font-size: 14px; /* フォントサイズ調整 */
}
.target-point{
    font-size: 16px;
    padding: 4px 8px;
    border: 1px solid #222;
    border-radius: 6px;
    width: fit-content;
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    margin: 0 5px 5px 0;
}
/* PC：横一列のまま表示 */
.fix-etcetera{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
}

.fix-etcetera__toggle{
  display: none;
}

.fix-etcetera__menu{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  position: static;
  width: auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.fix-etcetera .update-history{
  margin-right: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.fix-etcetera .info-fix{
  margin-left: 0;
  margin-right: 10px;
}

.fix-etcetera .info-fix:last-child{
  margin-right: 0;
}

.update-history{
    font-size: 12px;
    margin-right: 12px;
}
.info-fix{
    font-size: 12px;
    border: 1px solid #888;
    border-radius: 6px;
    padding-left: 7px;
    padding-right: 7px;
    width: fit-content;
    display: inline-block;
    text-decoration: none;
}
.spot-title{
    height: 32px;
    line-height: 32px; /* ←ここを0ではなく高さに合わせると自然 */
    margin-bottom: 12px; 
    margin-top: 10px;
}
.location{
    color: #888;
    height: 16px;
    line-height: 16px;
    margin: 0;
}
.SNS-etcetera{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.SNS-share{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;            /* margin-right を使わずgapで揃える */
    align-items: center;
}
/* ===========================
   SNSボタン群：統一デザイン
   高さ30px / 縦中央 / 横幅固定（同じ幅）
   =========================== */
  
/* 共通（pでもbuttonでも同じ箱にする） */
.X-post,
.facebook-share,
.good,
.eco-post{
    height: 30px;
    width: fit-content;               /* ★ 横幅固定（ここを好みで調整） */
    display: inline-flex;
    align-items: center;         /* 縦中央 */
    justify-content: center;     /* ★ 横中央（幅固定なので中央揃えが綺麗） */
    gap: 6px;                    /* アイコンと文字の間 */
    box-sizing: border-box;      /* border込みで30px/140px */
    padding: 0 10px;             /* 内側余白（左右のみ） */
    line-height: 1;
    margin: 0;                   /* pのデフォマージン殺す */
    border-radius: 6px;
    font-weight: bold !important;
    font-size: 14px !important;
    white-space: nowrap;
}
/* 個別の見た目（あなたの元デザイン踏襲） */
.X-post,
.facebook-share{
    border: 1px solid #d3d1d1;
    color: inherit;
    background: transparent;
    text-decoration: none;
}
.good{
    border: 2px solid #02ab2f;
    color: #02ab2f;
    background: transparent;
}
.eco-post{
    border: 1px solid #000;
    color: #fff;
    background: #000;
    cursor: pointer;
}
/* button化で崩れるのを完全に防止 */
button.good{
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    border-radius: 6px;
}
/* いいね状態 */
button.good.is-liked{
    background: rgba(2, 171, 47, 0.10);
}
/* hover / focus / active / disabled */
button.good:hover{ opacity: 0.9; }
button.good:focus-visible{
    outline: 2px solid rgba(2, 171, 47, 0.35);
    outline-offset: 2px;
}
button.good:active{ transform: translateY(1px); }
button.good:disabled{
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
/* Facebookロゴの縦ズレ対策 */
.facebook-share img{
    width: 16px;
    height: 16px;
    display: block;
} 
/* font-awesomeアイコンの縦ズレ対策（保険） */
.SNS-share i{
    line-height: 1;
    display: inline-block;
}
  
/* 資源物情報項目 */
.tab_spots-area{
    padding-left: 0;
    list-style-type: none;
    display: flex;
    margin: 0 0 10px 0;
    border-bottom: 1px #f1f1f1 solid;
}
.tab_spots{
    width: fit-content;
    font-weight: bold;
    cursor: pointer;
    padding: 15px 20px 15px 0;
}
.tab_spots.active{
    color: #02ab2f;
    text-decoration: underline;
    text-underline-offset: 18px;
    cursor: pointer;
}
.panel_spots{
    display: none;   /* デフォルト非表示 */
}
.panel_spots.active{
    display: block;  /* activeだけ表示 */
}
/*休業・短縮営業・回収終了情報*/
.extra-infomation{
    border: 3px red solid;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}
.extra-infomation-title{
    color: red;
    font-size: 20px;
    font-weight: bold;
}
.extra-infomation-content{
    display: block;
    margin-top: 10px;
}

/* 回収スポット資源物情報 */
.basic_title{
    margin-top: 10px;
    margin-bottom: 10px;
}
.resource_category{
    color: white;
    background-color: #888;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
}
.resource_flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
.resource_flex::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;              /* 親の中央に配置 */
    width: 1px;             /* 線の太さ */
    background: #f1f1f1;    /* 線の色 */
}
/* 左カラム（奇数番目）のみ、上に左半分の線 */
.resource_info:nth-child(n+3):nth-child(odd)::before{
    content: "";
    display: block;
    width: 75%;
    border-top: 3px double black;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
/* 右カラム（偶数番目）のみ、上に右半分の線 */
.resource_info:nth-child(n+3):nth-child(even)::before{
    content: "";
    display: block;
    width: 75%;
    border-top: 3px double black;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px){
    .resource_flex::before {
      display: none;
    }
}
.resource_info{
    width: 48%;
    margin-bottom: 20px;
    box-sizing: border-box;
    text-align: center;
}
.resource_index{
    color: #02ab2f;
    font-size: 20px;
    font-weight: bold;
}
.mini_index{
    font-size: 15px;
    font-weight: bold;
}
.resource_main{
    color: red;
    font-size: 35px;
    font-weight: bold;
}
.resource_picture img{
    aspect-ratio: 4 / 3; /* 元画像の縦横比を維持 */
    width: 50%;
    height: auto; /* 自動で高さを調整 */
    display: block; /* インライン要素の隙間を防ぐ */
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.collect_method{
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.point_grant{
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.deco_title{
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.deco_detail{
    font-size: 15px;
    text-align: left;
    margin-top: 5px;
}
.div_decoration{
    border-style: solid;
    border-color: #888;
    border-radius: 12px;
    padding: 4px 8px 8px 8px;
    margin-top: 10px;
}
.resource_repro{
    font-size: 25px;
    font-weight: bold;
    color: blue;
}
.after_repro{
    margin-top: 15px;
    padding-top: 10px;
}
.left-justified{
    text-align: left;
    width: fit-content;
    margin: 0 auto;         /* 要素自体を中央に配置 */
}
/* 768px以下（スマホなど） */
@media screen and (max-width: 768px){
    .left-justified {
      width: 100%;          /* 幅いっぱい */
      margin: 0;            /* 中央寄せ解除 */
    }
}
/* ポイント情報など */
.spot-table{
    display: table;
    border-collapse: collapse;
    width: 900px;
    margin-bottom: 30px;
    margin-top: -20px;
}

.spot-table-th {
    width: 250px;
    border-bottom: 1px #f1f1f1 solid;
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
    padding: 20px 0;
}

.spot-table-th img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    background-color: white;
    margin-right: 10px;
}

.spot-table-mark {
    width: 40px;
    height: 40px;
    padding: 20px 30px;
    border-bottom: 1px #f1f1f1 solid;
    box-sizing: border-box;
    text-align: left;
    vertical-align: middle;
}

.spot-table-mark img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    border: 10px #f1f1f1 solid;
    background-color: #f1f1f1;
}

.spot-table-note {
    padding: 20px 0;
    width: 530px;
    border-bottom: 1px #f1f1f1 solid;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}

/* 基本情報 */
h2.headline {
    text-align: left !important;
}
.headline{
    margin: 0 0 25px;
}
.headline:before{
    background: #02ab2f;
    display: block;
    content: "";
    width: 45px;
    height: 3px;
    margin-bottom: 18px;
}
.basic-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
.spot-main-image{
    width: 48%;
    box-sizing: border-box;
    text-align: left;
}
.detail-info{
    width: 48%;
    box-sizing: border-box;
    text-align: left;
}
.spot-main-image img{
    aspect-ratio: 4 / 3; /* 元画像の縦横比を維持 */
    width: 100%;
    height: auto; /* 自動で高さを調整 */
    display: block; /* インライン要素の隙間を防ぐ */
    margin-bottom: 40px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.detailSpot__googlemap{
    width: 100%;
    height: 50vh;
}
.detailSpot_map a{
    color: black;
    font-size: 14px;
}
.detailSpot_map a:hover{
    color: #888;
    text-decoration: none;
    font-size: 14px;
}
.c-table {
    width: 100%;             /* 親要素の幅に合わせる */
    table-layout: fixed;     /* 幅計算を固定にして折り返しを効かせる */
    border-spacing: 0;
}
.c-table_th, .c-table_td {
    font-size: 16px;
    padding: 20px 5px 20px 0;
    border-top: 1px solid #f1f1f1;
    white-space: normal;       /* 折り返しを許可 */
    word-break: break-word;    /* 単語が長すぎる場合も折り返す */
    overflow-wrap: break-word;
}
.c-table_th {
    width: 30%;                /* 左列の幅をある程度固定 */
    line-height: 1.4;          /* 行間 */
    /* max-height: calc(1.4em * 2); 2行分の高さまで */
    /* overflow: hidden;          はみ出した部分を非表示 */
} 
.c-table_td {
    width: 70%;
}
.c-table_td a{
    color: black;
}
.c-table_td a:hover{
    color: #888;
    text-decoration: none;
}
.allow img{
    width: 50px;
    height: 40px;
    margin-top: 10px;
    margin-bottom: -20px;
}
/* 写真ギャラリー */
.photo-gallery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 20px;
}
.album{
    width: calc(33% - 10px);
    height: auto;
    margin: 0 12px 10px 0;
    padding: 0;
}
.album img{
    aspect-ratio: 4 / 3; /* 元画像の縦横比を維持 */
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
.pic-caption{
    margin: 0;
    font-size: 12px;
}

/* 更新履歴モーダル */
.editLogsModal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
}
.editLogsModal.is-open{
    display:block;
}
.editLogsModal__backdrop{
    position:absolute; inset:0; 
    background:rgba(0,0,0,.45);
}
.editLogsModal__panel {
    position:relative;
    width:min(560px, calc(100% - 32px));
    margin:80px auto 0;
    background:#fff;
    border-radius:12px;
    padding:18px 18px 14px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.editLogsModal__close {
    position:absolute; top:10px; right:12px;
    border:0; background:transparent; font-size:22px; cursor:pointer;
    line-height:1;
}
.editLogsModal__title{
    margin:0 0 10px;
    font-size:16px;
}
.editLogsModal__list{
    list-style:none;
    margin:0;
    padding:0;
}
.editLogsModal__item{
    padding:10px 0;
    border-top:1px solid #eee;
}
.editLogsModal__item:first-child{
    border-top:0;
}
.editLogsModal__dt{
    display:block;
    font-size:12px;
    opacity:.8;
    margin-bottom:2px;
}
.editLogsModal__action{
    font-weight:700;
    margin-right:8px;
}
.editLogsModal__empty{
    margin:0;
    padding:10px 0;
}
.editLogsModal__userLink{
    color: inherit;
    text-decoration: underline;
}
.editLogsModal__userLink:hover{
    text-decoration: none;
}
.update-history__userLink{
    color: inherit;
    text-decoration: underline;
}
.update-history__userLink:hover{
    text-decoration: none;
}
/* 近隣スポット一覧表示 */
.nearby-spots{
    width: 1060px;
    margin: 0 auto 60px;
}
.nearby-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.nearby-card{
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    position: relative;
    display: block;          /* aタグをブロック化 */
    color: inherit;
    text-decoration: none;
}
.nearby-card:hover{
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transform: translateY(-1px);
}  
.nearby-image img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}
.no-image {
    height: 140px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}
.nearby-info {
    padding: 10px;
    font-size: 14px;
    padding-bottom: 42px;    /* eco固定分の余白（調整OK） */
}
.nearby-info .name {
    font-size: 15px;
    margin: 5px 0;
}
.nearby-info .distance {
    font-size: 10px;
    color: red;
    margin: 0;
}
.nearby-info .address {
    font-size: 12px;
    color: #888;
    margin: 0;
}
.nearby-info .eco {
    font-size: 12px;
    margin: 0;
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;            /* ★下から10px固定 */
}
.p-metal_tag{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #deb6fa;
    border-radius: 999px;
    color: #6502ab;
    font-size: 12px;
    font-weight: 700;
    margin: 2px 0;
    white-space: nowrap;   /* ★ 改行させない */
}
.p-paper_tag{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #f7bfb0;
    border-radius: 999px;
    color: #f53805;
    font-size: 12px;
    font-weight: 700;
    margin: 2px 0;
    white-space: nowrap;   /* ★ 改行させない */
}
.p-plastic_tag{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #5c5c5a;
    border-radius: 999px;
    color: #fcfcfa;
    font-size: 12px;
    font-weight: 700;
    margin: 2px 0;
    white-space: nowrap;   /* ★ 改行させない */
}
.p-glass_tag{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #f7c08b;
    border-radius: 999px;
    color: #6e3701;
    font-size: 12px;
    font-weight: 700;
    margin: 2px 0;
    white-space: nowrap;   /* ★ 改行させない */
}
.p-nature_tag{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #b9fac7;
    border-radius: 999px;
    color: #016917;
    font-size: 12px;
    font-weight: 700;
    margin: 2px 0;
    white-space: nowrap;   /* ★ 改行させない */
}
.p-appliance_tag{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #cfccfc;
    border-radius: 999px;
    color: #0e03ab;
    font-size: 12px;
    font-weight: 700;
    margin: 2px 0;
    white-space: nowrap;   /* ★ 改行させない */
}
.nearby-resources{
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
}
.nearby-resource-row{
    display: flex;
    align-items: center;   /* タグと文字を中央揃え */
    gap: 6px;
    margin-top: 4px;
}
.nearby-resource-name{
    font-size: 12px;
    color: #333;
    line-height: 1.4;
}
.nearby-resource-cat{
    min-width: 88px;     /* カテゴリ列の幅（好みで調整） */
    font-weight: 600;
}
.nearby-resource-empty{
    margin-top: 6px;
    color: #888;
    font-size: 12px;
}
.eco_activity_count{
    color: #02ab2f;
    font-weight: bold;
}

/* ==========================
   エコ活投稿モーダル
   ecoMenuModal / report modal と統一感を持たせる
========================== */
body.is-modal-open {
  overflow: hidden;
}

.ecoModal {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: none;
}

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

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

/* モーダル本体 */
.ecoModal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;

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

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

  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ヘッダー */
.ecoModal__head {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 32px;
  padding: 10px 56px;
  border-bottom: 1px solid #ececec;
  background: #fff;
  flex: 0 0 auto;
}

.ecoModal__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 閉じるボタン */
.ecoModal__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;
}

.ecoModal__close:hover {
  opacity: 0.7;
}

/* フォーム全体 */
.ecoModal__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* 中身だけスクロール */
.ecoModal__bodyScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 20px;
  background: #fff;
}

/* フィールド共通 */
.ecoModal__field {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fcfcfc;
}

.ecoModal__label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  color: #222;
}

.ecoModal__field label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #222;
}

.ecoModal__field input[type="date"],
.ecoModal__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

.ecoModal__field textarea {
  resize: vertical;
  min-height: 120px;
}

/* コメント欄 */
.ecoModal_comment {
  border-top: none;
  padding-top: 14px;
}

.ecoModal_comment label {
  margin-top: 0;
}

/* 資源物リスト */
.ecoModal__resources {
  margin-top: 4px;
}

.ecoModal__resGroup + .ecoModal__resGroup {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ececec;
}

.ecoModal__resCat {
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
}

.ecoModal__resList {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.ecoModal__resItem {
  position: relative;
  display: flex;
  align-items: center;
}

.ecoModal__resItem input[type="checkbox"] + label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-left: 2.1em;
  line-height: 1.25;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 500;
}

.ecoModal__resItem input[type="checkbox"] + label:before {
  top: 50%;
  transform: translateY(-50%);
}

.ecoModal__resItem input[type="checkbox"] + label:after {
  top: 50%;
  transform: translateY(-50%) scale(0) rotate(45deg);
}

.ecoModal__resItem input[type="checkbox"]:checked + label:after {
  transform: translateY(-50%) scale(1) rotate(0);
}

/* フッター */
.ecoModal__actions {
  padding: 0;
  border-top: 1px solid #ccc;
  background: #fff;
}

.ecoModal__submit {
  display: block;
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 0 0 12px 12px;
  background: #02ab2f;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.ecoModal__submit:hover {
  opacity: 0.95;
}

/* 補助文 */
.ecoModal__field p {
  line-height: 1.7;
}

/* スマホ */
@media screen and (max-width: 767px) {
  .ecoModal__dialog {
    width: min(94vw, 720px);
    max-height: 90vh;
    border-radius: 14px;
  }

  .ecoModal__head {
    min-height: 58px;
    padding: 0 48px 0 16px;
  }

  .ecoModal__head h3 {
    font-size: 16px;
  }

  .ecoModal__bodyScroll {
    padding: 14px 14px 16px;
  }

  .ecoModal__field {
    padding: 12px 12px;
    margin-bottom: 14px;
  }

  .ecoModal__actions {
    padding: 0;
    border-top: 1px solid #ccc;
    background: #02ab2f;
  }

  .ecoModal__submit {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 16px;
    border-radius: 0 0 14px 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-resources{
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #444;
}
.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);
  max-height: 86vh;
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  padding: 14px;
  overflow: auto;
  box-sizing: border-box;
}
.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-help{
  margin:6px 0 0;
  font-size:12px;
  color:#666;
}
.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; /* 暗幕は下 */
}
/* 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;
}

/* ==========================
   投稿編集モード時の 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: 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 .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;
}

/* =========================================================
   リプライ編集モーダル（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;
}

/* スマホ：エコ活投稿・編集モーダル調整 */
@media screen and (max-width: 767px) {

  /* ==========================
     投稿モーダル本体
  ========================== */
  .ecoModal__dialog {
    width: min(94vw, 720px);
    max-height: 90vh;
    border-radius: 14px;
  }

  .ecoModal__head {
    min-height: 58px;
    padding: 0 48px 0 16px;
  }

  .ecoModal__head h3 {
    font-size: 16px;
  }

  .ecoModal__bodyScroll {
    padding: 14px 14px 16px;
  }

  .ecoModal__field {
    padding: 12px 12px;
    margin-bottom: 14px;
    min-width: 0;
    box-sizing: border-box;
  }

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

  .ecoModal__field input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px; /* iOSの勝手なズーム対策も兼ねる */
    line-height: 1.4;
  }

  .ecoModal__actions {
    padding: 12px 14px 14px;
  }

  .ecoModal__submit {
    min-height: 48px;
    font-size: 15px;
  }

  /* ==========================
     ② 投稿モーダル画像エリアを1カラム化
     ※ .ecoModal__field.ecoModal_pic の詳細度に勝たせる
  ========================== */
  .ecoModal__field.ecoModal_pic,
  .ecoModal_pic {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 12px;
  }

  .ecoModal__field.ecoModal_pic > .ecoModal__field,
  .ecoModal_pic > .ecoModal__field,
  .eco-edit-image-slot {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }

  .drop-area-ecopost,
  .eco-edit-drop-area {
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    min-height: 220px;
    padding: 18px;
  }

  .drop-area-ecopost label,
  .eco-edit-drop-label {
    width: 100%;
    min-height: 180px;
  }

  .pic_copywrite_ecopost {
    font-size: 13px;
    line-height: 1.7;
  }

  .drop-area-ecopost label svg,
  .eco-edit-drop-icon {
    width: 52px;
  }

  .eco-image-preview-wrap,
  .eco-edit-image-preview-wrap {
    max-width: 78%;
  }

  .eco-image-preview-wrap img,
  .eco-edit-image-preview-wrap img,
  .drop-area-ecopost label .preview-area-ecopost img {
    max-height: 180px;
  }


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

  #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_pic,
  #js-ecoMenuModal.is-post-edit .ecoModal__field.ecoModal_pic {
    flex-direction: column;
    gap: 16px;
  }

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

  #js-ecoMenuModal.is-post-edit .ecoModal__actions.eco-edit-actions .ecoModal__submit {
    min-height: 48px;
    font-size: 15px;
  }
}

/* =========================================================
   view-spot.php responsive override rev3
   ※ 既存のスマホ用 @media を丸ごと差し替え
   ※ 優先事項：画面外にはみ出さない
========================================================= */
@media screen and (max-width: 767px){

  html, body{
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after{
    box-sizing: border-box;
  }

  body{
    background-color: #f5f5f5;
  }

  /* ---------------------------------
     外側ラッパーのPC固定幅を無効化
  --------------------------------- */
  .basic_view_spot,
  .basic_view_confirm{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  body,
  .basic_view_spot,
  .basic_view_confirm,
  #main-contents{
    max-width: 100vw;
  }
  /* ---------------------------------
     全体コンテナ
  --------------------------------- */
  #main-contents{
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    margin: 12px auto 18px;
    padding: 16px 10px 20px;
    border-radius: 18px;
    overflow-x: hidden;
  }

  #main-contents img,
  #main-contents iframe,
  #main-contents table,
  #main-contents video{
    max-width: 100%;
  }

  .headline{
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.45;
  }

  .headline:before{
    width: 34px;
    height: 3px;
    margin-bottom: 10px;
  }

  .spot-title{
    height: auto;
    line-height: 1.35;
    margin: 8px 0 10px;
    font-size: 22px;
    word-break: break-word;
  }

  .location{
    height: auto;
    line-height: 1.55;
    font-size: 13px;
    margin: 0;
    word-break: break-word;
  }

  .point-etcetera{
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
  }

  .target-point{
    max-width: 100%;
    font-size: 12px;
    line-height: 1.45;
    padding: 5px 8px;
    margin: 0;
    white-space: normal;
    word-break: break-word;
  }

  .weight-bold{
    word-break: break-word;
  }

 /* スマホ：ミートボール + モーダル状メニュー */
  .fix-etcetera{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 36px;
    margin: 0 0 10px;
  }

  .fix-etcetera__toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #cfcfcf;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 31;
  }

  .fix-etcetera__menu{
    display: none !important;
    position: fixed;
    top: 88px;
    right: 12px;
    width: min(260px, calc(100vw - 24px));
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
    z-index: 10040;
  }

  .fix-etcetera.is-open .fix-etcetera__menu{
    display: flex !important;
  }

  .fix-etcetera .update-history,
  .fix-etcetera .info-fix{
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
  }

  .fix-etcetera .update-history{
    display: block;
  }

  .fix-etcetera .info-fix{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    margin: 0;
  }


  /* ---------------------------------
     SNS / エコだね / エコ活投稿
  --------------------------------- */
  .SNS-etcetera{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
  }

  .SNS-share{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .X-post,
  .facebook-share,
  .good,
  .eco-post{
    max-width: 100%;
    min-height: 38px;
    height: auto;
    padding: 8px 10px;
    font-size: 13px !important;
    border-radius: 8px;
  }

  /* ---------------------------------
     タブ
  --------------------------------- */
  .tab_spots-area{
    overflow-x: auto;
    white-space: nowrap;
    margin: 6px 0 14px;
    padding: 0 0 2px;
    scrollbar-width: none;
  }

  .tab_spots-area::-webkit-scrollbar{
    display: none;
  }

  .tab_spots{
    display: inline-block;
    padding: 12px 14px 12px 0;
    font-size: 15px;
  }

  .tab_spots.active{
    text-underline-offset: 10px;
  }

  /* ---------------------------------
     資源物情報
  --------------------------------- */
  .basic_title{
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.45;
  }

  .resource_category{
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 8px;
    overflow: hidden;
    word-break: break-word;
  }

  .resource_flex{
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .resource_flex::before{
    display: none;
  }

  .resource_info{
    width: 100%;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 0;
    overflow: hidden;
  }

  .resource_info:nth-child(n+2)::before{
    content: "";
    display: block;
    width: 100%;
    border-top: 1px solid #ececec;
    margin: 0 0 14px;
  }

  .resource_index{
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
  }

  .mini_index{
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
  }

  .resource_main{
    font-size: 20px;
    line-height: 1.4;
    word-break: break-word;
  }

  .resource_picture{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .resource_picture img{
    width: min(68vw, 220px);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px auto;
  }

  .collect_method,
  .point_grant{
    font-size: 13px;
    line-height: 1.7;
    margin: 8px 0;
    word-break: break-word;
  }

  .deco_title{
    font-size: 13px;
    line-height: 1.5;
    text-underline-offset: 4px;
  }

  .deco_detail{
    font-size: 13px;
    line-height: 1.65;
    margin-top: 6px;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .div_decoration{
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    padding: 8px 10px 10px;
    border-radius: 10px;
    overflow: hidden;
  }

  .resource_repro{
    font-size: 18px;
    line-height: 1.4;
    word-break: break-word;
  }

  .left-justified{
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: center;
  }

  /* ---------------------------------
     ② 特記事項：横一列を維持しつつ収める
  --------------------------------- */
  .spot-table{
    display: table;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 0 18px;
  }

  .spot-table tbody{
    display: table-row-group;
  }

  .spot-table tr{
    display: table-row;
  }

  .spot-table-th,
  .spot-table-mark,
  .spot-table-note{
    display: table-cell;
    vertical-align: middle;
    border-bottom: 1px solid #f1f1f1;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .spot-table-th{
    width: 34%;
    padding-left: 0;
    padding-right: 8px;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    word-break: keep-all;
  }

  .spot-table-mark{
    width: 42px;
    padding-left: 0;
    padding-right: 6px;
    text-align: center;
  }

  .spot-table-note{
    width: auto;
    padding-left: 0;
    padding-right: 0;
    font-size: 12px;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .spot-table-th img,
  .spot-table-mark img{
    width: 24px;
    height: 24px;
    max-width: 24px;
  }

  .spot-table-mark img{
    border-width: 5px;
  }

  /* ---------------------------------
     基本情報
  --------------------------------- */
  .basic-flex{
    display: block;
    width: 100%;
  }

  .spot-main-image,
  .detail-info{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .spot-main-image{
    margin-bottom: 14px;
  }

  /* ③ メイン画像 */
  .spot-main-image > a,
  .spot-main-image .detailSpot_map,
  .spot-main-image .detailSpot_map a{
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .spot-main-image img{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 0 12px;
    border-radius: 12px;
    object-fit: cover;
  }

  .detailSpot__googlemap{
    width: 100%;
    max-width: 100%;
    height: 30vh;
    min-height: 200px;
    border-radius: 12px;
    overflow: hidden;
  }

  .detailSpot_map a{
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
  }

  .c-table{
    display: block;
    width: 100%;
    max-width: 100%;
    table-layout: auto;
  }

  .c-table tbody{
    display: block;
    width: 100%;
  }

  .c-table tr{
    display: block;
    width: 100%;
    padding: 12px 0;
    border-top: 1px solid #f1f1f1;
  }

  .c-table tr:first-child{
    border-top: none;
  }

  .c-table_th,
  .c-table_td{
    display: block;
    width: 100%;
    padding: 0;
    border-top: none;
    font-size: 12px;
    line-height: 1.65;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .c-table_th{
    margin-bottom: 5px;
    font-weight: 700;
  }

  .allow img{
    width: 38px;
    height: auto;
    margin: 8px 0 0;
  }

  /* ---------------------------------
     ③ 写真ギャラリー
  --------------------------------- */
  .photo-gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .album{
    width: calc(50% - 4px);
    max-width: calc(50% - 4px);
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .album a{
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .album img{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
  }

  .pic-caption{
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.45;
    word-break: break-word;
  }

  /* ---------------------------------
     ④ 近隣スポット：2カラム×最大4行
  --------------------------------- */
  .nearby-title{
    font-size: 18px;
    margin-left: 10px;
  }

  .nearby-spots{
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    margin: 0 auto 24px;
  }

  .nearby-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .nearby-card{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
  }

  .nearby-image img,
  .no-image{
    width: 100%;
    max-width: 100%;
    height: 110px;
    object-fit: cover;
  }

  .nearby-info{
    padding: 8px;
    padding-bottom: 8px;
    font-size: 12px;
    min-width: 0;
  }

  .nearby-info .name{
    font-size: 13px;
    line-height: 1.45;
    margin: 4px 0;
    word-break: break-word;
  }

  .nearby-info .distance{
    font-size: 10px;
  }

  .nearby-info .address{
    font-size: 11px;
    line-height: 1.45;
    word-break: break-word;
  }

  .nearby-info .eco{
    position: static;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
  }

  .nearby-resources{
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
  }

  .nearby-resource-row{
    display: block;
    margin-top: 4px;
  }

  .nearby-resource-cat{
    display: inline-block;
    min-width: 0;
    margin-bottom: 2px;
  }

  .nearby-resource-name{
    display: block;
    font-size: 11px;
    line-height: 1.45;
    word-break: break-word;
  }

  .nearby-resource-empty{
    font-size: 11px;
  }

  .p-metal_tag,
  .p-paper_tag,
  .p-plastic_tag,
  .p-glass_tag,
  .p-nature_tag,
  .p-appliance_tag{
    font-size: 10px;
    line-height: 1.2;
    padding: 3px 6px;
    white-space: nowrap;
  }

  /* ---------------------------------
     更新履歴モーダル
  --------------------------------- */
  .editLogsModal__panel{
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    margin: 82px auto 0;
    padding: 14px 12px 12px;
    border-radius: 14px;
  }

  .editLogsModal__title{
    font-size: 14px;
    padding-right: 26px;
  }

  .editLogsModal__close{
    top: 8px;
    right: 10px;
    font-size: 24px;
  }
}

@media screen and (max-width: 520px){

  #main-contents{
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    padding: 14px 8px 18px;
    border-radius: 16px;
  }

  .spot-title{
    font-size: 20px;
  }

  .headline{
    font-size: 17px;
  }

  .resource_picture img{
    width: min(72vw, 200px);
  }

  .nearby-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .nearby-image img,
  .no-image{
    height: 96px;
  }

  .nearby-info{
    padding: 7px;
  }

  .nearby-info .name{
    font-size: 12px;
  }

  .nearby-info .address,
  .nearby-info .eco,
  .nearby-resource-name,
  .nearby-resource-empty{
    font-size: 10px;
  }
}

/* スマホでも写真ギャラリーは2カラム維持 */
@media screen and (max-width: 767px){
  .photo-gallery{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .album{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
  }

  .album a{
    display: block;
    width: 100%;
  }

  .album img{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
  }
}

@media screen and (max-width: 520px){
  .photo-gallery{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .album{
    width: 100% !important;
    max-width: 100% !important;
  }
}

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

@media screen and (max-width: 767px){
  body.is-modal-open,
  body.is-fix-menu-open{
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
}