/* ──────────────
   リセット
────────────── */

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


/* ──────────────
   全体
────────────── */

:root {
  --about-gray: #cfcfcf;
  --about-gray-light: #eeeeee;
  --about-gray-soft: #d1d2d4;

  --about-line-dark: #777777;
  --about-line-light: #ffffff;

  --about-shadow: #b5b5b5;

  --about-text: #222222;
}


body {
  font-family:
    "DotGothic16",
    "MS Gothic",
    monospace;

  color: var(--about-text);

  background: transparent;

  font-size: clamp(12px, 1.5vw, 20px);

  line-height: 1.8;

  word-break: break-word;
}


/* ──────────────
   全体
────────────── */

.about-page {
  width: 100%;
  min-width: 0;
  min-height: 100%;

  padding: 2px 10px 10px;
}


/* ──────────────
   タブ
────────────── */

.about-tabs {
  display: flex;
  align-items: stretch;

  width: 100%;
  min-width: 0;

  gap: 5px;

  margin-bottom: 10px;
}


/* ──────────────
   タブ本体
────────────── */

.about-tab {
  flex: 1;

  min-width: 0;

  padding: 8px 5px;

  color: #444444;

  background: #d1d2d4;

  border: 2px solid;
  border-color:
    #ffffff
    #777777
    #777777
    #ffffff;

  border-radius: 0;

  box-shadow:
    inset 1px 1px 0 #eeeeee,
    inset -1px -1px 0 #b5b5b5;

  font-family: inherit;

  font-size: clamp(9px, 1.5vw, 25px);

  line-height: 1.5;

  cursor: pointer;

  overflow-wrap: anywhere;
}


/* ──────────────
   ホバー
────────────── */

.about-tab:hover {
  background: #d8d8d9;
}


/* ──────────────
   選択中
────────────── */

.about-tab.active {
  color: #444444;

  background: #c9c9c9;

  border-color:
    #777777
    #ffffff
    #ffffff
    #777777;

  box-shadow:
    inset 2px 2px 0 #b0b0b0,
    inset -1px -1px 0 #eeeeee;
}



.about-tab:active {
  color: #555555;

  background: #c5c5c5;

  border-color:
    #777777
    #ffffff
    #ffffff
    #777777;

  box-shadow:
    inset 2px 2px 2px #a8a8a8,
    inset -1px -1px 0 #eeeeee;
}


/* ──────────────
   メインコンテンツ
────────────── */

.about-content {
  width: 100%;
  min-width: 0;

  padding: 12px;

  color: var(--about-text);

  background: #cfcfcf;

  border: 2px solid;

  border-color:
    #ffffff
    #888888
    #888888
    #ffffff;

  border-radius: 0;

  box-shadow:
    inset 1px 1px 0 #eeeeee,
    3px 3px 0 #999999;
}


/* ──────────────
   タブ内容
────────────── */

.tab-content {
  display: none;

  animation:
    about-fade 0.15s ease;
}


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


.tab-content > p {
  line-height: 1.9;
}


/* ──────────────
   タブ内の見出し
────────────── */

.tab-content h3 {
  margin-bottom: 8px;

  padding: 7px 9px;

  color: #444444;

  background: #d1d2d4;

  border: 2px solid;

  border-color:
    #777777
    #ffffff
    #ffffff
    #777777;

  border-radius: 0;

  box-shadow:
    inset 1px 1px 0 #b5b5b5,
    inset -1px -1px 0 #eeeeee;

  font-size: clamp(13px, 1.5vw, 18px);

  font-weight: normal;

  line-height: 1.6;
}


/* ──────────────
   内側ボックス
────────────── */

.about-box {
  min-width: 0;

  margin-top: 10px;

  padding: 10px;

  color: var(--about-text);

  background: #d1d1d1;

  border: 2px solid;

  border-color:
    #ffffff
    #888888
    #888888
    #ffffff;

  border-radius: 0;

  box-shadow:
    inset 1px 1px 0 #eeeeee,
    2px 2px 0 #999999;
}


/* ──────────────
   内側ボックス見出し
────────────── */

.about-box h3 {
  margin: -2px -2px 8px;

  padding: 6px 8px;

  color: #444444;

  background: #d1d2d4;

  border: 2px solid;

  border-color:
    #777777
    #ffffff
    #ffffff
    #777777;

  border-radius: 0;

  box-shadow:
    inset 1px 1px 0 #b5b5b5,
    inset -1px -1px 0 #eeeeee;

  font-size: clamp(13px, 1.5vw, 18px);

  font-weight: normal;

  line-height: 1.7;

  overflow-wrap: anywhere;
}


/* ──────────────
   本文
────────────── */

.about-box p,
.tab-content > p {
  line-height: 1.9;
}


/* ──────────────
   見出し位置
────────────── */

#character > h3 {
  margin-top: 14px;
}


/* ──────────────
   フェード
────────────── */

@keyframes about-fade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ──────────────
   フォーカス
────────────── */

.about-tab:focus-visible {
  outline: 2px solid #888888;
  outline-offset: 3px;
}

/* ──────────────
   相関図の見出し
────────────── */

.relationship-heading {
  display: block;

  margin: 1px 0 6px;

  padding: 7px 7px 2px;

  color: #444444;

  background: transparent;

  border-bottom: 1px dashed #888888;

  font-size: inherit;

  font-weight: normal;

  line-height: 1.6;
}

/* ──────────────
   キャラクター紹介
────────────── */

.character-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;

  width: 100%;
  min-width: 0;
}

/* 左側：プロフィール */
.character-profile {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  line-height: 1.9;
}

/* 右側：画像ギャラリー */
.character-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;

  width: 48%;
  flex: 0 0 48%;
  min-width: 0;
}

.character-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  min-width: 0;

  border: none;
  box-shadow: none;
}

/* ──────────────
   横長画面：画像を縦方向の中央へ
────────────── */

@media (min-width: 500px) {
  .character-layout {
    align-items: center;
  }

  .character-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 65%;
    flex: 0 0 65%;
    align-self: center;
  }
}

/* ──────────────
   小さい画面
────────────── */

@media (max-width: 420px) {

  .about-page {
    padding: 7px;
  }

  .about-tabs {
    gap: 3px;
  }

  .about-tab {
    padding: 7px 3px;
  }

  .about-content {
    padding: 8px;
  }

  .about-box {
    padding: 8px;
  }

}
/* 画像の長押し・選択・ドラッグを抑制 */
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ──────────────
   動きを減らす設定
────────────── */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

}