/* ------------------------------------------------------------------
   ヘッダーレイアウト修正コード（最終版）
   このコードブロック全体を top-page.css の一番下に追加してください。
-------------------------------------------------------------------*/

/* ヘッダー全体のレイアウトをFlexboxで再定義 */
#topnav>.wrap_head {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

/* 左側コンテンツエリア（ロゴと住所）のコンテナ */
#topmain {
    order: 1;
    /* 左側に配置 */
    flex: 2 1 350px;
    /* スライダーより優先的に幅を確保 */
    width: auto;
    /* 既存のwidthを無効化 */
    float: none;
    /* floatを無効化 */
    margin-right: 0;
}

/* 右側コンテンツエリア（スライダー） */
.swiper {
    order: 2;
    /* 右側に配置 */
    flex: 1 1 580px;
    max-width: 580px;
    min-width: 300px;
    float: none;
    /* floatを無効化 */
    margin: 1em 0;
}

/* ロゴと住所を囲むコンテナ */
.clearfix-top-header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

/* ロゴのボックス */
.toplogobox {
    flex: 1 1 auto;
    /* 自動で幅を調整 */
    padding-top: 1em;
    margin-top:1em;
}

/* 住所のボックス */
/* .toplogobox-address {
    padding-left: 4em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    padding-top: 1em;
    gap: 4em;
    text-align: right;
} */
.toplogobox-address {
    display: flex;
    align-items: center;
    /* 上下中央揃え */
    justify-content: flex-end;
    /* 右寄せ */
    gap: 3em;
padding-left: 2em;
}

#topqrimg {
    flex-shrink: 0;
    /* QR画像のサイズを固定 */
}

#topqrimg img {
    display: block;
    max-width: 100%;
    height: auto;
}

#topinfo {
    text-align: right;
    /* テキストも右揃え */
}

#topinfo p {
    margin: 0 0 1px 0;
    /* 段落間の余白を調整 */
}

#topinfo p:last-child {
    margin-bottom: 0;
}

.logodes-top {margin-left: 2em;}
.logodes-top>p {
    font-size: inherit;
        line-height: 1.3;
        color: #40AB6B;
}

/* レスポンシブ対応 */
/* タブレット・小さなデスクトップ（768px以下） */
@media (max-width: 768px) {
    .clearfix-top-header {
        flex-direction: column;
        align-items: center;
        /* gap: 20px; */
    }
/* 
    .toplogobox {
        padding-top: 0.5em;
        margin-top: 0.5em;
    } */

    .toplogobox a {
        /* gap: 8px; */
    }

    #toplogoimg img {
        max-height: 50px;
        display:none;
    }

    .toplogobox-address {
        justify-content: center;
        gap: 2em;
        padding-left: 0;
        width: 100%;
    }

    #topinfo {
        text-align: center;
    }

    .logodes-top {
        margin-left: 0;
        text-align: center;
    }
}

/* スマートフォン（480px以下） */
@media (max-width: 480px) {
    .clearfix-top-header {
        gap: 15px;
    }

    .toplogobox a {
        gap: 6px;
    }

    #toplogoimg img {
        display: none;
    }

    #logosub {
        font-size: 0.8em;
    }

    #logoTitle {
        /* font-size: 0.9em; */
    }

    .toplogobox-address {
        gap: 1.5em;
    }

    #topqrimg img {
        max-width: 60px;
        height: auto;
    }

    #topinfo p {
        font-size: 0.8em;
        margin: 0 0 2px 0;
        line-height: 1.2;
    }

    .logodes-top>p {
        /* font-size: 0.8em; */
    }
}

/* 非常に小さなスマートフォン（360px以下） */
@media (max-width: 360px) {
    .clearfix-top-header {
        gap: 10px;
    }

    .toplogobox {
        padding-top: 0.3em;
        margin-top: 0.3em;
    }

    .toplogobox a {
        gap: 4px;
    }

    #toplogoimg img {
        max-height: 35px;
    }

    #logosub {
        font-size: 0.7em;
        line-height: 1.1;
    }

    #logoTitle {
        font-size: 0.8em;
        line-height: 1.1;
    }

    .toplogobox-address {
        gap: 1em;
    }

    #topqrimg img {
        max-width: 50px;
    }

    #topinfo p {
        font-size: 0.7em;
        line-height: 1.1;
    }

    .logodes-top>p {
        font-size: 0.7em;
        line-height: 1.1;
    }
}

