/* 色のカスタマイズ */
.bg-sky {
	background-color: #cbe6fc;
}

.footer {
	background-color: #8f6606;
}

.text-gray {
	color: #333333;
	font-weight: bold;
}

/* ナビゲーションバー全体を少し透けさせて、グラデーションをかける */
.nav-item {
    background: linear-gradient(135deg, #c8e6c9 0%, #ffffff 100%) !important;
    box-shadow: 0 2px 10px rgba(0,50,0,0.1); /* 下に薄い影をつけて立体感を出す */
    padding: 1rem 2rem; /* 上下の幅を少し広げてゆとりを持たせる */
}

/* リンクにマウスを乗せた時に色を変える */
.nav-link {
    transition: color 0.3s ease; /* 色の変化を滑らかにする */
    font-size: 1.2rem !important; /* 標準より20%大きく設定 */
    font-weight: 600;            /* 少し太めにすると読みやすくなります */
    color: #333 !important;      /* 文字色を濃くして視認性をアップ */
    transition: 0.3s;
}

.nav-link:hover {
    color: #007bff !important; /* マウスを乗せると青くなる */
    text-decoration: underline; /* 下線を出す */
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(51,51,51,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler{
  border-color: #333333;
}

.btn-primary {
    background: #3498db;
    color: #FFFFFF;
}



h2 {
  position: relative;
  padding: 0.6em 1em;
  /* 左から右へ、非常に薄い緑から白へのグラデーション */
  background: linear-gradient(to right, #87ceeb, #ffffff);
  color: black;

  /* 二重の影で質感をアップ（内側の白ハイライト＋外側の影） */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.08);

  /* 下に細い濃緑の線を入れる（前の::afterの代わり） */
  border-bottom: 1px solid #d0e8d5;
}
  
    
/* 見出しをおしゃれに 光沢グラデーション */
h4 {
  position: relative;
  padding: 0.6em 1em;
  /* 左から右へ、非常に薄い緑から白へのグラデーション */
  background: linear-gradient(to right, #e9f5ec, #ffffff);
  color: #1b5e20;
  border-left: 6px solid #1b5e20;
  
  /* 二重の影で質感をアップ（内側の白ハイライト＋外側の影） */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.08);
  
  /* 下に細い濃緑の線を入れる（前の::afterの代わり） */
  border-bottom: 1px solid #d0e8d5;
}



/* 日付のスタイル：背景をつけてタグ風に */
.header-timeline-date {
    display: inline-block;
    background: #e9f5ec; /* 薄い緑 */
    color: #1b5e20;      /* 濃い緑 */
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-bottom: 5px;
    font-weight: bold;
}

/* タイムライン全体のコンテナ */
ul.timeline {
    list-style-type: none;
    position: relative;
    padding-left: 50px; /* 線とドットのための余白を確保 */
}

/* 縦線：グラデーションで消えていくように見せる */
ul.timeline:before {
    content: ' ';
    background: linear-gradient(to bottom, #d4d9df 0%, #d4d9df 90%, transparent 100%);
    display: inline-block;
    position: absolute;
    left: 19px; /* ドットの中心に合わせる */
    width: 2px;
    height: 100%;
    z-index: 1;
}

/* 各リスト項目 */
ul.timeline > li {
    margin: 30px 0;
    position: relative;
}

/* ドット：光彩（シャドウ）をつけて立体的に */
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #1b5e20; /* 濃い緑 */
    left: -40px; /* padding-leftに合わせて調整 */
    width: 20px;
    height: 20px;
    z-index: 2;
    /* 緑の光彩を追加 */
    box-shadow: 0 0 0 4px rgba(27, 94, 32, 0.1);
}

/* 記事タイトルの微調整 */
ul.timeline > li h5 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
    display: inline-block; /* 線を文字の長さだけに合わせるために必要 */
    /* ここを追加 */
    border-bottom: 2px solid #1b5e20; /* 2pxの太さの緑色の線 */
    padding-bottom: 2px;             /* 文字と線の隙間 */
}

/* テキスト */
p {
    font-family: "Yu Mincho", "YuMincho", "MS Mincho", serif;
    line-height: 1.8;   /* 行間を少し広げると読みやすくなります */
    color: #444;        /* 真っ黒より少しグレーにするとおしゃれです */
}

/* Container holding the image and the text */
.img-overlay-container {
  position: relative;
  text-align: center;
  color: white;
}

/* Centered text */
.img-overlay-centered {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translate(0%, -50%);
}

/* 表の枠線 */
table {
	border: 2px solid #000000;
	border-collapse: collapse;
	margin-right: auto;
	margin-left: auto;
}
th, td {
	border: 1px solid #000000;
}