/* 基本設定とカラーパレット */
:root {
    --bs-blue: #3a579c;
    --bs-red: #C30D23;
    --custom-blue-light: #7189c0;

    --custom-blue-dark: #0a58ca;
    --custom-bg-light: #f8f9fa;
}


.btn-bs-blue{
    color: white;
    background-color: var(--bs-blue);
}


/* 都道府県メニューセクションのスタイル */
    #prefecture-menu-section {
        position: relative;
        overflow: hidden; 
        background: linear-gradient(180deg, var(--bs-blue) 0%, #5e74b0 50%, #aab8da 100%);
    }

      /* PC表示用のレイアウトコンテナ */
      #prefecture-menu-section .prefecture-layout-pc {
          display: flex;
          min-height: 420px; /* コンパクト化: 最小高さを調整 */
      }

      /* PC表示時の地図背景部分 */
      #prefecture-menu-section .prefecture-map-bg {
        color: #FFF;
        position: relative; /* 子要素（::before）を配置する基準にする */
        z-index: 1; /* コンテンツが背景より手前に来るように念のため設定 */
        /* 背景関連のプロパティはこちらでは不要になるので削除 */
    }
    
    #prefecture-menu-section .prefecture-map-bg::before {
        content: ''; /* 疑似要素を表示するために必須 */
        background-image: url('/posting/pripos/column/assets/img/common/japan.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        
        position: absolute; /* 親要素を基準に配置 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        opacity: 0.3; /* ← ここで透明度を調整します (0.0〜1.0) */
        z-index: -1;  /* 背景として親要素の背面に配置する */
    }

      /* PC表示時のメニューブロック群 */
      #prefecture-menu-section .prefecture-menu-blocks {
          padding: 1.5rem; /* コンパクト化: パディングを調整 */
          display: flex;
          align-items: center; 
      }

      
      #prefecture-menu-section .prefecture-menu-blocks .container {
           width: 100%;
      }

      body#index header#header {
        display: none;
      }
    
          /* エリア別情報セクションのスタイル */
          #prefecture-menu-section {
              padding-top: 2.5rem;
              padding-bottom: 2.5rem;
          }
    
          .area-block {
            background: linear-gradient(180deg, #e7f0ff 0%, #f0f4ff 75%, #ffffff 100%);
              padding: 1rem 1.5rem 0.5rem 1.5rem;
              border-radius: 0.5rem;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
              height: 100%;
          }
            .area-block h5 {
              color: var(--bs-blue);
              /* Bootstrapのプライマリカラー */
              font-weight: 600;
          }
    
          /* 都道府県リンクのリストスタイル */
          .area-links-list li {
              padding-left: 0.25rem;
              padding-right: 0.25rem;
          }
    
          /* 都道府県リンクのスタイル */
          .area-links-list a, .list-group-flush a {
              display: flex;
              align-items: center;
              padding: 0.3rem 0.6rem;
              margin-bottom: 0.5rem;
              border-radius: 0.25rem;
              background-color: #f8f9fa;
              border: 1px solid var(--bs-blue);
              color: var(--bs-blue);
              text-decoration: none;
              transition: all 0.2s ease-in-out;
              font-size: 0.9rem;
          }


        /* 部数表 */
          table.table-posting tr th {
            color: white;
            text-align: center;
            background-color: var(--bs-blue);
        }
        table.table-posting tr td {
            text-align: center;
            font-size: 0.9rem;
            width: 15%;
        }
        table.table-posting tr td.searchAddress {
            text-align: left!important;
            white-space: nowrap;
            width: auto;
            
        }
          table.table-posting tr td.searchAddress a {
            color: var(--bs-blue);
            font-weight: bold;
            text-decoration: none;
            
        }
                  .area-links-list a i,.list-group-item a i, table.table-posting tr td.searchAddress a i {
                      color: var(--bs-red);
                      margin-right: 2px;
                  }

          .area-links-list a:hover {
              background-color: #e2e6ea;
              border-color: #dae0e5;
              color: #0d6efd;
              transform: translateX(4px);
          }
    
          .area-links-list a svg {
              margin-right: 0.5rem;
              flex-shrink: 0;
              width: 1em;
              height: 1em;
          }
    
          /* SP用アコーディオン内のスタイル */
          #prefecture-menu-section .accordion-item {
              background-color: rgba(255, 255, 255, 0.75);
              border-radius: 0.25rem;
              margin-bottom: 0.75rem;
              border: none;
          }
    
          #prefecture-menu-section .accordion-button {
              background-color: rgba(255, 255, 255, 0.75);
              font-size: 1rem;
          }
    
          #prefecture-menu-section .accordion-body .list-group-item {
              padding: 0;
              border: 0;
              background: transparent;
          }
    
          #area-municipalities-section {
              padding-top: 2.5rem;
              padding-bottom: 2.5rem;
              background-color: #E7ECF7;
          }
    
          #area-municipalities-section .card-header {
              background-color: #007bff;
              color: white;
              padding-top: 0.75rem;
              padding-bottom: 0.75rem;
          }
    
          #area-municipalities-section .section-title {
              font-size: 1.25rem;
              margin-bottom: 0;
              font-weight: 500;
          }
    
          #area-municipalities-section .list-unstyled {
              padding-left: 0;
              list-style: none;
          }
    
          #area-municipalities-section .list-unstyled a {
              color: #212529;
              text-decoration: none;
              display: block;
              padding: 0.3rem 0.55rem;
              font-size: 0.78rem;
              line-height: 1.4;
              background-color: #fff;
              border: 1px solid #dee2e6;
              border-radius: 0.25rem;
              margin-bottom: 0.5rem;
              transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }
    
          #area-municipalities-section .list-unstyled a:hover {
              color: #0056b3;
              background-color: #f8f9fa;
              border-color: #007bff;
              box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          }


        /* 背景アニメーションセクション */
        .animation-section {
            position: relative;
            width: 100%;
            height: 100vh; /* セクションの高さを調整 */
            min-height: 450px;
            max-height: 900px;
            background-image: url('/posting/pripos/column/assets/img/common/bg_town.jpg');
            background-color: #FFF; /* 背景画像の上部に表示される空の色 */
            background-size: 100% auto; /* 横幅にフィットさせ、高さは自動 */
            background-position: center bottom; /* 画像をセクションの下部に配置 */
            background-repeat: no-repeat; /* 画像を繰り返さない */
            overflow: hidden; 
            display: flex;
            flex-direction: column; /* 子要素を縦に並べる */
        }

        /* 雲の基本アニメーション */
        .cloud {
            position: absolute;
            opacity: 0.8; 
            animation: moveClouds linear infinite;
            will-change: transform; 
        }

        @keyframes moveClouds {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(275vw, -150vw);
            }
        }
        
        /* アニメーションの上に表示するコンテンツ */
        .animation-content {
            position: relative; 
            z-index: 10;
            flex-grow: 1; /* 残りの高さをすべて使用 */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /* ヒーローセクションのメインコンテンツのレイアウト */
        .hero-main-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .hero-text {
            text-align: left;
        }



        h4.lead{
            color: #FFF;
            background-color: var(--bs-blue);
            display: inline;
            line-height: 2.2;
            padding: 2px 0;
        }

        /* SP表示時の背景（全体にかける） */
        @media (max-width: 991.98px) {
            h4.lead {
                font-size: 90%;
                line-height: 1.2;
            }
        }



        /* バナーのデザイン */
        .banner-card {
            /* 背景画像と明るくするための白いオーバーレイを設定 */
            background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url('/posting/pripos/column/assets/img/common/pripos_map.png');
            background-size: cover;
            background-position: center;
            
            border: 1px solid #ddd;
            border-top: 5px solid #C30D23;
            border-radius: 0.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            color: #212529;
            text-shadow: none;
            transition: all 0.3s ease;
            width: 100%;
            max-width: 320px;
            margin: auto;
        }
        .banner a:hover .banner-card {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .banner a {
            text-decoration: none;
        }
        .banner-card .card-body {
            padding: 1rem;
        }
        .banner-card .card-title {
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--bs-red);
        }
        .banner-card .card-text {
            font-size: 0.9rem;
            line-height: 1.6;
        }


        /* ボタン */
        .btn-bs-blue {
            background-color: var(--bs-blue);
            border-color: var(--bs-blue);
            font-size: 0.9rem;
            color: white;
            margin-top: 0.5rem;
            font-weight: bold;
            border-radius: 50rem;
            padding: 0.5rem 1.5rem;
            transition: all 0.2s ease-in-out;
        }
        .btn-bs-blue:hover {
            background-color: #0a58ca;
            border-color: #0a58ca;
            color: white;
        }
        .btn-custom-red {
            background-color: var(--bs-red);
            border-color: var(--bs-red);
            font-size: 0.9rem;
            color: white;
            margin-top: 0.5rem;
            font-weight: bold;
            border-radius: 50rem;
            padding: 0.5rem 1.5rem;
            transition: all 0.2s ease-in-out;
        }
        .btn-custom-red:hover {
            background-color: #a30b1e;
            border-color: #a30b1e;
            color: white;
        }

                
        /* スライダーコンテナ */
        .slider-wrapper {
            width: 100%;
            margin-top: auto; /* コンテンツをセクションの下部に配置 */
            padding-bottom: 0;
        }

        /* スライダーのタイトル */
        .slider-title {
            color: white;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        }

        /* スライダーのカスタマイズ */
        .my-slider .slick-slide {
            transition: all 0.3s ease-in-out;
            transform: scale(0.9); /* 中央以外のスライドを小さく */
            opacity: 0.9; /* 中央以外のスライドを半透明に */
        }

        .my-slider .slick-center {
            transform: scale(1); /* 中央のスライドは基準サイズ */
            opacity: 1;
            
        }

        .my-slider .slick-center .slider-card {
            transform: scale(1.1); /* 中央のカードを110%に拡大 */
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            border: 5px var(--custom-blue-light) solid;
        }

        .slider-item a {
            text-decoration: none; /* リンクの下線を削除 */
            color: inherit; /* 親要素の色を継承 */
        }
        .slider-item a:hover {
            text-decoration: none; /* ホバー時も下線を表示しない */
        }
        .slider-item a:hover .slider-card {
             box-shadow: 0 10px 40px rgba(0, 123, 255, 0.4); /* ホバー時に影を強調 */
        }

        .slider-card {
            background: rgba(255, 255, 255, 1);
            backdrop-filter: blur(5px);
            border: none;
            transition: all 0.3s ease-in-out;
            margin: 0 10px;
        }
        .slider-card .card-body {
            padding: 0;
        }

        .card-title {
            color: var(--bs-blue);
            font-weight: bold;
        }
        .slider-card .card-title {
            font-size: 1.3rem;
        }

        .my-slider .slick-dots li button:before {
            color: white;
            opacity: 0.5;
        }
        .my-slider .slick-dots li.slick-active button:before {
            opacity: 1;
        }

        .my-slider .slick-prev, .my-slider .slick-next {
            z-index: 20;
        }
        
        .my-slider .slick-prev {
            left: 0;/* 矢印補正 */
        }
        .my-slider .slick-next {
            right: 30px;/* 矢印補正 */
        }
        .my-slider .slick-prev:before, .my-slider .slick-next:before {
            color: var(--bs-red); 
            font-size: 50px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }
        .my-slider .slick-list {
            padding-top: 50px !important; /* 拡大したスライドが見切れないようにパディング */
            padding-bottom: 50px !important;
        }









/* ============== ニュース ============== */
/*- リセット -*/
#news_top .btn,
#news_global_top .btn,
#news_detail .btn,
#contact .btn {
    width: auto;
}

