@charset "UTF-8";

/* ==========================================================================
   1. 基本設定・共通レイアウト
   ========================================================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.7;
  color: #333;
  background: #fff;
}

/* ヘッダー */
header {
  background: #004098;
  color: #fff;
  padding: 15px 20px;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 1.3rem;
}

/* メインレイアウト（中央寄せ） */
.main-layout {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 40px;
}

/* 各セクション見出し（青い左線） */
.section-title h2 {
  border-left: 5px solid #004098;
  padding-left: 10px;
  font-size: 1.15rem;
  color: #004098;
  margin: 0 0 15px 0;
}

/* JavaScript無効時の警告表示 */
.noscript-error {
  background-color: #fff3f3;
  border: 2px solid #d32f2f;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 8px;
  text-align: center;
}

.noscript-error p {
  margin: 0;
  color: #d32f2f;
}

/* ==========================================================================
   2. 各セクションのデザイン
   ========================================================================== */

/* 概要セクション */
.overview-section {
  background-color: #fcfcfc;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px 30px;
  margin-bottom: 35px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.overview-content {
  font-size: 1rem;
  color: #333;
}

/* 使い方ステップ（STEP 1～3） */
.usage-section {
  background: #eef7ff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 35px;
  border: 1px solid #d0e4f5;
}

.steps {
  display: flex;
  gap: 15px;
}

.step-item {
  flex: 1;
  background: #fff;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #d0e4f5;
  text-align: center;
  font-size: 0.85rem;
}

.step-num {
  display: block;
  font-weight: bold;
  color: #004098;
  margin-bottom: 3px;
}

/* 利用規約本文ボックス */
.terms-section {
  width: 100%;
  margin-bottom: 40px;
}

.terms-static-box {
  background: #fafafa;
  padding: 40px 60px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  color: #444;
}

.terms-static-box h3 {
  margin-top: 8px;
  margin-bottom: 2px;
  font-size: 0.95rem;
  padding-bottom: 2px;
  border-bottom: 2px solid #004098;
  color: #333;
}

/* 利用規約内のテキストインデント（字下げ）設定 */
.terms-static-box h3 + p {
    margin-top: 0;
    margin-bottom: 4px;
    padding-left: 1.2rem;
}

.terms-static-box .overview-list {
    margin-top: 0;
    margin-bottom: 4px;
    padding-left: 2.8rem;
}

.terms-static-box ol.overview-list {
    list-style-type: decimal !important;
}

.terms-static-box ul.overview-list {
    list-style-type: disc !important;
}

.terms-static-box .overview-list li {
    margin-bottom: 0 !important;
    padding-top: 1px;
    padding-bottom: 1px;
    line-height: 1.3;
}

/* 署名エリア */
.terms-signature {
  text-align: right;
  margin-top: 30px;
  padding-right: 10px;
}

.terms-signature p {
  margin: 0;
  line-height: 1.4;
  font-size: 0.95rem;
}

/* ==========================================================================
   3. アクションエリア（同意・地図選択テーブル）
   ========================================================================== */

/* 同意チェックボックスエリア */
.agreement-section {
  margin-bottom: 30px;
}

.agreement-box {
  background: #fff8f0;
  padding: 20px;
  border: 2px solid #dfadad;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 64, 152, 0.1);
  transition: all 0.3s;
}

#portalpage_btnagree {
  transform: scale(1.5);
  vertical-align: middle;
  cursor: pointer;
  accent-color: #004098;
}

.agreement-label {
  font-weight: bold;
  color: #d32f2f;
  margin-left: 10px;
  cursor: pointer;
  font-size: 1.05rem;
  transition: color 0.3s;
}

#portalpage_btnagree:checked + .agreement-label {
  color: #004098;
}

.agreement-box:has(#portalpage_btnagree:checked) {
  border-color: #004098;
  background-color: #e1f0ff;
}

/* タイトルとマニュアルリンクの配置 */
.title-with-link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* 操作マニュアルボタン */
.manual-btn {
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  color: #2a6ebb;
  border: 1px solid #2a6ebb;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.manual-btn:hover {
  background-color: #eff6fc;
  color: #1a4e8a;
  border-color: #1a4e8a;
}

/* 同意前の非表示メッセージ */
#lock-message {
  padding: 30px;
  text-align: center;
  background: #f5f5f5;
  color: #888;
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* 地図選択テーブルの基本構造 */
.tbl_selectmap {
  width: 100%;
  border: 1px solid #ccc;
  overflow-x: auto;
  margin-top: 10px;
}

.tbl_selectmap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 450px;
}

