@charset "UTF-8";

/* ==========================================================================
   Base Pages CSS (Renewal Version)
   Original elements preserved. Styles updated for modern UI.
   ========================================================================== */

/* -------------------------------------------------- */
/* コンテンツ部分のリンク指定 */
/* -------------------------------------------------- */

#Contents a:link    { color: #2d8a6e; text-decoration: none; transition: color 0.3s; }
#Contents a:hover   { color: #243b6b; text-decoration: underline; }
#Contents a:active  { color: #243b6b; text-decoration: none; }
#Contents a:visited { color: #2d8a6e; text-decoration: none; }

/* -------------------------------------------------- */
/* h2 h3 p */
/* -------------------------------------------------- */

#Contents h2 {
    position: relative;
    height: auto; /* height: 110px; から変更 */
    margin: 0px 0px 60px 0px; 
    padding: 0px 0px 20px 0px;
    background: none; /* 画像背景を削除 */
    border-bottom: 4px solid #2d8a6e; /* モダンな下線 */
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #243b6b;
}
#Contents h2 span {
    /* 元のスタイルをリセット */
    position: static; 
    bottom: auto; left: auto;
    margin: 0; padding: 0;
    color: inherit; 
    font-size: inherit; 
    font-weight: inherit;
    background: none;
    border-radius: 0;
}

#Contents h3 {
    clear: both;
    margin: 60px 0px 30px 0px; 
    padding: 8px 0px 8px 16px;
    color: #333; 
    font-size: 1.6rem; 
    font-weight: 700; 
    line-height: 1.4;
    background: none; /* 画像背景を削除 */
    border-left: 6px solid #243b6b; /* ネイビーの縦線 */
}
#Contents h3:nth-child(1) {
    margin-top: 0px;
}

@media only screen and (max-width: 767px) {
    #Contents h3 {
        padding-left: 16px; padding-right: 0;
    }
}

#Contents p {
    margin-bottom: 20px;
    line-height: 1.8;
}

@media only screen and (max-width: 767px) {
    #Contents p {
        margin-left: 0; margin-right: 0;
    }
}

/* -------------------------------------------------- */
/* 文章を強調する場合（赤色・青色） */
/* -------------------------------------------------- */

#Contents .text_red  { color: #e11d48; font-weight: bold; }
/*#Contents .text_blue { color: #0000FF; }*/

/* -------------------------------------------------- */
/* 文章を枠で囲む場合（青枠・赤枠） */
/* -------------------------------------------------- */

#Contents p.message_1 {
    padding: 20px; background: #f0f9ff; border: 1px solid #bae6fd; border-left: 5px solid #0ea5e9; border-radius: 8px;
}
#Contents p.message_2 {
    padding: 20px; background: #fefce8; border: 1px solid #fef08a; border-left: 5px solid #eab308; border-radius: 8px;
}
#Contents p.message_3 {
    padding: 20px; background: #fef2f2; border: 1px solid #fecaca; border-left: 5px solid #ef4444; border-radius: 8px;
}

/* -------------------------------------------------- */
/* ul li */
/* -------------------------------------------------- */

#Contents ul {
    margin: 0px 0px 30px 20px; padding: 0px 0px 0px 0px;
}
#Contents ul li {
    margin: 0px 0px 8px 0px; padding: 0px 0px 0px 0px;
    list-style-type: disc; line-height: 1.8;
    color: #4b5563;
}

@media only screen and (max-width: 767px) {
    #Contents ul {
        margin-left: 20px; margin-right: 0;
    }
}

/* -------------------------------------------------- */
/* ol li */
/* -------------------------------------------------- */

#Contents ol {
    margin: 0px 0px 30px 25px; padding: 0px 0px 0px 0px;
}
#Contents ol li {
    margin: 0px 0px 8px 0px; padding: 0px 0px 0px 0px;
    /*list-style-type: decimal;*/  line-height: 1.8;
    color: #4b5563;
}

@media only screen and (max-width: 767px) {
    #Contents ol {
        margin-left: 25px; margin-right: 0;
    }
}

/* -------------------------------------------------- */
/* ページ内リンク（アンカーリンク）の装飾*/
/* -------------------------------------------------- */