#news_top nav,
#news_global_top nav,
#news_detail nav {
    position: relative !important;
    background: none;
}


/* お知らせリスト スタイル */
.news-list-item .date {
    color: #6c757d;
    white-space: nowrap;
}

.news-list-item .title {
    color: #007bff;
    text-decoration: none;
}

.news-list-item .title:hover {
    text-decoration: underline;
}

/* カテゴリーラベル共通 */
.label-link {
    color: inherit;
    text-decoration: none;
}

.label-link:hover {
    color: inherit;
    text-decoration: none;
}

.badge-ygh {
    background-color: #007bff;
    color: white;
}

.badge-ogh {
    background-color: #28a745;
    color: white;
}

.badge-global {
    background-color: #ffc107;
    color: #212529;
}

/* カードスタイル */
.news-card .card-title a {
    color: #212529;
    /* カードタイトルの色 */
    text-decoration: none;
}

.news-card .card-title a:hover {
    color: #007bff;
    /* ホバー時の色 */
    text-decoration: underline;
}

.news-card .card-img-top {
    aspect-ratio: 16 / 9;
    /* 画像のアスペクト比を維持 */
    object-fit: cover;
    /* 画像がコンテナに合わせてトリミングされる */
}

.news-card.h-100 {
    display: flex;
    flex-direction: column;
}

