header.hero::after {
    content: "";
    background: rgba(0,0,0,0.4);
    position: absolute;
    inset: 0;
}
header.hero .container {
    position: relative;
    z-index: 2;
}
.main-title {
    background-color: #e9f0ff; /* やや明るめのブルー背景 */
    border-left: 6px solid #005bac;
    padding: 1rem 1.25rem;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 3rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.3rem;
}
.main-title::before {
    content: "📘"; /* 大見出し用アイコン */
    font-size: 1.4rem;
    color: #005bac;
}
.section-title {
    background-color: #f0f4f8; /* 淡いグレー＋青み */
    border-left: 5px solid #005bac; /* 伊藤忠ブルーの左線 */
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
}
.section-title::before {
    content: "▶"; /* または 📌 や ■ などに変更可 */
    font-size: 1.2rem;
    color: #005bac;
}

.section-title.dark-bg {
    background-color: #003366; /* 濃いネイビー系（伊藤忠ブルーのダーク版） */
    color: #ffffff;
    border-left: 5px solid #ffffff;
}

.section-title.dark-bg::before {
    color: #ffffff;
}

.section-title.green-bg {
    background-color: #e6f4e6; /* 薄い緑系 */
    color: #2c6b2c; /* 濃い緑系 */
    border-left: 5px solid #2c6b2c;
}

.section-title.green-bg::before {
    color: #2c6b2c;
}

.section-title.yellow-bg {
    background-color: #fff9e0; /* 優しい薄黄色（背景） */
    color: #b48a00; /* 濃い黄色〜金色（文字・枠線） */
    border-left: 5px solid #b48a00;
}

.section-title.yellow-bg::before {
    color: #b48a00;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    transition-delay: 0.1s; /* 表示の開始を0.2秒遅らせる */
}
.fade-in-up.show {
    opacity: 1!important;
    transform: translateY(0)!important;
}


.fade-in-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1.0s ease, transform 1.0s ease;
  transition-delay: 0.1s;
}
.fade-in-left.show {
  opacity: 1!important;
  transform: translateX(0)!important;
}

.fade-in-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1.0s ease, transform 1.0s ease;
  transition-delay: 0.1s;
}
.fade-in-right.show {
  opacity: 1!important;
  transform: translateX(0)!important;
}

.fade-in-down {
  opacity: 0;
  transform: translateY(-60px);
  transition: opacity 1.0s ease, transform 1.0s ease;
  transition-delay: 0.1s;
}
.fade-in-down.show {
  opacity: 1!important;
  transform: translateY(0)!important;
}


.section-green {
    background-color: #057E00; /* 淡いグリーン */
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    color: #FFFFFF;
}
.section-green::before {
    content: "⚡";
    font-size: 1.2rem;
    color: #748800;
}
.highlight-box {
    font-size: 1.5rem; /* 通常より大きめ */
    font-weight: bold;
    background-color: #e8f5e9; /* 淡いグリーン背景 */
    color: #2e7d32; /* 濃いグリーン文字 */
    padding: 1rem 1.5rem;
    border-left: 5px solid #43a047; /* 強調ライン */
    border-radius: 0.25rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* 上下スクロールボタン */
.scroll-btn {
  position: fixed;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: #005bac;
  color: white;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  opacity: 0.8;
  transition: opacity 0.3s;
}
.scroll-btn:hover {
  opacity: 1;
}
.scroll-btn.up {
  bottom: 80px;
}
.scroll-btn.down {
  bottom: 20px;
}