#Contents .pages {
    margin: 0px 0px 30px 0px; padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
#Contents ul.pages li {
    margin: 0px; padding: 0px; list-style: none; line-height: 1.8;
}
#Contents ol.pages li {
    margin: 0px 0px 0px 25px; padding: 0px; line-height: 1.8;
}

@media only screen and (max-width: 767px) {
    #Contents .pages {
        border: 1px solid #e2e8f0;
    }
}

/* -------------------------------------------------- */
/* リンク（一覧）の装飾*/
/* -------------------------------------------------- */

#Contents .markup {
    margin: 0px 0px 60px 0px; 
    padding: 0px 0px 0px 0px;
    list-style: none; /* リスト記号を消去 */
}

/* PC表示時（768px以上）の設定 */
@media (min-width: 768px) {
    #Contents .markup {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列表示 */
        gap: 24px; /* ブロック間の隙間（お好みで調整してください） */
    }
    
    #Contents .markup li {
        margin-bottom: 0 !important; /* グリッドのギャップを使用するためマージンをリセット */
    }
}

#Contents .markup li {
    margin: 0px 0px 40px 0px; 
    padding: 40px;
    font-weight: normal;
    list-style: none;
    background-color: #eff6ff; 
    background-image: none; 
    border-radius: 16px;
    text-align: center;
    /* 高さ揃えをしたい場合は以下を追加 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 以下、既存のスタイルを維持 */
#Contents .markup span {
    display: block;
    margin: 0px 0px 16px 0px; padding: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #243b6b;
}

#Contents .markup p {
    margin: 0px 0px 24px 0px;
    padding: 0;
    background-color: transparent;
    color: #4b5563;
}
#Contents .markup p.view {
    position: static;
    bottom: auto; right: auto;
    margin: 20px 0px 0px 0px; padding: 0px;
    font-weight: 700; text-align: center;
    float: none;
    background: transparent;
    border: none;
}
#Contents .markup .view a {
    display: inline-block;
    padding: 14px 48px;
    background: #243b6b;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(36, 59, 107, 0.2);
    transition: all 0.3s;
}
#Contents .markup .view a:hover {
    background: #1a2c52;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(36, 59, 107, 0.3);
}
#Contents .markup .view .fa {
    margin: 0px 5px 0px 0px;
}

/* -------------------------------------------------- */
/* ページに旧字体がある場合 */
/* -------------------------------------------------- */

#Contents .nav_txt {
    margin: 0px 0px 30px 0px; padding: 25px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 8px;
}
@media only screen and (max-width: 767px) {
    #Contents .nav_txt {
        border: 1px solid #e2e8f0;
    }
}

/* -------------------------------------------------- */
/* このページに関するお問い合わせ先 */
/* -------------------------------------------------- */

#Contents h4 {
    font-size: 1.3rem; font-weight: 700;
    margin-top: 60px;
    margin-bottom: 20px; padding: 0 0 10px 0;
    border-bottom: 2px solid #e2e8f0;
    color: #243b6b;
}

@media only screen and (max-width: 767px) {
    #Contents h4 {
        font-size: 1.2rem;
        padding: 0 0 10px 0;
    }
    #Contents .nav_inq {
        margin: 0;
    }
}

/* -------------------------------------------------- */
/* Adobe Acrobat Readerのダウンロード */
/* -------------------------------------------------- */

#Contents .nav_pdf {
    margin: 60px 0px 0px 0px; padding: 25px;
    border: none;
    background: #f1f5f9;
    border-radius: 8px;
}
#Contents .nav_pdf strong {
    display: block;
    margin-bottom: 15px; padding-bottom: 15px;
    border-bottom: 1px solid #cbd5e1;
}
#Contents .nav_pdf img {
    margin: 0px 0px 5px 0px;
}

@media only screen and (max-width: 767px) {
    #Contents .nav_pdf {
        border: none;
    }
}

/* -------------------------------------------------- */
/* GoogleMap Youtube */
/* -------------------------------------------------- */

#Contents iframe {
    margin-bottom: 20px;
    max-width: 100%;
}

@media only screen and (max-width: 767px) {
    #Contents iframe {
        width: 100%;
        margin-bottom: 20px;
    }
}