.news-card .card-body {
    flex-grow: 1;
    /* 内容が少なくても高さを揃える */
}


/* スマホ表示(md未満)での調整 */
@media (max-width: 767.98px) {

    /* リスト項目の調整 */
    .news-list-item .row>div {
        flex-basis: auto;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
        padding-right: 0 !important;
    }

    .news-list-item .row>div:last-child {
        margin-bottom: 0;
    }

    .news-list-item .date {
        white-space: normal;
    }

    /* カードはmd未満で1列表示になる (Bootstrap標準) */
}



/* 記事本文のスタイル例 */
.article-body h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.article-body p {
    line-height: 1.8;
    margin-bottom: 1rem;
}

.article-body ul {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

/* ページネーションボタン間のスペース */
.article-pagination a {
    margin: 0 0.5rem;
    /* 左右に少し余白 */
}







.area-section {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 400px;
    /* background-image: url(/posting/pripos/column/assets/img/common/bg_area.jpg); */
    background-color: #3a579c;
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #FFF;
}

.area-section .breadcrumb .breadcrumb-item, .area-section .breadcrumb a {
    color: #FFF;
}



.custom-border {
    border: 3px solid #3a579c !important;
    border-radius: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-border:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(58, 87, 156, 0.2);
}

.underline {
    width: 100%;
    height: 3px;
    background-color: #C30D23;
    border-radius: 2px; }




    .cta-custom {
        background: linear-gradient(135deg, #3a579c, #2e3f78);
        color: #ffffff;
        position: relative;
        overflow: hidden;
      }
      .cta-custom strong {
        font-size: 120%;
      }
      .cta-custom .btn-outline-light:hover {
        background-color: #C30D23;
        border-color: #C30D23;
        color: #fff;
      }


      .area-section-light {
        background-color: #e2e1e8;
        position: relative;
        overflow: hidden;
      }
      
      /* 背景画像を下に固定配置 */
      .bg-image-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px; /* 好みに応じて調整 */
        background-image: url('/posting/pripos/column/assets/img/common/bg_area-characteristics.jpg');
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        opacity: 0.3;
        z-index: 1;
        pointer-events: none;
      }
      
      /* 半透明カード */
      .area-card-glass {
        background-color: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 1rem;
        position: relative;
        z-index: 2;
      }

/* ニュース */
.news-section {
    position: relative;
    overflow: hidden;
    background-color: #FFF;
    color: var(--bs-blue);
  }
  
  .news-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/posting/pripos/column/assets/img/common/bg_town.jpg);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0.25; /* ←ここで明るく・薄くする */
    z-index: 1;
    pointer-events: none;
  }
  
  /* コンテンツを上に重ねる */
  .news-section > .container {
    position: relative;
    z-index: 2;
  }


  #footer {
      position: relative;
      background-image: url(/posting/pripos/column/assets/img/common/bg_area.jpg);
      background-color: #3a579c;
      background-size: 100% auto;
      background-position: center bottom;
      background-repeat: no-repeat;
      overflow: hidden; }



a#colorchange {
    position: fixed;
    top: 0;
    right: 10px;
    padding: 10px 20px;
    font-weight: bold;
    z-index: 10000;
}