/* おやこ手帳デザイン（2026-10-18 採用）。design.js が html に data-design="techo" を付けたときだけ効く。
   元のデザイン（style.css）は書き換えず、ここで上書きする。くわしくは docs/DESIGN.md */

[data-design="techo"] {
  --bg: #fffdf7;
  --surface: #ffffff;
  --paper: #fbf8ef;
  --ink: #1d2a44;
  --ink-2: #4c5872;
  --ink-3: #6b7488;
  --rule: #e8e2d2;
  --muted-soft: #efebdf;
  --yellow: #f6c343;
  --yellow-soft: #fff4d2;
  --amber-ink: #7a5600;
  --coral: #e2574c;
  --coral-ink: #b8352b;
  --coral-soft: #fce3e0;
  --blue-ink: #2b4590;
  --blue-soft: #e3eafb;
  --navy: #1d2a44;
  --on-ot: #ffffff;
  --head-bg: var(--bg);
  --head-ink: var(--ink);
  --accent: #b8352b;
  --accent-soft: var(--coral-soft);  /* 受付中の帯：赤い文字に淡い赤の地（緑地に赤文字にならないように） */
  --warn: var(--amber-ink);
  --warn-soft: var(--yellow-soft);
  --info: #2b4590;
  --info-soft: var(--blue-soft);
  --radius: 14px;
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --num: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}

/* 2026-10-18 ユーザー指示：スマホ（暗い画面設定）でも PC と同じクリーム地にするため、暗い配色は使わない。
   style.css の暗い画面用の色（申込カレンダーの印など）もここで明るい色に戻す */