/* -------------------------------------------------- */
/* button */
/* -------------------------------------------------- */
.buttons,
a.buttons,
button.buttons {
    /*font-size: 1.6rem;*/
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 3rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0.05em;
    color: #333 !important;
    text-decoration: none !important;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}
.buttons:hover, a.buttons:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
}

.btn--center,
a.btn--center {
    display: flex;
    justify-content: center;
}
.btn--orange,
a.btn--orange {
    color: #FFF !important;
    background-color: #f97316;
    border: none;
}
.btn--orange:hover,
a.btn--orange:hover {
    color: #FFF !important;
    background: #ea580c;
}
a.btn--radius {
   border-radius: 100vh;
}
a.btn--shadow {
  -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
a.btn--circle {
  border-radius: 50%;
  line-height: 100px;
  width: 100px;
  height: 100px;
  padding: 0;
}
a.btn-radius-solid {
  background: #f97316; /* グラデーション削除 */
  border-radius: 50px;
  color: #fff !important;
  border: none;
}

a.btn-radius-solid:hover {
  background: #ea580c;
}
a.btn-radius-solid--gray {
  border: 1px solid #cbd5e1;
  background: #f8fafc; /* グラデーション削除 */
  box-shadow: none;
}

a.btn-radius-solid--gray:hover {
  background: #f1f5f9;
}


/* -------------------------------------------------- */
/* コンテンツ */
/* -------------------------------------------------- */
    
#Contents #news {
    margin: 0px 0px 60px 0px; padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}
#Contents #news strong {
    display: block;
    margin: 0px 0px 20px 0px; padding: 0px 0px 10px 0px;
    color: #243b6b; font-weight: 700; font-size: 1.4rem;
    border-bottom: 1px solid #f1f5f9;
}

#Contents #news ul {
    margin: 0;
}
#Contents #news li {
    margin: 0px 0px 0px 0px; padding: 12px 0px;
    padding-left: 0;
    text-indent: 0;
    color: #4b5563; font-size: 1rem; line-height: 1.6; list-style-type: none;
    border-bottom: 1px solid #f1f5f9;
}
#Contents #news li:last-child {
    border-bottom: none;
}
#Contents #news p {
    margin: 20px 0px 0px 0px; padding: 0px;
    text-align: right;
}
#Contents #news .fa-play {
    margin: 0px 8px 0px 0px; padding: 0px;
    font-size: 0.8em; color: #2d8a6e;
}
#Contents #news .fa-angle-right {
    margin: 0px 5px 0px 0px; padding: 0px;
}
#Contents #news a:link    { color: #2d8a6e; text-decoration: none; font-weight: 500; }
#Contents #news a:hover   { color: #243b6b; text-decoration: underline; }
#Contents #news a:active  { color: #243b6b; text-decoration: none; }
#Contents #news a:visited { color: #2d8a6e; text-decoration: none; }

@media only screen and (max-width: 767px) {
    #Contents #news {
        width: auto;
        margin: 0px 0px 40px 0px; padding: 20px;
        border: 1px solid #e2e8f0;
    }
    #Contents #news strong {
        margin: 0px 0px 15px 0px; padding: 0px 0px 10px 0px;
    }
    #Contents #news ul {
        margin: 0;
    }
    #Contents #news p {
        margin: 15px 0px 0px 0px; padding: 0px;
    }
}

/* -------------------------------------------------- */
/* インデックスに表示される緊急情報 */
/* -------------------------------------------------- */

#Contents #caution {
    margin: 0px 0px 30px 0px; padding: 15px 0px;
    border: 2px solid #ef4444;
    background: #fef2f2;
    border-radius: 8px;
}
#Contents #caution p {
    margin: 0px; padding: 0px;
    color: #ef4444; font-weight: 700; text-align: center;
}

@media only screen and (max-width: 767px) {
    #Contents #caution {
        margin: 0px 0px 30px 0px;
        border: 2px solid #ef4444;
    }
    #Contents #caution p {
        margin: 0px 20px 0px 20px;
    }
}

/* -------------------------------------------------- */
/* 各カテゴリのインデックス (#subindex) ★グリッド化 */
/* -------------------------------------------------- */