/* **********************************************************
 * 画像スライド 
 * swiper https: //swiperjs.com/
********************************************************** */

/* 各スライドのスタイル */
.swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background: #fff;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* キャプションのスタイル */
.caption {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    /* 固定幅の代わりに右側の位置を指定 */
    width: auto;
    /* 固定幅を削除 */
    max-width: 600px;
    /* 最大幅を設定 */
    padding: 10px;
    /* color: rgb(52, 160, 6); */
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
    line-height: 1.5;
    text-shadow: 2px 2px 4px gray;
    box-sizing: border-box;
    font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
}

/* "green" クラスのスタイル */
.caption.green {
    background-color: rgba(48, 111, 22, 0.7);
}

/* プログレスバー（タイマーバー）を右下に配置 */
.swiper-pagination-progressbar {
    top: auto !important;
    bottom: 0;
    left: auto !important;
    right: 0;
    width: 25% !important;
}

/* **********************************************************
 * header/footer nav  
 ********************************************************** */
#header_nav {
    width: 100%;
    margin: 1em 0 0.5em 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

#footer_nav:after {
    content: "";
    display: table;
    clear: both;
}

#header_nav ul {
    min-width: 280px;
    margin-right: 0;
    padding: 0;
    text-align: center;
    display: inline-block;
}

#header_nav ul li {
    min-width: 2em;
    margin: 0;
    padding: 0;
    /* float: left; */
    display: inline-block;
    overflow: hidden;
    position: relative;
}

#header_nav ul li a,
#footer_nav ul li a:visited {
    display: inline-block;
    color: #2b2b2b;
    font-size: 10px;
    padding: 0px 10px;
    border-left: 1px solid #ccc;
    text-decoration: none;
}

#header_nav ul li a,
#header_nav ul li a:visited {
    box-shadow: 1px 0 #ddd, -1px 0 #eee inset;
    -pie-box-shadow: 1px 0 #ddd, -1px 0 #eee inset;
    position: relative;
    behavior: url(/js/PIE.htc.html);
}

#footer_banner_top {
    background: #fff;
    /* padding: 15px 0; */
    /* border-top: 1px solid #ddd; */
    display: flex;
    justify-content: space-between;
    /* 幅いっぱいに配置 */
    gap: 10px;
    /* 間隔を狭めて幅いっぱいに */
    max-width: 100%;
    margin: 0 auto;
    padding: 5px 14px;
    flex-wrap: wrap;
}

img.top-footer-linkpanel-img-small {
    width: 250px;
    height: auto;
}

/* **********************************************************
 * panel
 ********************************************************** */
/* 上段パネルの高さ調整 */
.clearfix-top {
    display: flex;
    align-items: stretch;
    /* 子要素の高さを揃える */
}

.clearfix-top .gpanle {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.clearfix-top .gpanle nav {
    flex-grow: 1;
    /* navを可能な限り伸ばす */
}

#newslink {
    text-align: center;
    text-decoration: underline;
    font-size: 26px;
    padding: 7px;
    border-top: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    margin: 7px 0;
}

#newslink i {
    margin-right: 7px;
}

#newslink a,
#newslink a:visited {
    color: #000;
}

#main_panel1,
#main_panel2,
#main_panel3,
#main_panel4 {
    margin-bottom: 14px;
    border: solid #888 1px;
    padding-bottom: 14px;
    width: 25%;
    float: left;
}

#infobox {
    width: 95%;
}

#main_panel1,
#main_panel2,
#main_panel3 {
    margin-right: 1.5%;
}

#main_panel1 ul li,
#main_panel2 ul li,
#main_panel3 ul li,
#main_panel4 ul li {
    cursor: pointer;
}

.panel_img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.panel_ontext {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(6, 139, 63, 0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#B4068B3F, endcolorstr=#B4068B3F, gradienttype=0);
}

.panel_ontext>span {
    padding: 14px;
    display: inline-block;
    text-shadow: 0.8px 0.8px 1px #40AB6B, -0.8px 0.8px 1px #40AB6B, 0.8px -0.8px 1px #40AB6B, -0.8px -0.8px 1px #40AB6B;
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.05em;
}

.gpanle ul.cateopen li p,
.gpanle ul.cateopen li {
    font-size: 14px;
}

.panel_img img {
    width: 100%;
    object-fit: cover;
}
/* ----------------------------------------------------------
 * レスポンシブ対応：画面が小さい場合（縦並び）
 * ----------------------------------------------------------*/

/* 例として、画面幅が768px以下の場合に適用します */
@media screen and (max-width: 768px) {
    .swiper {
        display: none;
    }

    #topmain {
        width: 100%;
        float: none;
        margin-right: 0;
    }

    /* 親コンテナを縦並びのレイアウトに変更 */
    .clearfix-top {
        flex-direction: column;
        gap: 14px;
        /* 縦方向の隙間を調整 */
        padding: 0 5%;
    }

    /* 各パネルの幅を100%に広げる */
    #main_panel1,
    #main_panel2,
    #main_panel3,
    #main_panel4 {
        width: 100%;
        /* flexプロパティは不要になるため、widthで上書き */
        flex: none;
        min-width: auto;
    }
}

