@charset "utf-8";

/* =========================
   テーマ変数
   ========================= */
:root {
  /* Light theme */
  --bg: #ffffff;         /* ページ背景 */
  --fg: #011C33;         /* 文字色 */
  --link: #5A84AA;       /* リンク色 */
  --header-border: #5A84AA;
  --panel: #F0F8FF;      /* モバイル開閉メニューの展開時背景など */
  --divider: #93B6D5;    /* 罫線やドット線 */
  --accent-strong: #5A84AA; /* モバイル見出し背景や強調面の背景 */
  --footer-bg: #5A84AA;  /* フッター背景 */
  --on-accent: #F0F8FF;  /* 濃色面/アクセント面の上の文字色 */

  /* ブラウザ標準UIのダーク対応も有効化 */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme */
    --bg: #2b2b34;
    --fg: #F0F8FF;
    --link: #9bb7d1;
    --header-border: #9bb7d1;
    --panel: #2b2b34;       /* 展開メニューの背景もダークに揃える */
    --divider: #5a6f86;
    --accent-strong: #5a6f86;
    --footer-bg: #011C33;
    --on-accent: #F0F8FF;
  }
}

/* =========================
   ベース
   ========================= */
html {
  height: 100%;
  scrollbar-gutter: stable;
}
body {
  font-size: 16px;
  font-family: 'Lato', 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}
img { max-width: 100%; }

.link {
  color: var(--link);
}
.link:hover {
  text-decoration: underline 1px solid var(--link);
}

/* =========================
   ヘッダー
   ========================= */
header {
  max-width: 1240px;
  margin: 0 auto 20px;
  padding-bottom: 10px;
  display: flex;
  border-bottom: 2px solid var(--header-border);
}
header h1 {
  font-size: 22px;
  padding: 20px 0 0 20px;
  margin-right: 20px;
  font-weight: 600;
}
.language { padding-top: 24px; }
.language a:hover { color: var(--link); }

.emoji {
  font-family:
    "Twemoji Mozilla",
    "Noto Color Emoji",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    sans-serif;
}

/* =========================
   レイアウト
   ========================= */
.corps {
  max-width: 1240px;
  margin: 0 auto 50px;
  padding-right: 60px;
  display: flex;
  justify-content: space-between;
}

/* =========================
   メニュー
   ========================= */
.toggle, .Label { display: none; }

nav {
  flex: 0 0 110px;
  width: 100px;
  margin-left: 20px;
  margin-right: 20px;
}
.thePage { font-weight: 600; }
.pcMenu {
  margin-bottom: 20px;
  font-weight: 300;
}
.menuContents { margin-left: 10px; }

.menuItem {
  display: block;
  margin-bottom: 20px;
}
.menuItem:hover {
  color: var(--link);
  border-bottom: solid 1px var(--link);
  margin-bottom: 19px;
}

/* =========================
   内容
   ========================= */
main { flex-basis: 1024px; }

.measure {
  max-width: 90ch;   /* 60–75chの範囲で微調整 */
}

main h2 {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}
.items { margin-bottom: 20px; }

main h3::before {
  content: "□";
  margin-right: 6px;
}
main h3 {
  margin: 0 0 10px;
  font-weight: 400;
}

.introduction {
  margin-bottom: 40px;
  display: flex;
}
.introImage {
  margin-right: 40px;
  flex-shrink: 0;
}
.introText {
  padding-top: 20px;
  line-height: 1.6;
}

main p { 
  margin-bottom: 10px; 
  line-height: 1.7;
}

main ul {
  line-height: 2;
  margin-bottom: 20px;
}
main ol {
  margin-left: 20px;
  margin-bottom: 20px;
  line-height: 1.6;
  list-style-type: decimal;
}
ol li {
  padding-left: 6px;
  margin-bottom: 4px;
}

/* =========================
   フッター
   ========================= */
footer {
  background-color: var(--footer-bg);
  color: var(--on-accent);
  text-align: center;
  padding: 8px 20px 10px;
  position: sticky;
  top: 100vh;
  width: 100%;
}

/* =========================
   モバイル（~640px）
   ========================= */
@media screen and (max-width:640px) {
  header, .corps, footer { width: 100%; }

  /* ヘッダーを二行に、ボディーを一列に */
  header, .corps { display: block; }
  header {
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: none; /* 枠線はPCのみ */
  }
  header h1, .language { text-align: center; }
  header h1 {
    font-size: 22px;
    margin: 0;
    padding: 20px 0 0 0;
  }
  .language {
    font-size: 18px;
    margin: 0;
    padding-top: 15px;
  }
  .language a::before { content: " "; }
  .language a::after { content: " "; }

  /* メニューを開閉式に */
  nav {
    width: 100%;
    margin: 0 0 20px;
  }
  .pcMenu { display: none; }

  .Label { /* タイトル（トグルヘッダー） */
    font-size: 20px;
    padding: 16px 20px;
    display: block;
    color: var(--on-accent);
    background: var(--accent-strong);
  }
  .Label::before { /* タイトル横の矢印 */
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--on-accent);
    border-right: 2px solid var(--on-accent);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: calc(50% - 3px);
    right: 20px;
    transform: rotate(135deg);
  }

  .Label, .menuContents {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0;
  }

  .menuContents {  /* 本文（閉じているとき） */
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .toggle:checked + .Label + .menuContents { /* 開閉時 */
    height: auto;
    margin: 0;
    padding: 0;
    transition: all 0;
    background-color: var(--panel);
  }

  .menuItem {
    padding: 16px 30px 16px;
    margin-bottom: 0;
    border-bottom: 2px dotted var(--divider);
    transition: .2s;
  }
  .menuItem:hover {
    color: var(--fg);
    padding: 16px 30px 16px;
    margin-bottom: 0;
    border-bottom: 2px dotted var(--divider);
  }
  .menuItem:active {
    background-color: var(--bg);
  }

  .toggle:checked + .Label::before {
    transform: rotate(-45deg) !important;
  }

  /* ボディーの設定 */
  .corps {
    margin: 0 0 50px;
    padding: 0;
  }
  main { padding: 0 20px; }
  .introduction { display: block; }

  .link:active { text-decoration: underline 2px solid var(--link); text-underline-offset: 3px; background-color: transparent; -webkit-tap-highlight-color: transparent; }
}