#Contents #subindex {
    display: grid;
    /* レスポンシブグリッド: 最小280pxで折り返し */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 0px 0px 60px 0px; padding: 0px 0px 0px 0px;
    width: 100%; /* フレックスボックス解除 */
}
#Contents #subindex div {
    position: static;
    width: auto;
    margin: 0; padding: 30px 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}
#Contents #subindex div:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
    border-color: #2d8a6e;
}
/* 偶数番目指定のリセット */
#Contents #subindex div:nth-of-type(2n) { margin-right: 0px; } 

#Contents #subindex div h3 {
    margin: 0px 0px 20px 0px; padding: 0;
    color: #243b6b; font-size: 1.25rem; font-weight: 700;
    background: none;
    text-align: center;
    border: none;
}
#Contents #subindex div p {
    margin: 0px 0px 20px 0px; padding: 0px 0px 0px 0px;
    line-height: 1.6;
    color: #64748b;
}
#Contents #subindex div .view {
    position: static;
    bottom: auto; right: auto;
    margin: auto 0px 0px 0px; padding: 0px;
    font-weight: 700; text-align: center;
    float: none;
    background: transparent;
}
#Contents #subindex div .view a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0px 0px 0px 0px; padding: 12px 0;
    background: #fff;
    border: 2px solid #2d8a6e;
    border-radius: 8px;
    color: #2d8a6e !important;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: all 0.3s;
}
#Contents #subindex div .view a:hover {
    background: #2d8a6e;
    color: #fff !important;
}
#Contents #subindex div .view .fa {
    margin: 0px 8px 0px 0px;
}

/* 付箋エリア */
#Contents #subindex #husen {
    grid-column: 1 / -1; /* 全幅表示 */
    margin: 0px 0px 40px 0px; padding: 0px 0px 10px 0px;
    text-align: right;
    border-bottom: 2px solid #2d8a6e;
}

@media only screen and (max-width: 767px) {
    #Contents #subindex {
        display: grid;
        grid-template-columns: 1fr; /* 1列 */
        width: 100%;
        margin: 0px 0px 40px 0px;
    }
    #Contents #subindex div {
        width: auto;
        margin: 0;
    }
    #Contents #subindex div h3 {
        padding: 0;
        font-size: 1.2rem;
    }
    #Contents #subindex div .view {
        position: static;
        margin: 0;
        background: transparent;
        border: none;
    }
    #Contents #subindex div .view a {
        display: flex;
        padding: 12px 0;
    }

    #Contents #subindex #husen {
        margin: 0px 0px 30px 0px; padding: 0px 0px 10px 0px;
        text-align: center;
    }
}


/* -------------------------------------------------- */
/* 表組（基本） */
/* -------------------------------------------------- */

#Contents table {
    width: 100%;
    margin: 0 0 30px 0; padding: 0;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #e2e8f0;
}
#Contents table caption {
    margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px;
    font-size: 1em; font-weight: 700; text-align: left; line-height: 1.5;
    color: #333;
}
#Contents table th {
    margin: 0px 0px 0px 0px; padding: 15px;
    background-color: #f1f5f9; border: 1px solid #e2e8f0;
    color: #334155; font-weight: 700; text-align: left;
}
#Contents table td {
    margin: 0px 0px 0px 0px; padding: 15px;
    line-height: 1.6;
    background-color: #fff; border: 1px solid #e2e8f0;
    color: #333;
}

#Contents table.scauto {
    width: auto !important;
}

@media only screen and (max-width: 767px) {
    #Contents .table_wrap {
        width:100%;
        overflow-x:scroll;

    }

    #Contents table.sc { display: block; max-width: 100%; overflow: auto; border: none; margin: 0; }
    /* その他のスクロール設定も同様にモダン化 */
    #Contents table.sc::-webkit-scrollbar { height: 5px;}
    #Contents table.sc::-webkit-scrollbar-track { border-radius: 3px; background: #F1F1F1; opacity: 1; }
    #Contents table.sc::-webkit-scrollbar-thumb { border-radius: 3px; background: #cbd5e1; }
}