/* 
* お知らせなどのタブ表示
*/
/* タブコンテナのスタイル調整 */
.tab-container {
    display: flex;
    min-height: 400px;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    /* border-radius: 8px; */
    overflow: hidden;
}

.tab-sidebar {
    width: 24%;
    background-color: white;
    padding: 0;
}

.tab-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tab-item {
    margin: 0;
    /* border-bottom: 1px solid #34495e; */
}

.tab-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background: none;
    border: none;
    color: #555;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
}

.tab-button:hover {
    background-color: white;
    padding-left: 25px;
}

.tab-button.active {
    background-color: rgba(6, 139, 63, 0.8);
    color: white;
    font-weight: bold;
}

.tab-button.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: rgba(6, 139, 63, 0.8);
}

.content-area {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: white;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-header {
    border-bottom: 2px solid rgba(6, 139, 63, 0.8);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.content-title {
    color: #555;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.content-body {
    line-height: 1.6;
    color: #555;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .tab-container {
        flex-direction: column;
        height: auto;
    }

    .tab-sidebar {
        width: 100%;
        order: 1;
    }

    .content-area {
        order: 2;
        padding: 15px;
    }

    .tab-list {
        display: flex;
        overflow-x: auto;
    }

    .tab-item {
        flex-shrink: 0;
        margin-right: 2px;
        margin-bottom: 0;
        border-bottom: none;
        border-right: 1px solid #555;
    }

    .tab-button {
        white-space: nowrap;
        padding: 12px 16px;
        font-size: 13px;
    }
}


/* お知らせタブ */
.news-container {
    width: 100%;
    max-width: 800px;
    /* Adjust as needed */
    margin: 0 auto;
    background-color: #fff;
    padding: 0 5px;
    /* border-radius: 8px; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.news-list {
    list-style: none;
    /* Remove default list bullets */
    padding: 0;
    margin: 0;
}

.news-item {
    display: flex;
    /* Use flexbox for layout */
    align-items: baseline;
    /* Align items at the baseline */
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    /* Light dashed separator */
    position: relative;
    /* Needed for absolute positioning of 'New' mark */
}

.news-item:last-child {
    border-bottom: none;
    /* No border for the last item */
}

.news-date {
    flex-shrink: 0;
    /* Prevent date from shrinking */
    width: 15%;
    /* Fixed width for the date column */
    /* font-size: 0.9em; */
    color: #666;
    /* margin-right: 15px; */
    /* Space between date and title */
}

.news-newmark {
    width: 8%;
    padding: 0 10px 0 5px;
    text-align: center;
}

.news-title {
    flex-grow: 1;
    /* Allow title to take up remaining space */
    font-size: 1em;
    color: #333;
}

/* Styling for the 'New' mark */
.news-item.new .news-date::after {
    content: "New";
    background-color: #ff4d4d;
    /* Red background for 'New' */
    color: white;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 10px;
    /* Space between date and 'New' tag */
    vertical-align: middle;
    /* Align with text */
    display: inline-block;
    /* Allows padding and margin */
}

/* お知らせ News 一覧ページ移動ボタン */
.button {
    text-align: end;
}

.button-link {
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(6, 139, 63, 0.8);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 2em 0;
}

.button-link:hover {
    background-color: #0056b3;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .news-item {
        display: flex;
        /* flexコンテナであることを確認 */
        flex-wrap: wrap;
        /* 要素の折り返しを許可 */
        align-items: center;
        /* 要素の垂直方向の位置を中央に揃える */
        row-gap: 5px;
        /* 行間のスペースを確保 */
    }

    .news-date {
        white-space: nowrap;
        flex-shrink: 0;
        margin-bottom: 0;
        /* 下マージンは不要なため削除 */
        /* margin-right: 8px; */
        /* NEWアイコンとの間に余白を追加 */
    }

    .news-newmark {
        width: 40px;
        padding: 0;
        margin-left: auto;
    }

    /* news-titleを強制的に改行させる */
    .news-title {
        flex-basis: 100%;
        /* 幅を100%にして、次の行に送る */
    }

    #newslink {
        font-size: 16px;
        /* 文字サイズを小さくする */
        white-space: nowrap;
        /* テキストを一行で表示（折り返しを防ぐ） */
        overflow: hidden;
        /* はみ出したテキストを非表示にする */
        text-overflow: ellipsis;
        /* はみ出した部分を「...」で表示 */
    }

    .content-title {
        font-size: 16px;
        /* 文字サイズを小さくする */
        white-space: nowrap;
        /* テキストを一行で表示（折り返しを防ぐ） */
        overflow: hidden;
        /* はみ出したテキストを非表示にする */
        text-overflow: ellipsis;
        /* はみ出した部分を「...」で表示 */
    }
}

