body {
  font-family: "メイリオ","Meiryo",verdana,"Hiragino Sans","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
  margin: 0;
  /* 背景イラストの設定 */
  background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('img/hp_bg_image.jpg');
  background-blend-mode: lighten;
  background-size: cover;                /* 画像を全体に表示 */
  background-position: center;           /* 画像を中央に配置 */
  background-repeat: no-repeat;          /* 画像の繰り返しを禁止 */
  background-attachment: fixed;          /* スクロールしても背景を固定 */
}

img {
  max-width: 100%;  /* 親要素の幅を超えない */
  height: auto;     /* 縦横比を維持 */
}

/* =========================
  header
========================= */
header {
  display: flex;
  justify-content: space-between; /* 左右に振り分け */
  align-items: center;
  padding: 8px 192px;
  background-color: #F6F7F8;       /* ② header color */
  border-bottom: 2px solid #9B95C9; /* ③ 下線 */
}

/* ロゴ左寄せ */
.header-logo-wrapper {
  text-align: left;
}

.header-logo-wrapper img {
  max-width: 216px; /* 親要素の幅が上限 */
  height: auto;    /* 縦横比を自動維持 */
}

/* リスト右寄せ */
.header-list-wrapper ul {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  gap: 36px;
}

/* =========================
  main
========================= */
main {
  min-height: 1000px;
  margin: 0px auto;
  padding: 0 196px;   /* ほんのり左右余白 */
}

.top-img-wrapper {
  padding-top: 24px;
  box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 48px;
}

.top-img-wrapper img {
  display: block;
}


/* =========================
  sub menu（情報エリア）
========================= */
.sub-menu-wrapper {
  margin-bottom: 48px;
  margin-left: 124px;
  margin-right: 124px;
  background-color: rgba(255, 255, 255, 0.88);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* 情報ブロック中央寄せ */
.information-wrapper {
  max-width: 720px;
  margin: 0 auto;
}

/* タイトル */
.title-wrapper {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}

.title-wrapper h2 {
  font-size: 20px;
  font-weight: bold;
}

.title-wrapper span {
  font-size: 14px;
  color: #9B95C9;
  text-transform: uppercase;
}

/* =========================
  information list
========================= */
.information-contents-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各行 */
.information-content {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #E0E0E0;
}

.information-content p:first-child {
  min-width: 120px;
  font-size: 14px;
  color: #666;
}

/* =========================
  product section
========================= */

/* 全体ラッパー */
.product-contents-wrapper {
  max-height: 700px;          /* ③ 高さを700pxに制限 */
  overflow-y: auto;           /* はみ出たら縦スクロール */
  max-width: auto;
  margin: 0 auto;             /* 中央寄せ */
  padding-right: 8px;         /* スクロールバー対策 */
  padding-top: 24px;
}

/* 各プロダクト */
.product-content {
  text-align: center;         /* ① 中央揃え */
  margin-bottom: 108px;
}

/* タイトル */
.product-content h3 {
  font-size: 24px;          /* ② 少し大きめ */
  margin-bottom: 16px;
}

/* 画像 */
.product-content img {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 16px;
  display: block;
}

/* テキスト */
.product-content p {
  font-size: 18px;
  margin-bottom: 8px;
}

/* =========================
  organization section
========================= */

.organization-contents-wrapper {
  position: relative;
  max-width: 720px;
  margin: 72px auto;
  padding-left: 32px;
}

/* 縦ライン（歴史の軸） */
.organization-contents-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  width: 2px;
  height: 100%;
  background-color: #9B95C9;
}

.organization-contents-wrapper h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 4px;
}