/* -------------------------------------------------- */
/* 画像（基本） */
/* -------------------------------------------------- */

#Contents img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
}

/* -------------------------------------------------- */
/* 画像（横並び） */
/* -------------------------------------------------- */

#Contents [class^="pics_"] {
    margin: 0 0 30px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#Contents .pics_2 li { width: 49%; list-style: none; }
#Contents .pics_3 li { width: 32%; list-style: none; }
#Contents .pics_4 li { width: 24%; list-style: none; }

#Contents .pics_2 img, #Contents .pics_3 img, #Contents .pics_4 img { width: 100%; }

/* -------------------------------------------------- */
/* 画像の回り込み（左・中央・右） */
/* -------------------------------------------------- */

#Contents .fig_L, #Contents .f_L { clear: both; margin: 0px 20px 20px 0px; float: left; }
#Contents .fig_L + p, #Contents .f_L + p { clear: right; }
#Contents .fig_L + p ~ hr, #Contents .f_L + p ~ hr { clear: both; margin: 0; padding: 0; visibility: hidden; }

#Contents .fig_R, #Contents .f_R { clear: both; margin: 0px 0px 20px 20px; float: right; }
#Contents .fig_R + p, #Contents .f_R + p { clear: left; }
#Contents .fig_R + p ~ hr, #Contents .f_R + p ~ hr { clear: both; margin-bottom: 25px; padding: 0; visibility: hidden; }

#Contents .fig_R img, #Contents .f_R img {
    display: block;
    margin-bottom: 5px;
    max-width: 240px;
}
#Contents figcaption, #Contents .f_R caption {
    font-size: 0.85em;
    color: #64748b;
    font-weight: 700;
}

#Contents fig_C, #Contents .f_C { margin: 0px auto 30px auto; text-align: center; display: block;}

@media only screen and (max-width: 767px) {
    #Contents .fig_L, #Contents .f_L { display: block; max-width: 100%; height: auto; margin: 0 0 20px 0; float: none; }
    #Contents .fig_R, #Contents .f_R { display: block; max-width: 100%; height: auto; margin: 0 0 20px 0; float: none; }
    #Contents .fig_R img, #Contents .f_R img { max-width: 100% !important; margin-bottom: 5px; }
    #Contents .fig_C, #Contents .f_C { width: 100%; }
}


/* -------------------------------------------------- */
/* 画像（回り込み＋キャプション） */
/* -------------------------------------------------- */

#Contents .imagebox_R {
    clear: both;
    margin: 0px 0px 20px 20px;
    text-align: center;
    float: right;
}
#Contents .imagebox_R img {
    margin: 0px 0px 10px 0px; padding: 0px;
}
#Contents .imagebox_L {
    clear: both;
    margin: 0px 20px 20px 0px;
    text-align: center;
    float: left;
}
#Contents .imagebox_L img {
    margin: 0px 0px 10px 0px; padding: 0px;
}

@media only screen and (max-width: 767px) {
    #Contents .imagebox_R, #Contents .imagebox_L {
        margin: 0 0 20px 0;
        text-align: center;
        float: none;
    }
    #Contents .imagebox_R img, #Contents .imagebox_L img {
        width: 100%;
        margin: 0 0 10px 0; padding: 0;
    }
}

/* -------------------------------------------------- */
/* サンプルページ用のコード */
/* -------------------------------------------------- */

#Contents pre {
    clear: both;
    margin-bottom: 60px;
    padding: 20px;
    color: #FFF;
    background: #334155;
    border-radius: 8px;
    overflow-x: auto;
}
#Contents code {
    white-space: pre-wrap;
    font-family: monospace;
}

/* -------------------------------------------------- */
/* 広報こがタイプのスタイル（div使用あり） */
/* -------------------------------------------------- */

#Contents .kohobody {
    margin-bottom: 50px;
}
#Contents .koho_R {
    padding: 20px;
    background: #eff6ff;
    border-radius: 8px;
}

#Contents .attached {
    margin: 10px 0 0 0;
    padding: 15px;
    background: #FFF;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

#Contents .koho_L img {
    max-width: 100%;
    height: auto;
    display: block; 
    margin: 0 auto 1em auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* --- PC用のスタイル --- */
