@charset "UTF-8";

/* ===== 1. 変数・基本設定 ===== */
:root {
  --main-color: #264235;
  --sub-color: #f2fbf3;
  --accent-color: #6ba28b;
  --green-color: #f9faf7;
  --blue-color: #f0fbfd;
  --gray-color: #f9f9f9	;
  --yellow-color: #fffad8;
  --pink-color: #ffe6f0;
  --purple-color: #f9f4fe;
  --link-color: #3E6B56;
}

/* 画面はみ出し・縮小ガタつき防止 */
html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1rem;
  line-height: 2;
  color: #333;
  margin: 0;
}

/* リンク設定 */
a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s ease;
}

a:hover {
  color: var(--main-color);
}

/* ===== レイアウト ===== */
.fullwidth-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .page-content {
  width: 95%;
  margin: 0 auto;
  }

  .page-content img {
    max-width: 100%;
    height: auto;
  }
}

/* 汎用クラス */
.fs9 { font-size: 0.9em !important; }
.fs8 { font-size: 0.8em !important; }
.br10 { margin-bottom: 10px !important; }
.br20 { margin-bottom: 20px !important; }
.br30 { margin-bottom: 30px !important; }
.br40 { margin-bottom: 40px !important; }
.br50 { margin-bottom: 50px !important; }
.br60 { margin-bottom: 60px !important; }
.br70 { margin-bottom: 70px !important; }
.br80 { margin-bottom: 80px !important; }
.br90 { margin-bottom: 90px !important; }
.br100 { margin-bottom: 100px !important; }  /* ボランティア 会の紹介の注釈用 */



