@charset "utf-8";

/* =========================
   ベース
========================= */
body {
	font-family: 'Hiragino Kaku Gothic ProN','メイリオ',sans-serif;
	margin: 0;
	padding: 0;
	font-size: 90%;
	background: #eaf4ec; /* 統一：淡い萌黄色 */
	color: #2f3a2f;
}

a:link, a:visited {
	color: #5f9f8f;
	text-decoration: none;
}

a:hover {
	color: #4a8276;
	text-decoration: underline;
}

/* =========================
   メイン
========================= */
#main {
	width: 85%;
	background: #fff;
	border-top: 4px solid #5f9f8f; /* 赤→緑へ */
	margin: 20px auto;
	text-align: center;

	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	padding: 10px 0;
}

/* =========================
   タイトル
========================= */
h1 {
	font-size: 160%;
	color: #5f9f8f;
	margin-top: 0;
}

/* =========================
   記事
========================= */
div.article {
	width: 96%;
	margin: 15px auto;

	border-top: 1px solid #e3ece6;
	padding: 1em;

	text-align: left;
	color: #555;
}

div.art-date {
	text-align: right;
	color: #7aa66a; /* 萌黄色寄り */
	font-size: 90%;
}

div.art-sub {
	margin: 0.5em 0 1em 0;
	color: #5f9f8f;
	font-size: 120%;
	font-weight: bold;
}

/* =========================
   画像
========================= */
img.img {
	border: none;
	vertical-align: top;
	margin-right: 0.5em;
}

.youtube {
	text-align: center;
}

/* =========================
   トップパネル
========================= */
#top-panel {
	margin: 0.6em;
	text-align: left;
}

/* ボタン（浮き上がり統一） */
#top-panel input[type="button"] {
	width: 60px;
	margin-right: 4px;

	background: #f4f7f2;
	border: 1px solid #d7e3d2;
	border-radius: 8px;

	cursor: pointer;
	transition: 0.25s;
}

#top-panel input[type="button"]:hover {
	background: linear-gradient(135deg, #9dbb7a, #7aa66a);
	color: #fff;
	transform: translateY(-2px);
}

/* =========================
   検索
========================= */
#find-box {
	text-align: right;
	margin: 10px;
}

#find-box input[type="text"],
#find-top input[type="text"] {
	width: 160px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 6px;
}

/* =========================
   検索結果
========================= */
#find-top {
	margin: 0 auto;
	color: #555;
}

#find-top p {
	margin: 10px;
}

/* =========================
   強調
========================= */
.red {
	color: #e06767; /* 少しやわらかく */
}

/* =========================
   ページトップ
========================= */
div.pg-top, div.pg-top a {
	text-align: right;
	font-size: 90%;
	color: #5f9f8f !important;
	margin-bottom: 0;
}

/* =========================
   エラー
========================= */
#err {
	width: 450px;
	padding: 1.5em;
	margin: 3em auto;

	border: 1px solid #e3ece6;
	background: #fff;

	border-radius: 8px;
}

/* =========================
   ページャー（重要）
========================= */
.pagination {
	background: #f4f7f2;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 8px;
}

.page {
	display: inline-block;
	padding: 6px 10px;
	margin-right: 4px;

	border-radius: 6px;
	border: 1px solid #d7e3d2;

	background: #f4f7f2;
	color: #3a4a3a;

	font-size: .9em;
	font-weight: bold;

	transition: 0.2s;
}

.page:hover {
	background: #e6f0e3;
}

.page.active {
	background: linear-gradient(135deg, #9dbb7a, #7aa66a);
	color: #fff;
	border: none;
}

/* =========================
   アイコン
========================= */
img.icon {
	vertical-align: middle;
	border: 0;
}

/* =========================
   スマホ
========================= */
@media only screen and (max-width: 480px) {
	#main {
		width: 100%;
	}

	#find-box input[type="text"] {
		width: 90px;
	}

	.youtube {
     	position: relative;
     	padding-bottom: 56.25%;
     	height: 0;
     	overflow: hidden;
	}
	.youtube iframe {
     	position: absolute;
     	top: 0;
     	left: 0;
     	width: 100%;
     	height: 100%;
	}
}

.back-btn {
  text-align: right;
  margin-bottom: 10px;
}

.btn-home {
  display: inline-block;

  /* ↓ 小さくする */
  padding: 6px 14px;
  font-size: 0.85rem;

  background: linear-gradient(135deg, #e3f3ed, #a8d5c5);
  color: #2f3a2f;

  border-radius: 999px; /* ← ここで“丸み強化（ピル型）” */
  border: 1px solid #8fbfaf;

  text-decoration: none;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: all 0.2s ease;

  letter-spacing: 0.02em;
}

/* hover */
.btn-home:hover {
  background: linear-gradient(135deg, #7fb8a8, #5f9f8f);
  color: #fff;

  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* active */
.btn-home:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}