.tbl_selectmap th {
  background: #2008b1;
  color: #FFFFFF;
  border: 1px solid #ccc;
  padding: 12px;
  font-size: 0.9rem;
  position: sticky;
  top: 0;
}

.tbl_selectmap td {
  background: #fff;
  border: 1px solid #ccc;
  padding: 12px;
  text-align: center;
  font-size: 0.95rem;
}

/* カテゴリセル（航空写真、ハザードマップ等） */
.tbl_selectmap td[rowspan] {
  vertical-align: middle;
  background-color: #fcfcfc;
  padding: 20px 10px;
}

/* ボタンが配置されているセルの余白調整 */
.tbl_selectmap td:has(> .btnShow),
.tbl_selectmap td.stack-cell {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* --- ハザードマップ等のボタンセル間の区切り線を消すロジック --- */
/* 2行目以降（stack-cell）の上線を消す */
.tbl_selectmap td.stack-cell {
  border-top: none !important;
}

/* 最終行以外のボタンセルの下線を消すことで、ボタン間の線を繋げる */
.tbl_selectmap tr:not(:last-child) td:last-child {
  border-bottom: none;
}

/* 地図起動ボタンのデザイン */
.btnShow {
  display: inline-block;
  width: 160px;
  max-width: 100%;
  background: #7fbfff;
  color: #000;
  border: none;
  padding: 10px 0;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
  letter-spacing: 0.1em;
}

.btnShow:hover {
  background: #66a3ff;
  opacity: 0.9;
}

/* 字間の広いボタン（「表示」など） */
.btn-spread {
  letter-spacing: 1.5em;
  text-indent: 1.5em;
}

.text-left {
  text-align: left !important;
}

/* 地図出典情報のリンクエリア */
.source-info {
  margin-top: 12px;
  padding-right: 5px;
}

.source-info p {
  margin: 0;
  font-size: 0.85rem; /* 本文より少し小さくして補足情報らしく */
  color: #666;
}

.source-info a {
  color: #004098; /* サイトのテーマカラーに合わせる */
  text-decoration: underline; /* リンクであることを強調 */
  font-weight: bold;
}

.source-info a:hover {
  text-decoration: none; /* ホバー時に線を消すなどの視覚効果 */
  color: #2a6ebb;
}

/* ==========================================================================
   4. お問い合わせ・フッター
   ========================================================================== */

.contact-section {
  margin-top: 40px;
  margin-bottom: 40px;
}

.contact-box {
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 25px;
}

.contact-item h3 {
  display: inline-block;
  border-bottom: 2px solid #004098;
  padding-bottom: 2px;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #333;
}

.contact-item p {
  margin: 5px 0;
  font-size: 0.9rem;
  color: #444;
}

footer {
  text-align: center;
  padding: 40px;
  font-size: 0.8rem;
  color: #aaa;
  border-top: 1px solid #eee;
}

/* ==========================================================================
   5. レスポンシブ
   ========================================================================== */

@media (max-width: 850px) {
  .main-layout {
    padding: 15px;
  }
  .terms-static-box {
    padding: 25px 20px;
  }
  .steps {
    flex-direction: column;
    gap: 8px;
  }
  .step-item {
    text-align: left;
    padding: 10px;
  }
  .step-num {
    display: inline;
    margin-right: 5px;
  }
  .agreement-label {
    font-size: 1rem;
  }
  #portalpage_btnagree {
    transform: scale(1.3);
  }
  .contact-box {
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .title-with-link {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ▼▼ ここから追加：スマホ画面専用のテーブル・ボタン調整 ▼▼ */
  
  /* 1. 表の最低幅（450px）を解除し、スマホの画面幅（100%）に収める */
  .tbl_selectmap table {
    min-width: 100%;
  }

  /* 2. セルの余白（padding）を限界まで詰め、文字を少し小さくする */
  .tbl_selectmap th,
  .tbl_selectmap td {
    padding: 8px 4px;
    font-size: 0.85rem;
  }
  
  /* 左側の結合セル（カテゴリ名）の余白も詰める */
  .tbl_selectmap td[rowspan] {
    padding: 10px 4px;
    font-size: 0.85rem;
  }

  /* 3. ボタンの幅をスマホに合わせて縮小する */
  .btnShow {
    width: 110px;       /* PCの160pxから110pxに縮小 */
    padding: 8px 0;
    font-size: 0.8rem;
    letter-spacing: 0;  /* 全体的な文字間隔の広がりをリセット */
  }

  /* 4. 短い単語用ボタン（表示・洪水など）の広がりすぎをスマホ用に縮小 */
  .btn-spread {
    letter-spacing: 0.5em;
    text-indent: 0.5em;
  }
}