/* ===== タイトル出し分け・サイズ調整 ===== */
/* 1. タイトル共通設定 */
img.section-title,
img.section-title-top {
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

/* 2. PCの表示ルール */
@media screen and (min-width: 769px) {
    /* 出し分け：スマホ用を隠す */
    img.sp-only-img { display: none !important; }

    /* タイトルのサイズ（PC版） */
    img.section-title,
    img.section-title-top {
        height: 50px !important; 
        margin: 50px 0 !important;
		margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* 3. スマホの表示ルール */
@media screen and (max-width: 768px) {
    /* 出し分け：PC用を隠す */
    img.pc-only-img { display: none !important; }

    /* タイトルの基本サイズ（スマホ版） */
    img.section-title,
    img.section-title-top {
        height: 40px !important;
        margin: 30px auto !important;
        max-width: 85vw !important;
    }

    /* 2行タイトルなどの調整 */
    img.is-large.section-title,
    img.is-large.section-title-top {
        height: 85px !important;
        margin-bottom: 10px !important;
    }

    /* 1.5行タイトルなどの調整 */
    img.is-large-s.section-title,
    img.is-large-s.section-title-top {
        height: 65px !important;
    }

/* その他のページのタイトルを中央寄せにする */
    img.section-title {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 4. イラストとのレイアウト設定 */
.section-title-container {
    position: relative;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    z-index: 999;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 20px !important;
	padding: 0 20px;
}
.section-title-main {
    flex-shrink: 0;
    line-height: 0;
}

/* ===== イラストアニメーション ===== */
/* --- 初期状態：画面の外に隠しておく --- */
.illust-animation {
    position: absolute;
    top: 30px;
    left: 80%; 
    width: 140px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100vw) rotate(40deg);
}

/* --- クラスがついた瞬間にアニメーション開始 --- */
.js-illust-trigger.is-active .illust-animation {
    /* 登場アニメーション（naname-u-in）だけを指定し、ループ設定を削除 */
    animation: naname-u-in 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* 登場アニメーションの内容はそのまま */
@keyframes naname-u-in {
    0% {
        opacity: 0;
        transform: translate(150px, 300px) rotate(30deg);
    }
    85% {
        /* 少し行きすぎる */
        transform: translate(-5px, -5px) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}

.title-illust {
    width: 100%;
    height: auto;
}

/* --- スマホ用の調整 (画面幅768px以下) --- */
@media screen and (max-width: 768px) {
    .section-title-container {
        padding: 0 20px;
    }

    .illust-animation {
        width: 70px;
        left: auto;
        right: 5px;
        top: 35px;
    }

    /* 動きの軌道をスマホ用に最適化 */
    @keyframes naname-u-in {
        0% {
            opacity: 0;
            transform: translate(30px, 50px) rotate(30deg);
        }
        85% {
            transform: translate(-3px, -3px) rotate(-4deg);
        }
        100% {
            opacity: 1;
            transform: translate(0, 0) rotate(0deg);
        }
    }
}


/* ===== 区切り ===== */
/* セクション区切り画像 */
.title-line {
  display: block;
  width: 100%;
  margin: 50px auto;
  height: auto;
}

/* 波型区切り */
.section-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 10;
}
.section-divider svg {
  width: 100%;
  height: 60px;
}

/* 波背景 */
.section-blue       { background-color: var(--blue-color); }
.section-lightgreen { background-color: var(--sub-color); }
.section-yellow      { background-color: var(--yellow-color); }
.section-purple      { background-color: var(--purple-color); }
.section-gray      { background-color: var(--gray-color); }

/* スマホ（区切り） */
@media screen and (max-width: 768px) {
  .section-divider svg {
    height: 30px;
  }
}

/* スマホ */
@media screen and (max-width: 768px) {	
  .page-title {
    display: table;
    margin: 30px auto 20px;
  }

  .title-line-wrapper {
    padding: 0 15px; 
    box-sizing: border-box;
  }

  .title-line {
     min-width: 600px; 
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ===== 装飾 ===== */
/* 小タイトル（spanで囲む） */
.page-title {
  background: linear-gradient(transparent 60%, var(--sub-color) 60%);
  font-weight: bold;
  padding: 5px 10px;
  color: var(--main-color);
  display: inline;
}

/* 太めのマーカー */
.line-marker {
  background: linear-gradient(transparent 60%, var(--yellow-color) 60%);
  font-weight: bold;
  padding: 5px 10px;
}

/* 細めのラインマーカー */
.line-marker-thin {
  background: linear-gradient(transparent 80%, var(--yellow-color) 80%);
  padding: 0 2px;
}

/* ストライプ */
.line-marker-stripe {
  background: repeating-linear-gradient(
    -45deg,
    #eee 0,
    #eee 2px,
    #ffefbc 2px,
    #ffefbc 4px
  );
  padding: 0 4px;
}

/* ドットのアンダーライン */
.line-dot {
  text-decoration: none;
  border: 2px dashed var(--accent-color);
}

/* 二重のアンダーライン */
.line-double {
  text-decoration: none;
  border-bottom: 3px double var(--accent-color);
}

.line-marker-gradient {
  background: linear-gradient(transparent 70%, #a1ffce 70%, #faffd1 100%);
  padding: 0 2px;
}


/* =====画像サイズと角丸の調整 ===== */
.img-adjust {
    width: 80%;
    height: auto;
    display: block;
    margin: 20px auto 70px;
	border-radius: 12px; 
    overflow: hidden; 
}

@media screen and (max-width: 768px) {
.img-adjust {
    /* スマホ版 : 横幅いっぱい */
    width: 100%;
    height: auto;
    display: block;
}
}


/* =====リスト ===== */
/* リスト1 */
.list-item {
    margin-bottom: 12px;
    line-height: 1.6;
    display: block;
}

.list-icon {
    flex-shrink: 0;
    color: var(--accent-color);
    font-weight: bold;
    height: 1.6em;
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

/* リスト2 削除？ */
.custom-list {
  list-style: none;
  padding: 0;
}

.custom-list li {
  position: relative;
  padding-left: 1.5em;
  line-height: 1.6;
  margin-bottom: 0.8em;
}

.custom-list > li > i {
  position: absolute;
  left: 0;
  top: 0.3em;
  color: var(--accent-color);
}

 /* 数字リスト */
ol.custom-bold-number {
    list-style: none;
    counter-reset: my-counter;
    padding-left: 0;
    margin-top: 10px;
}

ol.custom-bold-number li {
    counter-increment: my-counter;
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 8px;
    line-height: 1.6;
    display: list-item;
}

ol.custom-bold-number li::before {
    content: counter(my-counter) ".";
    position: absolute;
    left: 0;
    color: var(--main-color);
    font-weight: bold;
}


/* =====リンクボタン ===== */
/* PDFリンクのスタイル調整 */
.pdf-link {
	color: var(--main-color);
    text-decoration: none;
}

.pdf-link i {
    margin-left: 80px;   /* テキストとの間隔 */
    vertical-align: baseline;
}


	
/* ===== 一覧リストへボタン ===== */
.list-button-wrapper {
  text-align: right;
  width: auto !important;
  flex-shrink: 0 !important;
  margin:20px 0;
}

.list-button-wrapper img {
  width: auto;
  max-width: 200px;
  height: auto;
  display: inline-block;
}

.list-button {
  display: inline-block;
  transition: transform 0.3s ease;
  cursor: pointer;
	}

.list-button img {
  display: block;
  width: auto;
  height: 100px;
}

.list-button:hover {
transform: translateY(-5px) rotate(10deg);
}

/* スマホ */
@media screen and (max-width: 768px) {
  .list-button img {
    height: 60px;
  }
}

	
/* ===== お問い合わせ共通ボックス ===== */
.hiromachi-box {
    width: 100%;
    max-width: 400px;
    margin: 10px 40px 10px auto;
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
}

/* 見出し部分 */
.box-title {
    background-color: var(--accent-color);
    color: #fff;
    padding: 10px 6px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-align: center;
    line-height: 1.2;
}

.box-content {
    padding: 20px;
    text-align: left;
}

/* 事務所名 */
.office-name {
    margin: 0 0 10px 0 !important;
    font-size: 18px;
    color: var(--main-color);
    font-weight: bold;
    display: block;
}

.hiromachi-box p {
    margin: 5px 0;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

/* 電話と営業時間の並び */
.contact-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 12px !important;
}

.contact-info span {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.hours-span {
    color: #666;
    font-size: 13px;
}

/* アイコン設定 */
.hiromachi-box .icon {
    margin-right: 6px !important;
    color: var(--accent-color) !important;
    display: inline-block;
    vertical-align: middle;
}

.hiromachi-box .tel a {
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    font-size: 16px;
}

/* ボタンエリア */
.btn-area {
    margin-top: 20px;
    text-align: center;
}

.contact-button {
    display: inline-block;
    padding: 10px 40px;
    background-color: var(--accent-color);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s, opacity 0.3s;
}

.contact-button:hover {
    opacity: 0.8;
}

/* スマホ */
@media (max-width: 767px) {
    .hiromachi-box,
    .hiromachi-box.is-wide {
        margin: 20px auto;
        max-width: 90%;
    }

    .box-content {
        text-align: center;
    }

    .contact-info {
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }
}

/* ===== 写真 ===== */
.photo-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
  border-radius: 12px;
  object-fit: cover;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .photo-img {
    aspect-ratio: 4 / 3; 
    object-position: center;
   }
}







/* ===== 2カラム ===== */
.l-2col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.l-2col__media,
.l-2col__content {
    flex: 1;
    min-width: 220px;
}

.l-2col--fixed-s { flex: 0 0 220px; }
.l-2col--fixed-m { flex: 0 0 400px; }

.l-2col img {
    width: 100%;
    height: auto;
    display: block;
}

.l-2col--fixed-m img.u-mb20 {
    border: 1px solid var(--accent-color);
    box-sizing: border-box;
    border-radius: 12px; 
}

/* --- スマホ --- */
@media screen and (max-width: 768px) {
    .l-2col {
        flex-direction: column;
        gap: 30px;
    }

    /* 固定幅クラスを解除して中央寄せ */
    .l-2col--fixed-s,
    .l-2col--fixed-m {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    /* スマホで画像を小さくする */
    .u-sm-small {
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ===== 余白設定 ===== */
.u-gap-s { display: flex; flex-direction: column; gap: 10px; }
.u-gap-m { display: flex; flex-direction: column; gap: 20px; }
.u-gap-l { display: flex; flex-direction: column; gap: 30px; }

/* PC版の基本余白 */
.u-mb10 { margin-bottom: 10px !important; }
.u-mb20 { margin-bottom: 20px !important; }
.u-mb50 { margin-bottom: 50px !important; }
.u-mb80 { margin-bottom: 80px !important; }

/* --- スマホ版の余白調整 (768px以下) --- */
@media screen and (max-width: 768px) {
  /* gap（要素内の間隔）を少し詰める */
  .u-gap-s { gap: 0px; }
  .u-gap-m { gap: 15px; }
  .u-gap-l { gap: 20px; }

  /* スマホ用に余白を縮小 */
  .u-mb10 { margin-bottom: 0px !important; }
  .u-mb20 { margin-bottom: 15px !important; }
  .u-mb50 { margin-bottom: 30px !important; }
  .u-mb80 { margin-bottom: 40px !important; }
}



/* ===== 2カラム ===== */

/* コンテナ全体の共通設定 */
.flex-2col-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
   margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* 各カラムの共通設定（はみ出し防止） */
.flex-2col-image,
.flex-2col-text {
    flex: 1;
    min-width: 280px;
    max-width: 800px;
    box-sizing: border-box;
}

/* 左側：画像とダウンロードボタンのエリア */
.flex-2col-image {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ボランティ・5つの会 */
.flex-2col-image2 {
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 画像の基本設定 */
.flex-2col-image img,
.flex-2col-image2 img,
.flex-2col-text img
.flex-2col-text2 img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border: 1px solid var(--accent-color);
    border-radius: 12px;
}

/* 右側：テキストエリア */
.flex-2col-text {
    text-align: left;
}

/* 左側がテキストの場合 */
.flex-2col-text2 {
    text-align: left;
    max-width: 500px;
}

.content-gap {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 20px;               /* コンテンツ間の隙間 */
}

/* --- スマホ表示 (768px以下) --- */
@media screen and (max-width: 768px) {
    .flex-2col-container {
        flex-direction: column; /* 縦に並べる */
        align-items: center;    /* 中央寄せ */
        gap: 30px;
        padding: 0 15px;        /* 画面端の余白を確保 */
    }

    .flex-2col-image,
    .flex-2col-text {
        width: 100%;
        min-width: 0;           /* 親要素を突き破るのを防ぐ */
    }

    .flex-2col-image img {
        width: 90%;             /* 画像が大きすぎないように調整 */
        margin: 0 auto;
    }


}



/* ===== 公園マップ・年間スケジュール ダウンロード ===== */
.facility-map {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.map-download {
  margin: 0 30px;
  text-align: center;
}

.douisho-download {
  margin: 10px 0 20px 0;
}

.download-btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--accent-color);
  color: #fff !important;
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
   transition: transform 0.3s ease;
   white-space: nowrap;
}

.download-btn:hover {
  color: #fff !important;
  transform: translateY(-5px);
}

/* スマホ */
@media screen and (max-width: 768px) {
  .map-download {
    margin-top: 20px;
    text-align: center;
  }
}



/* ===== 写真（枠内いっぱいに表示・消失防止版） ===== */

/* --- 写真コンテナの基本設定（PC版） --- */
.photo-container {
  width: 100%;
  aspect-ratio: 1900 / 682.1;
  position: relative;
  overflow: hidden;

  /* PC用マスク：Data URI埋め込み（優先度を上げるため !important を追加） */
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1899.5 686.8'%3E%3Cpath d='M1536,0.5c413.4-9.8,352.8,122.9,354.7,178.2c2.8,78,0.3,194.3,1.2,201.5c0.2,10.4,0.9,18.1,0.2,26.9c-3.8,51,35.2,145.8-36.3,232c-73.4,80.7-334.4,34-549.9,36.4c-320.1,9.9-649.4,5.8-972.7,3c-95.1-2.9-194.3,12.9-266.7-23.6c-12.2-6.1-23-14.8-31.5-25.5c-58-72.9-25.6-174-31-247.7c4-52.5-5.5-142.7-2.9-182.9C12.4,28.3,32.6-4.7,437.8,4.7C803.3,3.7,1167.2,9.2,1536,0.5z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1899.5 686.8'%3E%3Cpath d='M1536,0.5c413.4-9.8,352.8,122.9,354.7,178.2c2.8,78,0.3,194.3,1.2,201.5c0.2,10.4,0.9,18.1,0.2,26.9c-3.8,51,35.2,145.8-36.3,232c-73.4,80.7-334.4,34-549.9,36.4c-320.1,9.9-649.4,5.8-972.7,3c-95.1-2.9-194.3,12.9-266.7-23.6c-12.2-6.1-23-14.8-31.5-25.5c-58-72.9-25.6-174-31-247.7c4-52.5-5.5-142.7-2.9-182.9C12.4,28.3,32.6-4.7,437.8,4.7C803.3,3.7,1167.2,9.2,1536,0.5z'/%3E%3C/svg%3E") !important;

  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* --- 画像自体の設定 --- */
.photo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* --- スマホ版 (768px以下) --- */
@media screen and (max-width: 768px) {
  .photo-container {
    /* スマホ版SVGの比率に変更 */
    aspect-ratio: 800 / 682.1;
    width: 100% !important;

    /* スマホ用マスク：Data URI埋め込み */
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 797.7 677.8'%3E%3Cpath d='M651.6,0c156.8,11,148.6,139,144.5,250.4c-2,53.6-0.6,115.5-0.9,125.2c-4.9,59.2,8,122.2-2.9,180.4c-19.6,133.2-149.4,113.2-240.2,115.5c-134.8,9.9-273.4,5.8-409.6,3c-43.4-3.1-81.9-21.8-110.3-55.1C0,546,5.7,454,7,377.8C3.6,156.8-47.5,2.5,186.5,0.8C340.4-0.3,496.3,8.6,651.6,0z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 797.7 677.8'%3E%3Cpath d='M651.6,0c156.8,11,148.6,139,144.5,250.4c-2,53.6-0.6,115.5-0.9,125.2c-4.9,59.2,8,122.2-2.9,180.4c-19.6,133.2-149.4,113.2-240.2,115.5c-134.8,9.9-273.4,5.8-409.6,3c-43.4-3.1-81.9-21.8-110.3-55.1C0,546,5.7,454,7,377.8C3.6,156.8-47.5,2.5,186.5,0.8C340.4-0.3,496.3,8.6,651.6,0z'/%3E%3C/svg%3E") !important;
  }
	

  .photo-img {
    width: 100% !important;
    height: 100% !important;
  }
}



/* ===== 共通（ナビ・ボタン・モーダル） ===== */
.event-year-nav-list,
.news-year-nav-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 20px 0; 
    padding: 10px 0; 
    gap: 6px;
   scrollbar-width: none;
    -ms-overflow-style: none;
}

.event-year-nav-list::-webkit-scrollbar,
.news-year-nav-list::-webkit-scrollbar {
    display: none;
}

/* ボタン単体の設定 */
.year-button-list {
    display: inline-block;
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--accent-color);
    border-radius: 12px;
    background-color: #fff;
    color: var(--accent-color);
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s ease;
}

.year-button-list:first-child {
    margin-left: 5px;
}

.year-button-list:last-child {
    margin-right: 20px;
}

/* アクティブ */
.year-button-list.active {
    background-color: var(--accent-color);
    color: #fff;
}

/* ホバー：アクティブではないボタン(:not(.active))だけを対象にする */
.year-button-list:not(.active):hover {
    background-color: var(--sub-color);
 }


/* スマホ */
@media (max-width: 768px) {
.year-button-list {
    padding: 8px 12px;
}
}



/* ===== お知らせ・イベント共通レイアウト ===== */
.common-post-list {
  max-width: 1200px;
  margin: 0 auto 100px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-item {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 16px;
  border-bottom: 2px dashed var(--accent-color);
  align-items: flex-start;
}

.common-post-list .post-item:nth-last-child(2) {
  border-bottom: none !important;
}

.post-thumbnail {
    width: 180px;
    height: 0 !important;
    padding-top: 180px !important;
    position: relative !important;
    background-color: var(--sub-color);
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--accent-color);
    display: block !important; /* Safari対策 */
}

/* --- 画像の設定（上端基準） --- */
.post-thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
}

/* --- COMING SOON の設定（中央配置） --- */
.post-thumbnail span {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    color: var(--accent-color);
    white-space: nowrap;
    z-index: 1;
}




/* --- クリック制御・ホバー効果 --- */

/* 画像がある（modal-triggerがある）アイテムのみホバー反応させる */
.modal-trigger:hover .post-thumbnail {
  opacity: 0.7;
}

.modal-trigger:hover .post-title {
  color: var(--accent-color) !important;
}

/* 画像がない（modal-triggerがない）アイテムはカーソルとホバーを解除 */
.post-item:not(.modal-trigger) {
  cursor: default !important;
}

.post-item:not(.modal-trigger) .post-title,
.post-item:not(.modal-trigger) .post-thumbnail {
  cursor: default !important;
}

/* コンテンツエリア */
.post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.post-date {
  font-size: 0.9em;
  color: #666;
  line-height: 1.2;
}

.post-title {
  margin: 0;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.post-detail {
  color: #333;
  text-align: left;
  line-height: 1.6;
  white-space: pre-wrap;
  margin-top: 0 !important;
}

/* 詳細テキストの標準マージンをなくして、タイトルとの行間を詰める */
.post-detail p {
  margin: 0 !important;
  padding: 0 !important;
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
  .post-item {
display: flex !important;
    flex-direction: column !important; /* 縦並びに変更 */
    gap: 12px;
    padding: 20px 0;
	}
  .post-content {
    display: contents;
  }
  .post-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: none;
    min-width: 0;
	}
  .post-detail {
    width: 100%;
    margin-top: 0 !important;
  }
  .post-title {
    font-size: 1em;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }
.post-thumbnail {
        width: 90% !important;
        padding-top: 90% !important;
        margin: 0 auto;
	}
  .modal-inner {
    width: 85%;
  }
}



/* ===== 花ごよみ・ひろまちだよりの画像保護 ===== */
/* 花ごよみ・背景画像にする */
.hanagoyomi-thumb-bg {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    pointer-events: none;
}

/* ひろまちだより・背景画像にする */
.hiromachidayori-thumb-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ひろまちだより詳細 */
.single-content img {
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
}

/* ひろまちだより詳細・背景画像にする */
.single-protected-bg-box {
    width: 100%;
    margin-bottom: 20px;
    background-color: transparent;
}


/* スマホ用の調整 (画面幅768px以下) */
@media screen and (max-width: 768px) {
    
    /* h2のサイズをh3相当に調整 */
    h2 {
        font-size: 1.2rem !important;
		line-height: 2;
        padding: 0 10px;
    }
    h3 {
        font-size: 1.1rem !important;
		line-height: 1.8;
        padding: 0 10px;
    }
    h2 br { display: none; }
}




/* ===== 下線（グラデーション） ===== */

/* 1. 共通の線のデザイン設定 */
.handdrawn-line span {
    display: inline; 
    position: relative;
    padding: 0.5em 0 !important; 
    background-image: linear-gradient(
        135deg,
        rgba(38, 66, 53, 0.2) 0%,
        rgba(38, 66, 53, 0.3) 50%,
        rgba(38, 66, 53, 0.1) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 10px !important;     
    background-position: bottom !important;     
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

h2.handdrawn-line {
    display: block;
    text-align: center;
    margin: 1.5em 0;
    line-height: 2.5 !important;
    font-size: 1.4rem;
    font-weight: bold;
}

h3.text-handdrawn-line {
    display: block;
    text-align: center;
    margin: 0 0 1.2em 0;
    line-height: 2.5 !important;
    font-size: 1.15rem;
    font-weight: bold;
}

/* 3. ★スマホ版の調整（768px以下） */
@media screen and (max-width: 768px) {
    .handdrawn-line span,
    .text-handdrawn-line span {
        padding: 0.4em 0 !important;
        background-size: 100% 8px !important;
    }

    h2.handdrawn-line {
        font-size: 1.2rem !important;
        line-height: 2.2 !important;
    }

    h3.text-handdrawn-line {
        font-size: 1.1rem !important;
        line-height: 2.2 !important;
    }

    /* スマホ専用改行タグ */
    .sp-only {
        display: block;
        content: "";
        margin-top: 5px;
    }
}

/* PCでは改行しない */
@media screen and (min-width: 769px) {
    .sp-only {
        display: none;
    }
}