/* タブレットやスマホ（1024px以下）のスタイル */
@media screen and (max-width: 1024px) {

    /* 親コンテナのtext-alignは影響しないようにリセット（任意） */
    #header_nav {
        text-align: left;
    }

    /* ulをFlexboxにして、中の要素を中央揃えにする */
    #header_nav ul {
        display: flex;
        justify-content: center;
        /* これが要素を水平方向の中央に配置します */
        flex-wrap: wrap;
        /* 画面が狭い時にボタンが折り返すようにする */
        padding: 0;
        /* ulのデフォルトパディングをリセット */
    }
}

/* 広報みやこんじょタブ */
.pr-miyakonjo-container {
    width: 100%;
    max-width: 800px;
    /* Adjust as needed */
    margin: 0 auto;
    background-color: #fff;
    padding: 0 5px;
    /* border-radius: 8px; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.pr-miyakonjo-list {
    list-style: none;
    /* Remove default list bullets */
    padding: 0;
    margin: 0;
}

.pr-miyakonjo-item {
    display: flex;
    /* Use flexbox for layout */
    align-items: baseline;
    /* Align items at the baseline */
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    /* Light dashed separator */
    position: relative;
    /* Needed for absolute positioning of 'New' mark */
}

.pr-miyakonjo-item:last-child {
    border-bottom: none;
    /* No border for the last item */
}

.pr-miyakonjo-number {
    flex-shrink: 0;
    /* Prevent date from shrinking */
    width: 80px;
    /* Fixed width for the date column */
    /* font-size: 0.9em; */
    color: #666;
    margin-right: 15px;
    /* Space between date and title */
}

.pr-miyakonjo-date {
    flex-shrink: 0;
    /* Prevent date from shrinking */
    width: 120px;
    /* Fixed width for the date column */
    /* font-size: 0.9em; */
    color: #666;
    margin-right: 15px;
    /* Space between date and title */
}

.pr-miyakonjo-title {
    flex-grow: 1;
    /* Allow title to take up remaining space */
    /* font-size: 1em; */
    color: #333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .pr-miyakonjo-item {
        flex-direction: column;
        /* Stack date and title vertically */
        align-items: flex-start;
    }

    .pr-miyakonjo-date {
        width: auto;
        /* Remove fixed width */
        margin-bottom: 5px;
        /* Add space below date */
        margin-right: 0;
    }
}

table.table_green {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

table.table_green tbody th {
    background: #e9faf9;
    text-align: left;
    vertical-align: middle;
    border: solid 1px #778ca3;
    font-weight: bold;
    width: 15%;
    padding: 5px;
}

table.table_green tbody td {
    border: solid 1px #778ca3;
    padding: 5px;
}

/* 出前講座 */
table.demaekouza-table {
    margin: 1em;
    width: 60%;
    border: none;
}

table.demaekouza-table th {
    width: 40%;
}

@media (max-width: 600px) {
    table.demaekouza-table {
        width: 90%;
    }

    table.demaekouza-table th {
        width: 40%;
    }
}

/* 市民ギャラリー */
.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 90%;
}

.item {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-left: 1em;
}

.label {
    white-space: nowrap;
    min-width: 10%;
    flex-shrink: 0;
    padding-right: 4px;
}

.separator {
    flex-shrink: 0;
    padding: 0 4px;
}

.content {
    flex: 1;
    padding-left: 4px;
}

ul.notice-list li {
    list-style-type: disc;
    margin-left: 1.5em;
}