* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background: #F8F8FB;
  color: #000000;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  background: #FFFFFF;
  min-height: 100dvh;
}

/* ヘッダー */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #0017C1;
}

.header__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header__title {
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.03em;
}

.header__subtitle {
  font-size: 11px;
  color: #C5D7FB;
  font-weight: 500;
}

/* ナビゲーション */
.nav {
  display: flex;
  background: #F8F8FB;
  border-bottom: 1px solid #CCCCCC;
}

.nav__link {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #626264;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.nav__link:hover {
  color: #0017C1;
  background: rgba(52, 96, 251, 0.05);
}

.nav__link--active {
  color: #0017C1;
  border-bottom-color: #0017C1;
}

/* タブ */
.tabs {
  display: flex;
  padding: 0 16px;
  gap: 8px;
  background: #F8F8FB;
  border-bottom: 1px solid #CCCCCC;
  padding-top: 12px;
}

.tab {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #626264;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  font-family: inherit;
}

.tab:hover {
  color: #3460FB;
}

.tab--active {
  color: #0017C1;
  border-bottom-color: #0017C1;
}

/* コンテンツ */
.content {
  padding: 16px;
}

.day-content {
  display: none;
}

.day-content--active {
  display: block;
}

/* アコーディオン */
.accordion {
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: #F8F8FB;
  border: none;
  border-left: 3px solid #C5D7FB;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  gap: 10px;
  transition: background 0.2s, border-color 0.2s;
}

.accordion__header:hover {
  background: #D9E6FF;
  border-left-color: #3460FB;
}

.accordion--open .accordion__header {
  border-left-color: #0017C1;
}

.accordion__title {
  flex: 1;
  font-weight: 700;
  color: #000000;
}

.accordion__arrow {
  font-size: 10px;
  color: #626264;
  transition: transform 0.2s;
}

.accordion--open .accordion__arrow {
  transform: rotate(180deg);
}

.accordion__body {
  display: none;
  padding: 0 16px 16px;
  font-size: 13px;
  line-height: 1.8;
  color: #374151;
}

.accordion--open .accordion__body {
  display: block;
}

.accordion__body h4 {
  font-size: 13px;
  font-weight: 700;
  color: #0017C1;
  margin: 12px 0 6px;
}

.accordion__body h4:first-child {
  margin-top: 4px;
}

.accordion__body ul,
.accordion__body ol {
  padding-left: 20px;
  margin: 6px 0;
}

.accordion__body li {
  margin-bottom: 4px;
}

.accordion__body p {
  margin: 8px 0;
}

/* 図解: 横並びフロー */
.diagram {
  margin: 12px 0;
  padding: 14px;
  background: #F8F8FB;
  border: 1px solid #C5D7FB;
  border-radius: 10px;
  overflow-x: auto;
}

