@charset "utf-8";

/* --- 共通設定 --- */
*, *:before, *:after {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #333;
}

/* --- メインコンテナ（1270pxで統一） --- */
.container, .main-container {
    max-width: 1270px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    text-align: center; /* 中央揃えを基本にする */
}

/* --- ナビゲーション（sithouson.html用） --- */
.custom-navbar {
    background: #f8f8f8;
    border-bottom: 1px solid #e7e7e7;
    padding: 10px 0;
    margin-bottom: 20px;
}
.nav-container {
    max-width: 1270px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}
.nav-brand {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.8rem;
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.nav-links li a {
    text-decoration: none;
    color: #333;
    padding: 8px 15px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    font-size: 1.4rem;
    display: block;
}
.nav-links li a:hover, .nav-links li a.active {
    background: #eee;
    border-color: #999;
}

/* --- イメージマップ（地図エリア） --- */
.well-custom, .map-wrapper {
    background: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 30px;
    max-width: 100%; /* 親要素をはみ出さない */
}
/* マップ画像を100%表示にする */
#kennankasen {
    width: 100% !important;
    max-width: 1270px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- 市町村ボタン（sithouson.html用） --- */
.town-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 30px 0;
}
.town-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background-color: #337ab7;
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.6rem;
}
.town-btn:hover {
    background-color: #286090;
    text-decoration: none;
}

/* --- 下部切り替えボタン（オレンジと水色の演出付き） --- */
.bottom-nav, .btn-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
}

/* 共通のボタン土台 */
.btn-flat, .btn-flat2 {
    position: relative;
    display: inline-block;
    padding: 1.5rem 4rem;
    color: #fff !important;
    background: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.8rem;
    overflow: hidden;
    z-index: 1;
}
.btn-flat span, .btn-flat2 span {
    position: relative;
    z-index: 2;
}
/* オレンジの円 */
.btn-flat:before {
    position: absolute; top: 0; left: 0; width: 100px; height: 100px; content: '';
    transition: all .5s ease-in-out; transform: translateX(-80%) translateY(-25px);
    border-radius: 50%; background: #eb6100; z-index: 1;
}
/* 水色の円 */
.btn-flat2:before {
    position: absolute; top: 0; left: 0; width: 100px; height: 100px; content: '';
    transition: all .5s ease-in-out; transform: translateX(-80%) translateY(-25px);
    border-radius: 50%; background: #00b7ee; z-index: 1;
}
/* ホバーで円が広がる */
.btn-flat:hover:before, .btn-flat2:hover:before {
    width: 500px; height: 500px; transform: translateX(-1%) translateY(-175px);
}

/* --- カメラ画像グリッド（一覧ページ用） --- */
.camera-grid {
    display: grid;
    /* ★ 145px を 220px に変更することで、横5枚ベースになります ★ */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    /* 余白も少し広げると（15px → 20px）さらにゆったり見えます */
    gap: 20px; 
    margin-bottom: 30px;
}

/* --- (以下、スマホ対応などの予備設定を追加しておくと安心です) --- */

@media (max-width: 768px) {
    .camera-grid {
        /* スマホでは220pxだと1列になってしまう可能性があるので、2列を強制します */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
.camera-item {
    font-size: 1.2rem;
    line-height: 1.4;
}
.camera-item .cam-location {
    font-weight: normal;
    font-size: 1.1em;
    color: #d9534f;
    text-decoration: underline;
    display: block;
    margin-top: 2px;
}
.camera-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #0E0E0E;
    margin-bottom: 8px;
    border: 1px solid #ddd;
    overflow: hidden;
}
.camera-img-box img {
    width: 100%; height: 100%; object-fit: contain;
}

/* --- フッター --- */
.footer-info {
    padding: 40px 0 60px;
}
.footer-info h4 {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* style2.css に追加（詳細ページ用） */

/* ページ見出しエリア */
.page-header {
    margin: 20px 0;
}
.river-title {
    font-size: 2.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.notice {
    font-size: 1.4rem;
    color: #666;
}

/* 詳細ページの地図画像 */
.submap-wrapper {
    margin: 20px 0;
    text-align: center;
}
.submap-img {
    max-width: 100%; /* 画面幅を超えない */
    height: auto;    /* 高さは自動調整 */
    border: 1px solid #ddd;
    padding: 5px;
    background: #fff;
}

/* 河川メニューボタンの現在地 */
.town-btn.active {
    background-color: #d9534f; /* 阿武隈川ボタンを赤に */
    border-color: #d9534f;
}

/* 久慈川：地図と右側3枚のレイアウト */
.kuji-top-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
    justify-content: center; /* 全体を中央寄せ */
}

.kuji-map {
    /* ★地図のサイズを少し小さめに固定（ボケ防止） */
    flex: 0 0 550px; 
}

.kuji-map img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

/* 右側の1列エリア */
.kuji-side-grid {
    /* 下の5列グリッドの1枚分と同じ幅に固定 */
    flex: 0 0 240px; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* スマホでは地図を上、画像を下に並べる */
@media (max-width: 900px) {
    .kuji-top-layout {
        flex-direction: column;
        align-items: center;
    }
    .kuji-map {
        flex: 0 0 auto;
        width: 100%;
    }
    .kuji-side-grid {
        flex: 0 0 auto;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}