@charset "UTF-8";

/* =========================================
   基本設定
   ========================================= */
body {
  background-color: #DDFFFF;
  font-family: sans-serif;
  color: #000;
  margin: 0;
  padding: 10px;
  font-size: 16px; /* 基本文字サイズ */
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

a {
  text-decoration: underline;
  color: #0000EE;
}

/* 汎用クラス（fontタグの代わり） */
.text-red {
  color: red;
}
.text-bold {
  font-weight: bold;
}

/* =========================================
   レイアウト・ナビゲーション
   ========================================= */
#mainUI {
  max-width: 1200px; /* PCで見やすくするため幅制限（お好みで調整可） */
  margin: 0 auto;   /* 中央寄せ */
}

/* ヘッダー周り */
.top-nav {
  margin-bottom: 15px;
  text-align: center;
  line-height: 1.6;
}
/* 元の <font size=5> 相当 */
.title-large {
  font-size: 1.3em; /* 約24px */
  font-weight: bold;
}
/* 元の <font size=6> 相当 */
.title-xlarge {
  font-size: 1.7em;   /* 約32px */
  font-weight: bold;
}
/* 元の <font size=2> 相当 */
.text-small {
  font-size: 0.8em; /* 約12px */
}

/* サブナビゲーション */
.sub-nav-area {
  text-align: center;
  margin: 10px 0;
  line-height: 1.5;
}
.sub-nav-msg {
  font-size: 18px;
}
.sub-nav-alert {
  font-size: 18px;
  color: red;
}
.sub-nav-status {
  font-size: 22px;
  color: red;
  font-weight: bold;
}

/* =========================================
   各セクションのデザイン
   ========================================= */
/* 概要エリア */
.summary-area {
  margin-bottom: 20px;
  line-height: 2.0;
  padding: 0 10px;
}
.summary-area a {
  font-size: 20px;
  margin-right: 25px; /* リンク同士の間隔 */
  display: inline-block; /* 改行の挙動を安定させる */
}

/* 説明・年別リンクエリア */
.instruction-area {
  margin-bottom: 20px;
  line-height: 2.2;
  padding: 0 10px;
}
.instruction-area a {
  font-size: 18px;
  margin-right: 10px;
}
/* 年号を少し目立たせる */
.year-link {
  font-size: 20px;
  font-weight: bold;
}

/* 改造済みメッセージ */
.txt-instruction {
  text-align: center;
  font-size: 24px;
  color: red;
  margin: 20px 0;
}

/* =========================================
   装飾・フッター
   ========================================= */
/* 二重線・点線（上下の余白もここで調整） */
p.double-bottom {
  border-bottom: 3px double #999;
  margin: 20px 0;
}

p.double-red-bottom {
  border-bottom: 3px double red; /* 初期値#999 */
  margin: 20px 0;
}

hr {
  border: none;
  border-top: 1px solid gray;
  margin: 20px 0;
}

/* フッター */
.footer-area {
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
}
.link-top {
  font-size: 20px;
  margin-right: 20px;
}
.link-portal {
  font-size: 24px;
}
/* =========================================
   スマホ表示時の微調整（さらに使いやすく）
   ========================================= */
@media (max-width: 600px) {
  
  /* リンクをタップしやすくする */
  .summary-area a,
  .instruction-area a {
    display: inline-block; /* 余白を持てるようにする */
    padding: 8px 5px;      /* 指で押せる範囲を広げる（上下8px, 左右5px） */
    margin-bottom: 5px;    /* 下の行との間隔を空ける */
    font-size: 16px;       /* 文字サイズを少し大きく確保 */
    border-bottom: 1px dotted #ccc; /* 薄い線を入れて区切りを明確に */
    text-decoration: none; /* 下線を消してすっきりさせる */
  }

  /* リンクの文字色も少し濃くして見やすく */
  .summary-area a {
    color: #0033cc;
  }
}