/* LAY-EL.NET index.css - レトロモダンリニューアル用 */
/* 既存の lay-el_020610.css の後に読み込む想定 */
 
/* ============================================
   ベース・リセット
   ============================================ */
 
*, *::before, *::after {
  box-sizing: border-box;
}
 
html {
  font-size: 16px;
}
 
body {
  margin: 0;
  padding: 0;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  line-height: 1.7;
  background: #FFFFFF;
  color: #444;
}
 
/* ============================================
   ページ全体のコンテナ
   ============================================ */
 
.page-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px;
}
 
/* ============================================
   ナビゲーションバー（旧 Link_bar TABLE）
   ============================================ */
 
.site-nav {
  background: #fff;
  border-bottom: 2px solid #B0E0F0;
  position: sticky;
  top: 0;
  z-index: 100;
}
 
.site-nav .page-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
}
 
.site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  color: #44AA88;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-right: 1px solid #e0f0f0;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
 
.site-nav a:visited {
  color: #5BA;
}
 
.site-nav a:hover {
  background: #B0E0F0;
  color: #222;
  text-decoration: none;
}
 
/* ============================================
   ディレクトリバー（旧 Dir_bar）
   ============================================ */
 
.dir-bar {
  background: #B0E0F0;
  padding: 6px 16px;
  font-size: 0.82rem;
  color: #444;
}
 
.dir-bar a.nocolor {
  color: #080;
}
 
/* ============================================
   更新日バー（旧 Date_bar）
   ============================================ */
 
.date-bar {
  text-align: right;
  font-size: 0.78rem;
  color: #888;
  padding: 4px 0 8px;
}
 
.date-bar .care {
  color: #e05050;
}
 
/* ============================================
   ヘッダー
   ============================================ */
 
.site-header {
  padding: 32px 0 16px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 24px;
}
 
.site-header h1 {
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  color: #222;
  margin: 0;
  letter-spacing: 0.12em;
  font-weight: normal;
  /* サイトタイトルのアクセント：水色下線 */
  border-bottom: 3px solid #B0E0F0;
  display: inline-block;
  padding-bottom: 6px;
}
 
/* ============================================
   フロート右カラム（SNS等）
   ============================================ */
 
.side-float {
  float: right;
  max-width: 500px;
  width: 100%;
  margin: 0 0 16px 24px;
}
 
@media (max-width: 600px) {
  .side-float {
    float: none;
    max-width: 100%;
    margin: 0 0 16px 0;
  }
}
 
/* ============================================
   メインコンテンツ
   ============================================ */
 
.site-main {
  padding-bottom: 40px;
}
 
/* ============================================
   本文段落
   ============================================ */
 
.site-main p {
  margin: 12px max(12px, 4%);
  line-height: 1.85;
  font-size: 0.95rem;
}
 
/* ============================================
   見出し（H3・H4）：既存スタイルを継承しつつレスポンシブ化
   ============================================ */
 
.site-main h3 {
  color: #222;
  font-size: 1rem;
  font-weight: bold;
  margin: 32px max(8px, 2%) 12px;
  padding: 6px 12px;
  border-left: 6px solid #44AA88;
  border-bottom: 1px solid #ccc;
  background: #f8fdfc;
}
 
.site-main h4 {
  color: #555;
  font-size: 0.92rem;
  font-weight: bold;
  margin: 24px max(8px, 3%) 8px;
  padding-left: 10px;
  border-left: 5px solid #B0E0F0;
}
 
/* ============================================
   リスト
   ============================================ */
 
.site-main ul {
  margin: 8px max(16px, 5%) 16px;
  padding-left: 1.2em;
  list-style-type: disc;
  list-style-image: none; /* button.gif の fallback */
}
 
.site-main ul li {
  margin: 5px 0;
  font-size: 0.93rem;
  line-height: 1.7;
}
 
/* 通常のリンクのみに色を適用し、deadクラスを持つリンクは除外する */
.site-main ul li a:not(.dead) {
  color: #44AA88;
}

.site-main ul li a:not(.dead):visited {
  color: #5BA;
}

.site-main ul li a:not(.dead):hover {
  color: #888;
  text-decoration: underline;
}

/* .deadクラス専用の指定を追加（念のため） */
.site-main ul li a.dead {
  color: #CCC;
}
.site-main ul li a.dead:hover {
  color: #AAA; /* ホバー時は少し濃くする等の調整が可能 */
  text-decoration: none;
}

/* dead リンクは既存 .dead クラスを継承（#CCC）*/
 
/* ============================================
   キャラクター名リスト
   ============================================ */
 
.site-main ul li .char-arrow {
  color: #aaa;
  margin: 0 4px;
  font-size: 0.85em;
}
 
/* ============================================
   フッター（旧 Bottom_bar + Dir_bar + ADDRESS）
   ============================================ */
 
.site-footer {
  border-top: 2px solid #B0E0F0;
  margin-top: 40px;
  padding-top: 0;
}
 
.footer-nav {
  text-align: center;
  padding: 10px 0;
  font-size: 0.85rem;
}
 
.footer-nav a {
  color: #44AA88;
  padding: 0 8px;
}
 
.footer-dir {
  background: #B0E0F0;
  padding: 6px 16px;
  font-size: 0.82rem;
  color: #444;
}
 
.footer-dir a.nocolor {
  color: #080;
}
 
.site-address {
  margin: 8px 0 0 0;
  font-style: normal;
  font-size: 0.82rem;
  text-align: right;
  color: #888;
  padding: 8px 16px 16px;
}
 
/* ============================================
   ユーティリティ
   ============================================ */
 
.nodisplay {
  display: none;
}
 
.dead {
  color: #CCC;
}
 
a.nocolor {
  color: #080;
}
 
/* ============================================
   レスポンシブ（スマホ）
   ============================================ */
 
@media (max-width: 480px) {
  .site-nav a {
    padding: 10px 10px;
    font-size: 0.8rem;
  }
 
  .site-main p {
    margin: 10px 8px;
  }
 
  .site-main ul {
    margin-left: 8px;
    margin-right: 4px;
  }
 
  .site-main h3 {
    margin-left: 0;
    margin-right: 0;
  }
 
  .site-main h4 {
    margin-left: 0;
  }
}