@charset "UTF-8";
/* ============================================================
   site.css — かるばどすほふ 共通スタイル (試作 v0.1)
   構成:
   [A] 等価レイヤー: 各ページ埋め込み<style>の共通部を統合・清書したもの
       (タイポ修正: font-size:smallm→small / 旧box→flex / 壊れた1220px指定)
   [B] 現代化レイヤー: 紙面・タイポグラフィ・メニューの今風化
       (紫 #9933cc のアイデンティティは維持)
   ============================================================ */

:root {
  --accent:        #9933cc;   /* サイトの紫 */
  --accent-deep:   #7a29a3;
  --accent-pale:   #f3e8fb;   /* h3帯などの淡い紫 */
  --band:          #EEAAFF;   /* 旧h3帯色(参照用に残置) */
  --ink:           #222;
  --ink-sub:       #555;
  --paper:         #ffffff;   /* 本文の紙面 */
  --desk:          #efecf3;   /* 紙面の外側 */
  --cell:          #f1eff4;   /* 表セルの地 */
}

/* ---------- [B] 紙面と基本タイポグラフィ ---------- */
html {
  background: var(--desk) url(BACKS/back001.gif);   /* 恒例のボトルは紙面の外に残す */
}
body {
  background: var(--paper);
  color: var(--ink);
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 clamp(6px, 3vw, 40px) 3em;
  font-family: system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;                 /* 旧: 150% */
  overflow-y: auto;                 /* 旧: hidden→scroll の重ね書きを整理 */
  box-shadow: 0 0 24px rgba(60, 20, 90, .08);
}
a         { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover   { color: var(--accent); }
::selection { background: var(--accent-pale); }
img       { max-width: 100%; height: auto; border-radius: 3px; }

/* ---------- [A] 本文まわり(等価+微修正) ---------- */
ul.doc    { margin-left: 50px; }
li        { font-size: small; }
li.Normal { font-size: medium; }

p {
  text-align: left;
  margin-left: 6%;
  margin-right: 6%;
  max-width: 46em;                  /* 現代化: 長すぎる行長の上限 */
}
p.comment      { margin-left: 10%; margin-right: 10%; color: var(--ink-sub); }
p.commentRight { text-align: right; margin-left: 16%; margin-right: 6%; }

/* 旧 display:box(初期flexbox)の現代化 */
div.box  { display: flex; }
div.col1 { text-align: left;   font-weight: bold; font-size: small; width: 35%; }
div.col2 { text-align: center; font-weight: bold; font-size: small; width: 30%; }  /* 旧: smallm */
div.col3 { text-align: right;  font-weight: bold; font-size: small; width: 35%; }

/* ---------- [A/B] 表 ---------- */
td {
  background-color: var(--cell);    /* 旧: #EEEEEE */
  text-align: center;
  font-size: small;
  padding: 3px 8px;
}
td.c, td.cs   { background-color: var(--cell); text-align: center; font-size: small; width: 23px; }  /* 旧: width:=23px */
td.cs         { font-weight: bold; }
td.csglay     { background-color: var(--cell); text-align: center; font-size: small; width: 23px; font-weight: bold; color: #999; }
td.box        { border: solid 1px #fff; border-collapse: separate; text-align: left; width: 99%; }
td.piccomment { background-color: #e2dfe7; font-size: small; color: var(--ink); }

/* ---------- [A/B] 見出し帯 ---------- */
h3 {
  background: var(--accent-pale);   /* 旧: #EEAAFF ベタ塗り */
  border-left: 5px solid var(--accent);
  border-radius: 4px;
  color: var(--ink);
  padding: .35em .6em;
  width: auto;                      /* 旧: 99% */
  font-size: 1.1em;
  text-decoration: none;
}
.Title {
  background: var(--accent);
  color: #fff;                      /* 旧: #000(コントラスト不足) */
  font-weight: bold;
  font-size: large;
  padding: .2em .5em;
  border-radius: 4px;
}

/* ---------- [A] リスト装飾(等価) ---------- */
.defaultlist, .defaultlist li { padding: 0; margin: 0; }
.defaultlist li { list-style-type: none !important; list-style-image: none !important; margin: 5px 0 !important; }
.list3 li { position: relative; padding-left: 20px; }
.list3-maru:after {
  content: ''; display: block; position: absolute; top: 7px; left: 3px;
  border-radius: 30px; height: 7px; width: 7px; border: 3px solid #e00;
}
.list3-batu:before, .list3-batu:after {
  content: ''; display: block; position: absolute; top: 13px; left: 3px;
  height: 4px; width: 14px; background: #888; transform: rotate(-45deg);
}
.list3-batu:after { transform: rotate(45deg); }

.contentsection { list-style-type: none; width: 100%; padding: 0; }
.contentsection li { position: relative; width: 50%; float: left; margin: 0; padding: 0; text-align: center; }

div.left { text-align: left; font-weight: bold; }
.fsbold { font-weight: bold; font-size: 20px; }
.fsboldBackColor { font-weight: bold; background-color: #eee; font-size: 16px; }

/* ---------- [A/B] ドロップダウンメニュー ---------- */
.dropmenu {
  list-style-type: none;
  display: flex;                    /* 旧: float+33%固定 → 項目数に追従 */
  width: 100%;
  padding: 0;
  margin: 0 0 1em;
  position: sticky;                 /* 現代化: 上に貼り付く */
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(60, 20, 90, .18);
}
.dropmenu li { position: relative; flex: 1 1 auto; margin: 0; padding: 0; text-align: center; color: #fff; }
.dropmenu li a {
  display: block; margin: 0; padding: 13px 6px;
  background: var(--accent);
  border-right: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: 14px; font-weight: bold;
  line-height: 1; text-decoration: none;
}
.dropmenu li ul {
  list-style: none; position: absolute; z-index: 9999; top: 100%; left: 0;
  margin: 0; padding: 4px 0; min-width: 220px;
  background: #fff; border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  overflow: hidden;
}
.dropmenu li ul li { width: 100%; text-align: left; }
.dropmenu li ul li a {
  padding: 9px 18px; border-top: none;
  background: #fff; color: var(--ink); font-weight: normal;
}
.dropmenu li:hover > a, .dropmenu li a:hover { background: var(--accent-deep); color: #fff; }
.dropmenu li ul li a:hover { background: var(--accent-pale); color: var(--ink); }
#normal li ul { display: none; }
#normal li:hover ul,
#normal li:focus-within ul { display: block; }   /* 現代化: タップ/キーボードでも開く */

/* ---------- [A] トップページのグリッド(index.htm から集約) ---------- */
.table-container          { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: center; }
.table-container-baseline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: baseline; }
.table-container3         { display: grid; grid-template-columns: repeat(3, 1fr); }
.table-cell        { text-align: center; font-size: small; border: none; }
.table-cell-border { border: 1px solid #ccc; text-align: left; font-size: small; }
.colSpan2     { grid-column: span 2; }
.colSpan2left { grid-column: span 2; text-align: left; }
.colSpan3     { grid-column: span 3; }
.rowSpan2 { grid-row: span 2; }  .rowSpan3 { grid-row: span 3; }
.rowSpan4 { grid-row: span 4; }  .rowSpan5 { grid-row: span 5; }
.rowSpan6 { grid-row: span 6; }  .rowSpan7 { grid-row: span 7; }
.rowSpan8 { grid-row: span 8; }  .rowSpan11 { grid-row: span 11; }
.gray    { background-color: #bbb; color: #fff; font-weight: bold; }
.vaiolet { background-color: var(--band); color: #fff; font-weight: bold; }
.white   { background-color: #fff; font-weight: normal; color: #000; }
.left    { text-align: left; }
.center  { text-align: center; }

/* ---------- [A/B] 画面幅対応 ---------- */
/* 旧: 481px以上で余白50px+背景タイル(back001.gif) / 1220px以上で width:1218px 固定
   → 紙面方式(max-width:1150px+auto余白)に置換。タイルを戻す場合は下を有効化:
   html { background: url(BACKS/back001.gif); }                          */
@media (max-width: 480px) {
  html { background-image: none; }   /* 狭い画面ではタイルを出さない */
  body { padding: 0 4px 2em; }
  p, p.comment, p.commentRight { margin-left: 2%; margin-right: 2%; }
  .dropmenu li a { font-size: 13px; padding: 12px 2px; }
  .table-container, .table-container-baseline { grid-template-columns: 1fr; }  /* 2段組→1段 */

  /* ハンバーガーメニュー(.menu-toggle 要素があるページのみ発動) */
  .menu-toggle { display: block; width: 40px; margin: 10px; cursor: pointer; }
  .menu-toggle span { display: block; height: 4px; margin: 6px 0; background: var(--accent); border-radius: 2px; }
  body:has(.menu-toggle) .dropmenu { display: none; position: static; }
  body:has(.menu-toggle) .dropmenu.open { display: block; }
  body:has(.menu-toggle) .dropmenu.open li { width: 100%; }
  body:has(.menu-toggle) .dropmenu.open li a { border-right: none; border-bottom: 1px solid #fff; }
}

.menu-toggle { display: none; }
@media (max-width: 480px) { .menu-toggle { display: block; } }