@media (min-width: 768px) {
    .koho_L img {
        max-width: 300px;
        height: auto;
        display: block;
    }
    .kohobody {
        display: flex;          
        gap: 24px;
        align-items: flex-start;  
    }
    .koho_L {
        flex: 1; 
        max-width: 320px;
    }
    .koho_R {
        flex: 1; 
    }
}

/* -------------------------------------------------- */
/* 市議会インデックスのお知らせ */
/* -------------------------------------------------- */

#Contents .description {
    width: auto;
    height: 200px;
    margin-bottom: 25px;
    padding: 15px;
    list-style-position: inside;
    background-color: #FFF;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: auto; overflow-x: hidden;
}

/* -------------------------------------------------- */
/* 男女共同参画コラム */
/* -------------------------------------------------- */

#Contents .danjo_001,
#Contents .danjo_002 {
    margin-bottom: 50px;
    padding-top: 20px;
}
#Contents .danjo_001 h4 {
    margin: 0 0 20px 0;
    padding-top: 10px;
    border-top: 2px solid #e11d48;
    border-bottom: 2px solid #e11d48;
    color: #e11d48;
}
#Contents .danjo_002 h4 {
    margin: 0px 0 20px 0;
    padding: 15px;
    font-size: 1.3rem;
    font-weight: 700;
    background: #fdf2f8; /* 背景画像廃止 */
    border-left: 5px solid #db2777;
    border-radius: 4px;
}
#Contents .danjo_002 p {
    color: #1e3a8a;
}

/* -------------------------------------------------- */
/* 空き家・空き地バンク */
/* -------------------------------------------------- */

#Contents .bank_shoudan {
    color: #16a34a;
    font-weight: bold;
}
#Contents .bank_view {
    margin-top: 10px;
    padding: 10px 0;
    text-align: center;
    border:  1px solid #93c5fd;
    background: #eff6ff;
    border-radius: 4px;
}

#Contents img.border {
    border: 1px solid #e2e8f0;
}

/* -------------------------------------------------- */
/* 観光ガイド（インデックス） */
/* -------------------------------------------------- */

#Contents .guide {
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
#Contents .guide li {
    width: 120px;
    margin: 0; padding: 0;
    list-style: none;
}

/* -------------------------------------------------- */
/* フッタの付箋とSNS追加リンク */
/* -------------------------------------------------- */

#person {
    width: 100%;
    margin: 0px auto 20px auto;
    padding: 0px;
}

/* ▼ 右寄せ修正: Flexboxで強制的に右端へ */
#person #check {
    display: flex;
    justify-content: flex-end; /* 右揃え */
    width: 100%;
    margin-bottom: 10px;
    text-align: right; /* フォールバック */
}
#person #check img {
    vertical-align: bottom;
}

#person #footersns {
    margin-top: 10px;
}

#person #footersns table {
	width: auto;
	height: auto;
	margin: 10px 0px 0px auto;
	padding: 0;
	box-shadow: none;
	border: none;
}

#person #footersns td {
	margin: 0px 0px 0px 0px !important;
	padding: 0 3px !important;
	background: none;
	vertical-align: top;
	height: 0px;
	border: none;
}
#person #footersns td div {
	margin: 0px !important;
	padding: 0px !important;
}

.fb_iframe_widget > span {
  vertical-align: baseline !important;
}


/* -------------------------------------------------- */
/* 付箋関係（変更なし） */
/* -------------------------------------------------- */

.tagslist {
    width: auto !important;
    margin: 0px 0 20px 0 !important;
    padding: 15px !important;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}
.tagslist li {
    padding: 5px 10px !important;
    list-style-position: inside;
}

/* -------------------------------------------------- */
/* 都市計画課　空き家・空き地バンク */
/* -------------------------------------------------- */

#Contents .bank_box {
    margin-bottom: 50px;
    display: flex;
    gap: 20px;
}
#Contents .bank_box .bank_L {
    width: 194px;
    flex-shrink: 0;
}
#Contents .bank_box .bank_R {
    flex-grow: 1;
}

/* -------------------------------------------------- */
/* 市議会トピックスなど */
/* -------------------------------------------------- */

