@charset "utf-8";

.maru-num {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	border: 1px solid #333;
	border-radius: 50%;
	text-align: center;
	font-weight: bold;
}

#toc {
width: 680px;
background: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
}

.toc-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 8px;
  color: #ff6600;  /* オレンジ系で目立たせる */
}

/* 目次タイトル */
#toc h2 {
	margin-top: 0;
	font-size: 1.2em;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}

/* リスト全体 */
#toc ul {
	list-style: none;         /* デフォルトの点を消す */
	padding-left: 0;
	margin: 10px 0 0 0;
}

/* 大見出し */
#toc > ul > li {
	margin: 8px 0;
	font-weight: bold;
}

/* 小見出し（入れ子） */
#toc ul ul li {
	margin: 5px 0 5px 20px;  /* インデント */
	font-weight: normal;
	font-size: 0.95em;
}

/* リンクスタイル */
#toc a {
	text-decoration: none;
	color: #333;
	transition: color 0.2s;
}

/* ホバー時の色変化 */
#toc a:hover {
	color: #007BFF;
}

/* スムーズスクロール */
html {
	scroll-behavior: smooth;
}

/* データテーブル: .attention 内の table だけに適用 */
.attention table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: var(--white);
}

.attention th,
.attention td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.attention th {
    background-color: #b94e28;
    color: #fff;
}

        /* 季節ごとのカード */
        .season-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        @media (min-width: 600px) {
            .season-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .season-card {
            background: var(--white);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border-top: 5px solid #ccc;
        }

        .season-card.spring { border-top-color: #70c1b3; }
        .season-card.summer { border-top-color: #f25f5c; }
        .season-card.autumn { border-top-color: #ff9f1c; }
        .season-card.winter { border-top-color: #247ba0; }

        .season-title {
            font-weight: bold;
            font-size: 1.2rem;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .temp-range {
            font-size: 0.9rem;
            background: #eee;
            padding: 5px 10px;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: 10px;
        }

        /* 注意書きボックス */
        .alert-box {
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
            color: #856404;
            padding: 15px;
            border-radius: 5px;
            margin-top: 15px;
        }
        
        .alert-title {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }

        .special-june {
            background: linear-gradient(135deg, #fff, #ffe);
            border: 2px solid #ffd700;
        }

        footer {
            text-align: center;
            margin-top: 50px;
            font-size: 0.8rem;
            color: #666;
        }
				
				/* モーダル構造 */
				.overlay {
				  display: none !important;
				  position: fixed;
				  top: 0; left: 0;
				  width: 100%; height: 100%;
				  background: rgba(0,0,0,0.6);
				  justify-content: center;
				  align-items: center;
				  z-index: 999;
				}
				
				.modal {
				  background: #fff;
				  padding: 24px;
				  border-radius: 12px;
				  width: 300px;
				  text-align: center;
				  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
				}
				.modal button {
				  margin: 10px;
				  padding: 8px 16px;
				  border: none;
				  border-radius: 8px;
				  cursor: pointer;
				}
				#cancel { background: #ccc; }
				#go { background: #0078ff; color: white; }
				
				.climate-table td {
  text-align: right;
}

.nature-section {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

.nature-section ul {
  padding-left: 1.2em;
}

.nature-section li {
  margin-bottom: 0.8em;
  font-size: 0.95em; /* ← 追加 */
}

.nature-section .note {
  font-size: 0.9em;
  color: #555;
  margin-top: 1em;
}

.info-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.2em;
  margin-bottom: 1.8em;
  align-items: start;
}

.info-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.info-item p {
  margin: 0;
  line-height: 1.7;
  font-size: 0.95em;
}

/*=================================================================
YouTube埋め込み動画にテキストを重ねる
=================================================================*/

.video-wrapper {
  position: relative;
  width: 700px;
  height: 394px;
  overflow: hidden;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* テキスト重ね（ベースはそのまま） */
.video-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  z-index: 2;
	text-shadow:
  0 4px 20px rgba(0,0,0,0.95),
  0 0 6px  rgba(0,0,0,0.9);
}

.video-text h1 {
  position: absolute;
  top: 30px;     /* 上からの距離 */
  left: 20px;     /* 左からの距離 */
  font-size: 3rem;
  letter-spacing: 0.15em;
  margin: 0;
}

/* p：こちらも絶対位置指定 */
.video-text p {
  position: absolute;
  top: 300px;   /* h1より下 */
  left: 260px;  /* わずかに揃える */
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}