[data-design="techo"] { color-scheme: light; }
[data-design="techo"] .ev-close { --ev: #c2410c; --ev-bg: #fbe9e7; --ev-ink: #9c2b12; }
[data-design="techo"] .ev-open { --ev: #3c4f8f; --ev-bg: #eceff8; --ev-ink: #3c4f8f; }
[data-design="techo"] .ev-start { --ev: #0b5d3b; --ev-bg: #e8f1ec; --ev-ink: #0b5d3b; }
[data-design="techo"] .cal-dl .d { color: #9c2b12; }

/* 主催者の種類の色（文字色は白地・淡色地でコントラスト 4.5:1 以上） */
[data-design="techo"] .ot-jjga { --ot: #1d5fa8; --ot-bg: #e6eef8; }
[data-design="techo"] .ot-junior { --ot: #00796b; --ot-bg: #e0f1ee; }
[data-design="techo"] .ot-union { --ot: #3b6b1f; --ot-bg: #e8f0e1; }
[data-design="techo"] .ot-school { --ot: #6a47a8; --ot-bg: #eee9f7; }
[data-design="techo"] .ot-media { --ot: #8f5000; --ot-bg: #f7ecdd; }
[data-design="techo"] .ot-pro { --ot: #b0306a; --ot-bg: #f7e4ee; }
[data-design="techo"] .ot-other { --ot: #56636e; --ot-bg: #eceff1; }

[data-design="techo"] body { letter-spacing: .01em; }
[data-design="techo"] .wrap { max-width: 1240px; }
[data-design="techo"] .techo-only { display: block; }

/* ヘッダー：サイト名、キャッチ、数字のステッカー */
[data-design="techo"] .site-head { background: var(--bg); color: var(--ink); }
[data-design="techo"] .head-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "brand brand" "catch stats" "lead stats";
  column-gap: 40px; align-items: end; padding-top: 24px; padding-bottom: 24px;
}
[data-design="techo"] .eyebrow { display: none; }
[data-design="techo"] h1 { grid-area: brand; display: flex; align-items: center; gap: 12px; margin: 0 0 28px; font-size: 21px; font-weight: 800; letter-spacing: .02em; }
[data-design="techo"] h1 br { display: none; }
/* ロゴ：カレンダーとゴルフボール（2026-10-18 旗から変更。favicon.svg も同じ絵） */
[data-design="techo"] h1::before {
  content: ""; flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: #f6c343 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3Ccircle cx='12' cy='15.5' r='3.4'/%3E%3Ccircle cx='11' cy='14.6' r='.75' fill='%231d2a44' stroke='none'/%3E%3Ccircle cx='13.1' cy='15' r='.75' fill='%231d2a44' stroke='none'/%3E%3Ccircle cx='11.8' cy='16.8' r='.75' fill='%231d2a44' stroke='none'/%3E%3C/svg%3E") center / 24px no-repeat;
}
[data-design="techo"] .catch { grid-area: catch; margin: 0; font-size: clamp(30px, 4.4vw, 54px); font-weight: 800; line-height: 1.32; }
[data-design="techo"] .catch span { display: inline-block; box-shadow: inset 0 -.42em 0 var(--yellow); }
[data-design="techo"] .lead { grid-area: lead; margin: 16px 0 0; opacity: 1; color: var(--ink-2); font-size: 15px; }
[data-design="techo"] .stats { grid-area: stats; position: relative; display: block; height: 262px; margin: 0; padding: 0; border: 0; }
[data-design="techo"] .stats div {
  position: absolute; display: flex; flex-direction: column-reverse; align-items: center; justify-content: center;
  text-align: center; border-radius: 50%; border: 2px solid var(--navy); box-shadow: 0 6px 0 rgba(29, 42, 68, .12);
}
[data-design="techo"] .stats dd { font-family: var(--num); font-weight: 800; line-height: 1; }
[data-design="techo"] .stats dt { opacity: 1; font-size: 12px; font-weight: 700; line-height: 1.35; padding: 6px 18px 0; }
[data-design="techo"] .stats div:nth-child(1) { left: 0; top: 30px; width: 178px; height: 178px; background: #f6c343; color: #1d2a44; transform: rotate(-6deg); }
[data-design="techo"] .stats div:nth-child(1) dd { font-size: 58px; }
[data-design="techo"] .stats div:nth-child(2) { left: 188px; top: 0; width: 148px; height: 148px; background: #1d2a44; color: #ffffff; transform: rotate(8deg); }
[data-design="techo"] .stats div:nth-child(2) dd { font-size: 48px; }
[data-design="techo"] .stats div:nth-child(3) { left: 172px; top: 136px; width: 126px; height: 126px; background: #ffffff; color: #1d2a44; transform: rotate(-4deg); }
[data-design="techo"] .stats div:nth-child(3) dd { font-size: 40px; }

/* ロゴ枠（詳細の見出し帯で使う） */
[data-design="techo"] .tc-logo {
  flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--ot); color: var(--ot);
  font-size: 10px; font-weight: 800; letter-spacing: 0;
}
[data-design="techo"] .tc-logo.sm { font-size: 8.5px; }
[data-design="techo"] .tc-logo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-design="techo"] .result-link { color: var(--ink); }

/* タブ・絞り込み・主催者の種類 */
[data-design="techo"] .toolbar { padding-top: 48px; }
[data-design="techo"] .tabs { gap: 8px; border-bottom: 0; flex-wrap: wrap; }
[data-design="techo"] .tabs button {
  margin: 0; padding: 8px 16px; font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 2px solid var(--rule); border-radius: 999px;
}
[data-design="techo"] .tabs button[aria-selected="true"] { color: #1d2a44; background: var(--yellow); border-color: var(--yellow); }
[data-design="techo"] .tabs .count { color: inherit; opacity: .75; font-weight: 500; }
[data-design="techo"] .select { font-weight: 700; color: var(--ink-2); }
[data-design="techo"] .select select { border: 2px solid var(--rule); border-radius: 999px; padding: 8px 34px 8px 14px; font-weight: 700; }
[data-design="techo"] .otypes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 22px; }
[data-design="techo"] .ot-lbl { flex: none; white-space: nowrap; margin-right: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
[data-design="techo"] .otc {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 2px solid var(--rule); border-radius: 999px; cursor: pointer;
}
[data-design="techo"] .otc svg { width: 24px; height: 24px; margin-left: -6px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: var(--ot-bg); fill: none; stroke: var(--ot); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-design="techo"] .otc .n { font-size: 12px; font-weight: 500; color: var(--ink-2); }
[data-design="techo"] .otc[aria-pressed="true"] { color: var(--on-ot); background: var(--ot); border-color: var(--ot); }
[data-design="techo"] .otc[data-otype=""][aria-pressed="true"] { color: #ffffff; background: #1d2a44; border-color: #1d2a44; }
[data-design="techo"] .otc[aria-pressed="true"] .n { color: inherit; opacity: .85; }

/* 一覧 */
/* 2026-10-18 ユーザー指示でカードをやめ、元の表形式に戻した。行の左端の色と主催欄の名前で主催者の種類を示す */
[data-design="techo"] .table-head { padding: 0 14px 10px 18px; font-weight: 700; color: var(--ink-3); border-bottom: 2px solid var(--ink); }
[data-design="techo"] .month { padding: 28px 0 10px; font-size: 15px; font-weight: 800; color: var(--ink); border-bottom: 2px dashed var(--rule); }
[data-design="techo"] .row { padding: 16px 14px 16px 18px; border-bottom: 1px solid var(--rule); box-shadow: inset 4px 0 0 var(--ot, transparent); }
[data-design="techo"] .row:hover, [data-design="techo"] .mrow:hover { background: var(--paper); }
[data-design="techo"] .row .name { font-weight: 800; }
[data-design="techo"] .ot-tag { display: block; width: max-content; max-width: 100%; margin-bottom: 3px; padding: 1px 8px; font-size: 10.5px; font-weight: 800; color: var(--ot); background: var(--ot-bg); border-radius: 999px; }
[data-design="techo"] .mrow { padding-left: 12px; box-shadow: inset 4px 0 0 var(--ot, transparent); }
[data-design="techo"] .empty { border-bottom: 0; background: var(--paper); border-radius: 18px; }

/* 地図 */
[data-design="techo"] .mapview { border-top: 0; padding-top: 0; }
[data-design="techo"] .map-canvas { border: 2px solid var(--rule); border-radius: 24px; overflow: hidden; }
[data-design="techo"] .map-count { border-bottom: 2px dashed var(--rule); }
[data-design="techo"] #map-list { display: flex; flex-direction: column; gap: 12px; padding: 12px 4px 4px; }
[data-design="techo"] .pin { background: var(--ot, #5f6f78); font-weight: 800; }
[data-design="techo"] .pin-open { box-shadow: 0 0 0 3px #e2574c, 0 1px 4px rgba(0, 0, 0, .3); }
[data-design="techo"] .marker-cluster { background-color: rgba(29, 42, 68, .2); }
[data-design="techo"] .marker-cluster div { background-color: rgba(29, 42, 68, .88); }

/* 申込カレンダー */
[data-design="techo"] .calview { border-top: 0; padding-top: 0; }
[data-design="techo"] .cal-nav button { border: 2px solid var(--rule); border-radius: 999px; }
[data-design="techo"] .cal-layer { border-width: 2px; font-weight: 700; }
[data-design="techo"] .cal-grid { border: 2px solid var(--rule); border-radius: 18px; overflow: hidden; }
[data-design="techo"] .cal-ev { border-radius: 8px; }
[data-design="techo"] .cal-cell.today .n { background: var(--yellow); color: #1d2a44; }
[data-design="techo"] .cal-sum { background: #1d2a44; color: #ffffff; border-radius: 20px; }
[data-design="techo"] .cal-side h3 { border-bottom: 2px dashed var(--rule); }

/* 詳細・ボタン・下の案内 */
[data-design="techo"] .sheet { border-radius: 28px; }
[data-design="techo"] .d-org { display: flex; align-items: center; gap: 12px; margin: -40px -40px 24px; padding: 16px 56px 16px 40px; background: var(--ot-bg); border-bottom: 3px solid var(--ot); border-radius: 28px 28px 0 0; }
[data-design="techo"] .d-org .tc-logo { width: 44px; height: 44px; }
[data-design="techo"] .d-org span { font-size: 13px; line-height: 1.45; }
[data-design="techo"] .d-org b { display: block; font-size: 12px; color: var(--ot); }
[data-design="techo"] .d-entry { border-left: 0; border-radius: 16px; }
[data-design="techo"] .d-entry.st-closed { color: var(--ink-2); }
[data-design="techo"] .btn { border-radius: 999px; font-weight: 700; }
[data-design="techo"] .btn-solid { color: #ffffff; background: #1d2a44; border: 2px solid #1d2a44; }
[data-design="techo"] .btn-line { border: 2px solid var(--ink); }
[data-design="techo"] .cal-cta { background: var(--paper); border: 2px solid var(--rule); border-radius: 24px; }
[data-design="techo"] .site-foot { border-top: 2px dashed var(--rule); }

/* スマホ */
@media (max-width: 760px) {
  [data-design="techo"] .head-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "catch" "lead" "stats"; padding-top: 16px; }
  [data-design="techo"] h1 { margin-bottom: 18px; font-size: 16px; }
  [data-design="techo"] h1::before { width: 34px; height: 34px; border-radius: 11px; background-size: 18px; }
  [data-design="techo"] .catch { font-size: 27px; }
  [data-design="techo"] .lead { font-size: 13px; margin-top: 10px; }
  [data-design="techo"] .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; height: auto; margin-top: 18px; }
  [data-design="techo"] .stats div:nth-child(n) { position: static; width: auto; height: auto; padding: 10px 4px; border-radius: 18px; transform: none; box-shadow: 0 4px 0 rgba(29, 42, 68, .12); }
  [data-design="techo"] .stats div:nth-child(n) dd { font-size: 30px; }
  [data-design="techo"] .stats dt { padding: 4px 2px 0; font-size: 9.5px; letter-spacing: 0; white-space: nowrap; }

  [data-design="techo"] .toolbar { padding-top: 32px; }
  [data-design="techo"] .tabs { gap: 6px; }
  [data-design="techo"] .tabs button { padding: 6px 12px; font-size: 13px; }
  [data-design="techo"] .otypes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 16px; scrollbar-width: none; }
  [data-design="techo"] .otc { flex: none; }
  [data-design="techo"] .d-org { margin: -32px -20px 20px; padding: 14px 52px 14px 20px; }
  /* 地図の横の一覧は長いので、枠の中でスクロールさせる */
  [data-design="techo"] .map-side { max-height: 72vh; overflow-y: auto; }
}