/* 各年表アイテム */
.organization-content {
  position: relative;
  background-color: rgba(155, 149, 201, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

/* 丸いマーカー */
.organization-content::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 20px;
  width: 12px;
  height: 12px;
  background-color: #596AE0;
  border-radius: 50%;
}

/* 偶数行でアクセント */
.organization-content:nth-child(even) {
  background-color: rgba(255, 169, 122, 0.15);
}

.organization-content:nth-child(even)::before {
  background-color: #FFA97A;
}

/* 日付 */
.organization-content p:first-child {
  font-size: 14px;
  font-weight: bold;
  color: #596AE0;
  margin-bottom: 8px;
}

/* ラッパーに relative を再確認 */
.organization-contents-wrapper {
  position: relative;
}

/* NEW ラベル */
.organization-contents-wrapper::after {
  content: "NEW";
  position: absolute;
  top: -28px;
  left: -6px;
  background-color: #FFA97A;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
}

/* PAST ラベル */
.organization-contents-wrapper .organization-content:last-child::after {
  content: "PAST";
  position: absolute;
  bottom: -24px;
  left: -32px;
  background-color: #596AE0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
}

/* =========================
  footer
========================= */
footer {
  background-color: #333132; /* ⑥ footer color */
  color: #F6F7F8;            /* ⑦ footer font-color */
  padding: 40px 0;
}

/* ロゴ中央揃え */
.footer-logo-wrapper {
  text-align: center; /* ⑤ 中央揃え */
}


/* =========================
  global link hover
========================= */

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease, text-decoration-color 0.4s ease;
}

a:hover {
  color: #596AE0;
  text-decoration: underline;
}

a img {
  transition: opacity 0.4s ease;
}

a:hover img {
  opacity: 0.7;
}

/* =========================
  loading screen
========================= */
#loading {
  position: fixed;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #F6F7F8;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* ロゴとゲージの間を広げる */
  z-index: 9999;
  transition: opacity 0.6s ease;
}

#loading img {
  width: 800px;
}

/* ゲージ枠 */
.loading-bar {
  width: 600px;   /* ← 横幅を大きく */
  height: 12px;   /* ← 太く */
  background-color: rgba(155, 149, 201, 0.25);
  border-radius: 999px;
  overflow: hidden;
}

/* ゲージ本体 */
.loading-bar-inner {
  width: 0%;
  height: 100%;
  background-color: #9B95C9;
  border-radius: 999px;
  transition: width 0.3s ease;

  background: linear-gradient(
    90deg,
    #9B95C9,
    #596AE0
  );
}

/* 非表示 */
#loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}











/* =========================
  レスポンシブ（タブレット対応）
  （〜1024px）
========================= */
@media screen and (max-width: 1024px) {
  main {
    padding: 0 64px;
    min-height: auto;
  }

  .sub-menu-wrapper {
    margin-left: 32px;
    margin-right: 32px;
    padding: 28px 24px;
  }
}








/* =========================
  レスポンシブ（スマホ対応）
========================= */
@media screen and (max-width: 768px) {
  /* header */
  header {
    padding: 2px 16px;
    display: block;
    position: sticky;
    top: 0;
    z-index: 1000; /* mainより前に出す */
  }

  .header-logo-wrapper h1 {
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .header-list-wrapper ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
  }

  .header-list-wrapper ul li {
    margin: 0 auto;
    margin-bottom: 12px;
  }

  /* main */
  main {
    padding: 0 16px;
    min-height: 900px;
  }

  .top-img-wrapper {
    margin-bottom: 32px;
  }

  .sub-menu-wrapper {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 32px;
    padding: 24px 16px;
    border-radius: 8px;
  }

  /* タイトルを縦並びに */
  .title-wrapper {
    flex-direction: column;
    gap: 4px;
  }

  .title-wrapper h2 {
    font-size: 18px;
  }

  /* information 行を縦並びに */
  .information-content {
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
  }

  .information-content p:first-child {
    min-width: auto;
    font-size: 13px;
  }

    .organization-contents-wrapper {
    padding-left: 24px;
  }

  .organization-content::before {
    left: -24px;
  }

  /* footer */
  .footer-logo-wrapper {
    font-size: 14px;
  }
}