#Contents .subindex { /* クラスの方 */
    margin: 0; padding: 0;
}
#Contents .subindex li {
    margin: 0 0 20px 0;
    padding: 15px;
    list-style: none;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}
#Contents .subindex span {
    display: block;
    margin: 0px 0 10px 0;
    font-weight: bold; color: #166534;
}

/* -------------------------------------------------- */
/* 公園の予約状況（koukyou） */
/* -------------------------------------------------- */
/* 既に上で調整済みですが補完 */

/* -------------------------------------------------- */
/* フロアマップ（floor） */
/* -------------------------------------------------- */

#Contents .floor {
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 20px;
}
#Contents .floor li {
    margin: 0; padding: 0;
    list-style: none;
}
#Contents .floor img {
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

/* -------------------------------------------------- */
/* Q&A形式 */
/* -------------------------------------------------- */

.qa dt{
    position: relative;
    margin: 0 0 15px 0; padding: 0;
    line-height: 1.6;
    color: #2563eb; font-weight: bold;
    cursor: pointer;
}
.qa dd{
    position: relative;
    margin: 0 0 30px 0; padding: 20px;
    line-height: 1.6;
    border: 1px solid #e2e8f0; border-radius: 8px;
    background: #f8fafc;
}

/* -------------------------------------------------- */
/* ボタン類ユーティリティ */
/* -------------------------------------------------- */

#Contents .btn-icon {
  display: inline-block;
  max-width: 300px;
  text-align: left;
  background-color: #84cc16; /* lime-500 */
  font-size: 1.1em;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  transition: opacity 0.3s;
}
#Contents .btn-icon:hover { opacity: 0.8; }

#Contents .btn-icon-100 {
  display: inline-block;
  text-align: center;
  background-color: #84cc16;
  font-size: 0.9em;
  color: #FFF;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
}

#Contents .anc-icon {
  display: inline-block;
  max-width: 300px;
  text-align: left;
  font-size: 1.1em;
  color: #333;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background-color: #fff;
}
#Contents .anc-icon:hover { background-color: #f1f5f9; }

/* -------------------------------------------------- */
/* 横並びリスト (.yoko) */
/* -------------------------------------------------- */
#Contents .yoko, #Contents .yoko-100 {
    margin: 0 0 30px 0; padding: 0;
    border: none;
    display: flex; flex-wrap: wrap; gap: 10px;
}
#Contents .yoko li, #Contents .yoko-100 li {
    margin: 0; padding: 0;
    list-style: none;
    float: none;
}

/* -------------------------------------------------- */
/* 水道課（2020.02.05） */
/* -------------------------------------------------- */

#Contents .contents_2020 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
#Contents .contents_2020 dt {
    margin: 0; padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    background: #f1f5f9; /* 画像廃止 */
    border-radius: 8px 8px 0 0;
    color: #243b6b;
}
#Contents .contents_2020 dd {
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 15px;
}
#Contents .contents_2020 dd li {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

/* -------------------------------------------------- */
/* アンカーリンクボタン (.anchor_button) */
/* -------------------------------------------------- */

#Contents .anchor_button {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0; padding: 0;
    list-style: none;
}
#Contents .anchor_button li {
    flex: 1 1 48%;
    list-style: none;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
}
#Contents .anchor_button li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 15px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: background 0.3s;
}
#Contents .anchor_button li a:hover {
    background-color: #f1f5f9;
}

/* -------------------------------------------------- */
/* コロナページボタン (.corona_button) */
/* -------------------------------------------------- */
/* 上部で定義済みですが、細かい色調整はそのまま利用 */
#Contents .corona_button li {
    border: none; /* ボーダーはaタグへ */
}
#Contents .corona_button .blue .fa-syringe,
#Contents .corona_button .spring .fa-syringe,
#Contents .corona_button .autumn .fa-syringe { color: #2563eb; }
#Contents .corona_button .orange .fa-syringe { color: #d97706; }
#Contents .corona_button .pink .fa-syringe { color: #db2777; }
#Contents .corona_button .fa-pencil-alt,
#Contents .corona_button .fa-sticky-note,
#Contents .corona_button .fa-plus-square,
#Contents .corona_button .fa-info-circle { color: #16a34a; }