.diagram--row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.diagram__box {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.diagram__box--blue {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.diagram__box--amber {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.diagram__box--green {
  background: #E6F5EC;
  color: #197A4B;
  border: 1px solid #86efac;
}

.diagram__sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.8;
}

.diagram__connector {
  font-size: 16px;
  font-weight: 700;
  color: #626264;
  flex-shrink: 0;
}

/* 図解: 7要素グリッド */
.diagram-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.diagram__chip {
  padding: 8px 12px;
  background: #D9E6FF;
  border: 1px solid #C5D7FB;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.diagram__chip--core {
  background: #0017C1;
  color: #FFFFFF;
  border-color: #0017C1;
}

.diagram__chip-sub {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.7;
}

/* 図解: ループ */
.diagram--loop {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.diagram__loop-step {
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #C5D7FB;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #000000;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.diagram__loop-arrow {
  font-size: 14px;
  color: #3460FB;
  font-weight: 700;
  flex-shrink: 0;
}

.diagram__loop-back {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #CE0000;
  font-weight: 600;
  margin-top: 4px;
}

/* 図解: LLM比較テーブル */
.diagram-table {
  margin: 10px 0;
  border: 1px solid #C5D7FB;
  border-radius: 10px;
  overflow: hidden;
}

.diagram-table__row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 1px;
  font-size: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #CCCCCC;
  align-items: center;
}

.diagram-table__row:last-child {
  border-bottom: none;
}

.diagram-table__row--header {
  background: #F8F8FB;
  font-weight: 700;
  color: #626264;
  font-size: 11px;
}

.diagram-table__row--highlight {
  background: #D9E6FF;
}

.diagram-table__model {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  font-size: 11px;
}

.diagram-table__model--gpt { background: #E6F5EC; color: #197A4B; }
.diagram-table__model--gemini { background: #dbeafe; color: #1e40af; }
.diagram-table__model--claude { background: #fef3c7; color: #92400e; }
.diagram-table__model--grok { background: #D9E6FF; color: #0017C1; }

/* チャットで質問ボタン */
.ask-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #3460FB;
  background: #D9E6FF;
  border: 1px solid #C5D7FB;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s;
}

.ask-btn:hover {
  background: #3460FB;
  color: #FFFFFF;
  border-color: #3460FB;
}

/* 図解: サイドバイサイド (2カラム) */
.diagram--side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.diagram__panel {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
}

.diagram__panel--left {
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.diagram__panel--right {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.diagram__panel-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  display: block;
}

.diagram__panel--left .diagram__panel-title { color: #1e40af; }
.diagram__panel--right .diagram__panel-title { color: #92400e; }

.diagram__panel-text {
  font-weight: 500;
  color: #374151;
}

/* 図解: カードグリッド (Tips等) */
.diagram-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.diagram-card {
  padding: 10px 12px;
  background: #F8F8FB;
  border: 1px solid #C5D7FB;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.diagram-card__title {
  font-weight: 700;
  color: #0017C1;
  font-size: 12px;
  margin-bottom: 3px;
  display: block;
}

.diagram-card__desc {
  color: #374151;
  font-weight: 500;
}

/* 図解: サイクル (循環フロー) */
.diagram--cycle {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.diagram__cycle-step {
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #C5D7FB;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #000000;
  text-align: center;
}

.diagram__cycle-step--alert {
  background: #FDEEEE;
  border-color: #fca5a5;
  color: #CE0000;
}

.diagram__cycle-step--recover {
  background: #E6F5EC;
  border-color: #86efac;
  color: #197A4B;
}

.diagram__cycle-arrow {
  font-size: 14px;
  color: #3460FB;
  font-weight: 700;
  flex-shrink: 0;
}

.diagram__cycle-back {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #0017C1;
  font-weight: 600;
  margin-top: 4px;
}

/* 図解: 比較ボックス (VS レイアウト) */
.diagram--compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}

.diagram__compare-box {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
}

.diagram__compare-box--a {
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.diagram__compare-box--b {
  background: #E6F5EC;
  border: 1px solid #86efac;
}

.diagram__compare-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  display: block;
}

.diagram__compare-box--a .diagram__compare-title { color: #1e40af; }
.diagram__compare-box--b .diagram__compare-title { color: #197A4B; }

.diagram__compare-vs {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #626264;
}

.diagram__compare-item {
  color: #374151;
  font-weight: 500;
  margin-bottom: 2px;
}

.diagram__compare-item--merit { color: #197A4B; }
.diagram__compare-item--demerit { color: #CE0000; }

/* 図解: コンセプトボックス */
.diagram-concept-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.diagram-concept {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  border-left: 3px solid #0017C1;
  background: #F8F8FB;
}

.diagram-concept__title {
  font-weight: 700;
  color: #0017C1;
  font-size: 12px;
  margin-bottom: 3px;
  display: block;
}

.diagram-concept__text {
  color: #374151;
  font-weight: 500;
}

/* 図解: DB分割ビジュアル */
.diagram--db-split {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.diagram__db-source {
  padding: 8px 20px;
  background: #0017C1;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.diagram__db-arrow-down {
  font-size: 14px;
  color: #3460FB;
  font-weight: 700;
}

.diagram__db-targets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.diagram__db-target {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.diagram__db-target--a {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

.diagram__db-target--b {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
}

.diagram__db-target--c {
  background: #E6F5EC;
  border: 1px solid #86efac;
  color: #197A4B;
}

/* 図解: トリガー3種類 */
.diagram--trigger-types {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.diagram__trigger-box {
  padding: 12px 10px;
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diagram__trigger-box--event {
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.diagram__trigger-box--time {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.diagram__trigger-box--action {
  background: #E6F5EC;
  border: 1px solid #86efac;
}

.diagram__trigger-title {
  font-weight: 700;
  font-size: 14px;
}

.diagram__trigger-box--event .diagram__trigger-title { color: #1e40af; }
.diagram__trigger-box--time .diagram__trigger-title { color: #92400e; }
.diagram__trigger-box--action .diagram__trigger-title { color: #197A4B; }

.diagram__trigger-label {
  font-weight: 600;
  color: #626264;
  font-size: 11px;
}

.diagram__trigger-example {
  font-weight: 500;
  color: #374151;
  font-size: 11px;
}

/* 図解: 参加者比較 3カラム */
.diagram--participant-compare {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.diagram__participant-col {
  padding: 10px 6px;
  border-radius: 8px;
  text-align: center;
}

.diagram__participant-col--a {
  background: #D9E6FF;
  border: 1px solid #C5D7FB;
}

.diagram__participant-col--b {
  background: #fefce8;
  border: 1px solid #fde68a;
}

.diagram__participant-col--c {
  background: #E6F5EC;
  border: 1px solid #bbf7d0;
}

.diagram__participant-name {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: #0017C1;
  margin-bottom: 4px;
}

/* ユーティリティ */
.diagram--mt { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.diagram--inline { padding: 8px; margin: 0; border: none; background: transparent; }
.diagram__box--sm { min-width: auto; padding: 6px 10px; font-size: 11px; }
.diagram__connector--sm { font-size: 12px; }

@media (max-width: 480px) {
  .diagram--trigger-types {
    grid-template-columns: 1fr;
  }

  .diagram--participant-compare {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .diagram--side {
    grid-template-columns: 1fr;
  }

  .diagram-card-grid {
    grid-template-columns: 1fr;
  }

  .diagram--compare {
    grid-template-columns: 1fr;
  }

  .diagram__compare-vs {
    justify-content: center;
    padding: 4px 0;
  }

  .diagram-concept-grid {
    grid-template-columns: 1fr;
  }
}

/* スマホ対応 */
@media (max-width: 480px) {
  .header__title {
    font-size: 15px;
  }

  .nav__link {
    font-size: 12px;
    padding: 8px 4px;
  }

  .tab {
    font-size: 13px;
  }

  .accordion__header {
    font-size: 13px;
    padding: 12px 14px;
  }
}