@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');

/* =============================
   カラーテーマ変数定義
============================= */

/* === ライトテーマ === */
:root {
  --color-bg:        #f1e8dc;
  --color-text:      #333333;
  --color-link:      #005f99;
  --color-link-hover:#007acc;
  --color-skip-bg:   #003300;
  --color-skip-text: #ffffff;
  --color-border:    #333333;
  --color-surface:   #ffffff;  /* 枠内背景（ライト） */
  --color-salmon:    #ffb3ab;  /* サーモンピンク */
  --label-text-color:white;
  --label-green1:    #1a352a;
  --label-green2:    #2e5b45;
  --label-green3:    #437c60;
  --hamburger-color: #333333;
  --hamburger-bg:    transparent;
  --hamburger-hover: #005f99;
}

/* === ダークテーマ === */
[data-theme="dark"] {
  --color-bg:        #001a00;
  --color-text:      #ffffff;
  --color-link:      #f4c29f;
  --color-link-hover:#ffffff;
  --color-skip-bg:   #ffffff;
  --color-skip-text: #001a00;
  --color-border:    #ffffff;
  --color-surface:   #1e1e1e;  /* 枠内背景（ダーク） */
  --color-salmon:    #ffe4de;
  --label-text-color:black;
  --label-green1:    #c3db9d;
  --label-green2:    #bcccaa;
  --label-green3:    #e1edd6;
  --hamburger-color: #ffffff;
  --hamburger-bg:    transparent;
  --hamburger-hover: #f4c29f;
}

/* =============================
   ベース設定
============================= */

body {
  font-family: 'Kiwi Maru', serif;
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:focus,
a:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}

img {
  max-width: 100%;
  height: auto;
}

header,
main,
footer {
  padding: 1rem;
}

/* =============================
   コンテナ・構造
============================= */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1em;
}

.section-title-wrapper {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.section-title {
  font-size: 1.4rem;
  margin: 0;
  color: var(--color-text);
}

/* =============================
   スキップリンク（アクセシビリティ）
============================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem;
  background: var(--color-skip-bg);
  color: var(--color-skip-text);
  z-index: 10000;
  display: inline-block;
}

/* =============================
   組織説明用
============================= */

.organization-description {
  text-align: left;
  max-width: 700px;
  margin: 0 auto 2em;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
  background-color: transparent;
}

/* =============================
   ラベルデザイン（緑グラデ）
============================= */

.label {
  width: 120px;
  color: var(--label-text-color);
  font-weight: bold;
  padding: 1em 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 4px 4px;
}
.label.green1 { background-color: var(--label-green1); }
.label.green2 { background-color: var(--label-green2); }
.label.green3 { background-color: var(--label-green3); }

/* =============================
   セクション構造
============================= */

.section {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  padding: 0;
  border-top: 1px solid #ccc;
  margin: 0;
}

.content {
  flex: 1;
  color: var(--color-text);
}

/* =============================
   番号付きリスト
============================= */

ol {
  list-style: none;
  counter-reset: item;
  padding: 0;
  margin: 0;
}
ol li {
  counter-increment: item;
  margin-bottom: 1em;
  position: relative;
  padding-left: 2em;
  color: var(--color-text);
}
ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: var(--color-link);
}

/* =============================
   傍点（強調ドット）
============================= */

.bouten {
  position: relative;
  display: inline-block;
}
.bouten::after {
  content: "●●";
  position: absolute;
  top: -1.2em;
  left: 0.3rem;
  font-size: 0.4rem;
  letter-spacing: 1.4em;
  pointer-events: none;
  color: #333333;
}
[data-theme="dark"] .bouten::after {
  color: #ffffff;
}

/* =============================
   タイムラインステップ用色
============================= */

:root .steps > h2:before,
:root .steps:before {
  background-color: #003300;
}
[data-theme="dark"] .steps > h2:before,
[data-theme="dark"] .steps:before {
  background-color: #d59533;
}

/* =============================
   補助テキスト（右寄せ）
============================= */

.right-note {
  text-align: right;
  margin-right: 1em;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-text);
}