/* -------------------------------------------------- */
/* SNSボタン (PC/SP) */
/* -------------------------------------------------- */
.sns_button_pc {
    bottom: -5px; left: 20px;
}
.sns_button_sp {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 0;
}


/* =========================================================
   サイドバー内 ライフスタイルメニューの上書き設定
   （既存の #lifestyle のレイアウトを .r-lifestyle で再現）
   ========================================================= */

/* --- セクション全体の配置リセット --- */
#Side .r-lifestyle {
    /* メインエリア用の背景・余白設定を無効化 */
    background: none !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    width: 100%;
}

#Side .r-lifestyle .r-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
    max-width: none;
}

/* --- タイトル見出し (h2) --- */
/* 以前の画像タイトルデザインを踏襲する場合 */
#Side .r-lifestyle .r-title {
    font-size: 0; /* テキストを隠す */
    line-height: 0;
    width: 100%;
    height: 90px; /* 旧デザイン画像の高さ */
    margin: 0;
    
    /* 以前のタイトル画像を背景として表示 */
    background: url(/img/pages/side_lifestyle.png) no-repeat center center;
    background-size: contain;
    border: none;
}

/* --- グリッドコンテナ --- */
#Side .r-lifestyle .life-grid {
    display: flex;
    flex-wrap: wrap;
    
    /* 元のCSS(Gridレイアウト)を解除 */
    grid-template-columns: none;
    gap: 0;
    
    /* サイドバー用の装飾 */
    background-color: #fff;
    padding: 0;
    border: 1px solid #D9EBF6; /* 旧デザインの枠線色 */
    border-radius: 0;
    box-shadow: none;
}

/* --- 各アイテム (リンク) --- */
#Side .r-lifestyle .life-grid a {
    /* 2列表示にする */
    width: 50%;
    padding: 0;
    margin: 0;
    display: block;
    
    /* 枠線設定 */
    border: none;
    border-right: 1px solid #ECECEC;
    border-bottom: 1px solid #ECECEC;
    background: transparent;
    
    /* Flex設定の解除 */
    flex-direction: row;
    height: auto;
}

/* 偶数番目（右側）の右枠線を消す */
#Side .r-lifestyle .life-grid a:nth-child(2n) {
    border-right: none;
}

/* 最後の行（11番目以降）の下枠線を消す */
#Side .r-lifestyle .life-grid a:nth-child(n+11) {
    border-bottom: none;
}

/* --- アイコン画像 --- */
#Side .r-lifestyle .life-icon {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ---------------------------------------------------------
   スマホ表示時の調整 (3カラム表示)
   --------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    
    /* タイトル画像の高さ調整 */
    #Side .r-lifestyle .r-title {
        height: 24vw; /* 旧CSSの比率に合わせる */
        background-size: cover;
    }

    /* 3カラムに変更 */
    #Side .r-lifestyle .life-grid a {
        width: 33.33%;
    }

    /* ボーダーのリセット処理を3列用に変更 */
    #Side .r-lifestyle .life-grid a {
        border-right: 1px solid #ECECEC; /* 一旦すべてにつける */
        border-bottom: 1px solid #ECECEC;
    }
    
    /* 3の倍数（右端）の右枠線を消す */
    #Side .r-lifestyle .life-grid a:nth-child(3n) {
        border-right: none;
    }
    
    /* 偶数番目のリセットを打ち消し（PC用指定の解除） */
    #Side .r-lifestyle .life-grid a:nth-child(2n) {
        border-right: 1px solid #ECECEC;
    }
    #Side .r-lifestyle .life-grid a:nth-child(3n+2) { /* 3列時の真ん中 */
       /* 特に指定不要 */
    }
    /* 3の倍数のときは右線を消す */
    #Side .r-lifestyle .life-grid a:nth-child(6n), /* 上書き対策 */
    #Side .r-lifestyle .life-grid a:nth-child(3n) {
        border-right: none;
    }

    /* 最後の行の下枠線を消す (9個目以降と想定) */
    #Side .r-lifestyle .life-grid a:nth-child(n+10) {
        border-bottom: none;
    }
}