/*
Theme Name: My GP Child
Template: generatepress
*/

/* ── ページ全体のリセット ── */
body {

	/* もはや背景画像は使わず、ダークグリーンの単色 */
	background: #080607;

}


/* ── 本文テキストの色 ── */
.content-area,
.content-area p,
.intro-box,
.intro-box p,
.section-box,
.sections-wrapper .wp-block,
.sections-wrapper .wp-block p {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	color: #241400;
}

/* ── H2 見出しの色 ── */
.sections-wrapper .wp-block h2,
.intro-box .intro-heading {
	font-size: xx-large;
	color: #2a1400;
}

/* dino-title をさらに大きく */
.dino-title {
	font-size: 4rem; /* ← お好きなサイズに */
	line-height: 1.1; /* タイトル行間が気になるときに */
}

/* モバイル時は少し下げる例 */
@media (max-width: 768px) {
	.dino-title {
		font-size: 2.5rem; /* モバイルではやや控えめに */
	}
}



/* ── 恐竜ページ本体コンテナにだけ背景画像を適用 ── */
.single-dinosaur .dinosaur-page {
	background: none !important;
}

.site-content {
	background-image: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/07/BackGroundBig3-scaled.jpg');
	background-size: 1200px auto;
	background-position: left top;
	background-repeat: no-repeat;
}

/* ── 余計な背景色を透明化 ── */
.content-area,
.widget-area,
.hero-section,
.hero-section::before {
	background: transparent !important;
}


/* ── .hero-section とその ::before は透明化 ── */
.hero-section,
.hero-section::before {
	background: transparent !important;
}

/* ── ヒーロー帯を疑似要素で背景化（今は透明化のまま） ── */
.hero-section {
	position: relative;
	overflow: visible;
	width: 928px;
	margin: 0 auto;
}

.hero-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 0;
}

.hero-section .hero-image {
	position: relative;
	display: block;
	width: 928px;
	height: auto;
	top:0px;
	z-index: 2;
}

.content-area {
	width: 928px; /* 1200px −（サイドバー240 + gap32）＝ 928px など */
	min-width: 928px;
}

/* ── タイトルオーバーレイ ── */
.hero-overlay {
	position: absolute;
	top: 2rem;
	left: 2rem;
	color: #fff;
	z-index: 3;
}

.hero-overlay .dino-title {
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-shadow: 3px 3px 2px #2e3928;
	-webkit-text-stroke: 1px #2e3928;
	text-stroke: 1px #2e3928;
}

.hero-overlay .dino-en {
	font-style: italic;
	font-family: "PT Serif", serif;
	font-weight: 400;
	font-size: 2.25rem;
	opacity: 0.6;
	margin-top: -1.75rem;
}


/* ── メタ情報 ── */
.intro-box .dino-meta {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}

.intro-box .dino-meta li {
	display: flex;
}

.intro-box .dino-meta li strong {
	width: 4em;
	font-weight: bold;
	color: #333;
}

.intro-box .dino-meta li {
	flex-direction: column;
	align-items: flex-start;
	margin-bottom:1rem;
}

.intro-box .dino-meta li strong {
	width: auto;
}



.intro-box .intro-text {
	border-radius: 8px;
	color: #222;
}

/* ── 各セクションボックス ── */
.sections-wrapper .wp-block {
	max-width: 900px;
	margin: 1rem auto;
	padding: 1rem;
	border-radius: 12px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.sections-wrapper .wp-block h2 {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
	font-weight: bold;
}

/* ── レスポンシブ ── */
@media (max-width: 768px) {
	.hero-overlay {
		top: 1rem;
		left: 1rem;
	}

	.dino-title {
		font-size: 2rem;
	}

	.intro-box {
		margin: -2rem auto 1rem;
		padding: 1.5rem 1rem 1rem;
	}

	.sections-wrapper .wp-block {
		margin: 1rem auto;
		padding: 1rem;
	}
}

/* ── 後半各セクションを角丸ベージュボックス化 ── */
.section-box {
	max-width: 900px;
	margin: 2rem auto;
	padding: 2rem 1.5rem 1.5rem;
	background-color: rgba(249,237,220,0);
	border-radius: 12px;
}

/* ── 全ページのヘッダーを非表示に ── */
.site-header {
	display: none;
}
/* ヘッダーがなくなったぶん、コンテンツを上に詰める */
.site-inner,
.container,
.site-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ── サイドバー全体を透明に ── */
.widget-area {
	background: transparent;
	padding: 0;
	margin: 0;
}
/* 各ウィジェットは不透過ベージュ */
.widget-area .widget {
	color: #edd4ab;
	background-color: #221205;

	/*border-radius: 12px;*/
	padding: 1.5rem;
	margin-bottom: 2rem;
	margin-right: 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	opacity: 0.8;
	/* 2. slice / width を 50px に統一 */
	border-image-source: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/06/Frame-3.png');
	border-image-slice: 60; /* 画像の四辺から 50px を枠として切り出し */
	border-image-width: 10px; /* border: と同じ値 */
	border-image-repeat: repeat; /* 切り出した枠を並べて繰り返し */
	/* 3. 内側余白 */
	padding: 1.5rem;
}

.widget-area .widget a:link {
	color: #edd4ab;
	text-decoration: underline !important;
}


.widget-area .widget-title {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	border-bottom: none;
	color: #edd4ab;
	text-decoration: underline !important;
}

.widget-area .widget a {
	color: #edd4ab;
	text-decoration: underline !important;
}

.widget-area .widget a:hover {
	color: #efc647;
	text-decoration: underline !important;
}

#block-31.widget {
	background: transparent !important;
	border: none !important;
}


/* ── サイドバーと本文の間隔調整 ── */
.content-area {
	padding-left: 2rem;
}

@media (max-width:768px) {
	.content-area {
		padding-left: 0;
	}
}

.site-content {
	display: flex;
	gap: 2rem;
}
/* 念のため、幅調整 */
.content-area {
	flex: 1;
}

.widget-area {
	flex: 0 0 240px;
}

/* Frame.png の透明余白が上下左右 50px の場合 */
.frame-box {
	/* 1. 枠線の幅を border で指定 */
	border: 40px solid transparent;
	/* 2. slice / width を 50px に統一 */
	border-image-source: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/06/Frame-3.png');
	border-image-slice: 140 fill; /* 画像の四辺から 50px を枠として切り出し */
	border-image-width: 40px; /* border: と同じ値 */
	border-image-repeat: repeat; /* 切り出した枠を並べて繰り返し */
	/* 3. 内側余白 */
	padding: 1rem;

	/* 5. レイアウト */
	max-width: 100%;
	margin: 1rem 1rem 1.5rem;
}


/* 内部コンテンツを前面に */
.frame-box > * {
	position: relative;
	z-index: 1;
}

.view3d-button {
	display: inline-block;
	padding: 10px 20px;
	background: linear-gradient(#2e4b26, #1f351b); /* 深緑グラデーション */
	border: 4px solid #a68545; /* 金縁風 */
	border-radius: 8px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #f7f3e6; /* アイボリー系文字色 */
	text-shadow: 2px 2px 0 #000;
	/* 立体感 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); /* 浮いてる感 */
	cursor: pointer;
	transition: all 0.2s ease;
	position: absolute;
	bottom: 0.5rem;
	right: 1rem;
	z-index: 4;
	text-decoration: none !important;
}

.view3d-button a {
	text-decoration: none;
}




.view3d-button:hover {
	color: #f7f3e6;
	background: linear-gradient(#3d6333, #2f4b29);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}




/* ----------------------------樹形図 */
.cladogram-tree {
	list-style-type: none;
	display: block;
	position: relative;
	padding: 30px;
	background-color: #c8c0b0;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	color: #241400;
}

.cladogram-tree h3 {
	color: #594314;
	font-weight:bold;
}

.cladogram-tree h4 {
	margin-bottom:0;
}

.cladogram-tree li {
	line-height: 32px;
	margin: 0 !important;
}

.cladogram-tree ul {
	display: block;
	position: relative;
	padding: 0;
	padding-left: 21px;
	padding-inline-start: 21px;
	margin: 0;
	margin-bottom: 10px !important;
}

.cladogram-tree ul:before {
	content: "";
	position: absolute;
	top: -2px;
	bottom: 0;
	left: -20px;
	width: 0;
	border-left: 1px solid gray;
	margin-left: 24px;
}

.cladogram-tree ul li {
	display: block;
	position: relative;
}

.cladogram-tree ul li:before {
	content: "";
	position: absolute;
	top: 18px;
	bottom: 0;
	left: -17px;
	width: 14px;
	height: 0;
	border-top: 1px solid gray;
}

.cladogram-tree ul li:last-child:before {
	height: auto;
	background-color: #c8c0b0;
}



/*コメント----------------------------*/

#comments {
	margin: auto;
	/*width: 800px;
	border-radius: 20px;*/
	background-color:transparent;




}

#comments.comments-area {
	width: auto;
	height: auto;
	margin:0 !important;

	padding-bottom: -10px;
}

.separate-containers .comments-area {
	margin-top: 0 !important;
}


.comment-box {
	background-color: #fff;
	width: 800px;
	padding-top: 0px;
	padding-bottom: 10px;
	border-radius: 20px;
	margin: auto;
}






/*アーカイブページ-----------------------------------------------------------------------*/
/* ── タクソノミー共通ページ ── */
.taxonomy-page {
	margin-top: 5rem;
}


/* taxonomy.php 用：ヒーローセクションに余白を追加 */
.taxonomy-page .index-page .hero-section {
	/* 上下にスペースを入れて、文字だけでなく領域として確保 */
	padding: 3rem 0; /* 上下3rem 空ける例 */
	margin-bottom: 4rem; /* さらに下に2remあれば安心 */
}

.taxonomy-page .hero-overlay {
	/* ヒーロー内の文字位置も少し下げたい場合 */
	top: 50%; /* 仮に中央寄せにするなら */
	transform: translateY(-70%);
}


.taxonomy-title {
	font-size: 2rem;
	margin-bottom: 0.5rem;
	color: #2f3e2d;
}

.taxonomy-description {
	font-size: 1rem;
	color: #555;
	line-height: 1.6;
}

/* 投稿一覧グリッド */
.dino-archive-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 14px;
	list-style: none;
	padding: 0;
	margin: 2rem auto;
	margin-left: 15px;
	max-width: 1200px;
}

.dino-item {
	/* 1. 枠線の幅を border で指定 */
	border: 16px solid transparent;
	/* 2. slice / width を 50px に統一 */
	border-image-source: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/06/Frame-3.png');
	border-image-slice: 53 fill; /* 画像の四辺から 50px を枠として切り出し */
	border-image-width: 16px; /* border: と同じ値 */
	border-image-repeat: repeat; /* 切り出した枠を並べて繰り返し */
}

.dino-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.dino-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.dino-name {
	font-size: 1.1rem;
	padding-top: 1rem;
	color: #333;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	color: #241400;
}

/* 投稿一覧の恐竜名リンクの下線を消す */
.index-list a,
.dino-archive-list .dino-item a,
.dino-archive-list .dino-item a:hover {
	text-decoration: none !important;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	color: #241400;
}


/*さくいん-------------------------------------*/
.index-page .hero-section {
	/* 上下にスペースを入れて、文字だけでなく領域として確保 */
	padding: 3rem 0; /* 上下3rem 空ける例 */
	margin-bottom: 2rem; /* さらに下に2remあれば安心 */
}



/*固定ページ---------------------------------------------*/
/* ──────────
すべての固定ページ共通スタイル
────────── */

/* 1. ページ全体の背景を透明化（サイドバー・全体背景はそのまま） */
.inside-article {
	background: transparent !important;
}


/* 2. ページタイトルを共通デザインに */
body.page .entry-title,
body.page h1.page-title {
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	text-shadow: 3px 3px 2px #2e3928;
	-webkit-text-stroke: 1px #2e3928;
	text-stroke: 1px #2e3928;
}

/* 3. 本文をベージュ背景＋枠線のボックスに */
body.page .entry-content {
	/* 1. 枠線の幅を border で指定 */
	border: 40px solid transparent;
	/* 2. slice / width を 50px に統一 */
	border-image-source: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/06/Frame-3.png');
	border-image-slice: 140 fill; /* 画像の四辺から 50px を枠として切り出し */
	border-image-width: 40px; /* border: と同じ値 */
	border-image-repeat: repeat; /* 切り出した枠を並べて繰り返し */
	/* 3. 内側余白 */
	padding: 1rem;
}

/* 4. 見出しやリンクの色もページ本文内で調整 */
body.page .entry-content h2 {
	color: #2a1400;
}

body.page .entry-content a {
	color: #2f3e2d;
}

body.page .entry-content a:hover {
	color: #444;
}

/*トップページ----------------------------------*/
/* Front Page Hero */
.front-page .hero-section {
	height: auto;
	max-width: 100%;
}


.index-page .content-area,
.front-page .content-area {
	width: 928px;
	min-width: 928px;
	margin: 0 auto;
}

/* page-index.php（トップページ）の恐竜リストを 3 列に強制 */
body.page-template-page-index .dino-archive-list {
	grid-template-columns: repeat(3, 1fr) !important;
}

.toppage_heading{
	color:#edd4ab;
	margin-bottom:-15px;
}


/* frame-box は相対位置に */
.section-box.frame-box {
  position: relative;
}


/* ────────────────────────────────
   個別恐竜ページだけ本文を928pxに固定
──────────────────────────────── */
/* 親の .site-content は全幅を保持 */
.single-dinosaur .site-content {
  display: flex;             /* すでに flex ですが念のため */
  justify-content: center;   /* 子要素を中央寄せ */
}

/* 本文エリアだけ 928px に */
.single-dinosaur .content-area
main.dinosaur-page{
  max-width: 928px !important;
  width: 928px !important;
  box-sizing: border-box;
}




/* ───────────────────────── スマホ（768px 以下）向けレスポンシブ調整 ── */
@media (max-width: 768px) {
	/* サイドバーを本文の下に配置 */
	.site-content {
		display: flex;
		flex-direction: column; /* ← column に変更 */
		gap: 1rem;
	}

	.content-area,
	.widget-area {
		width: 100% !important;
		min-width: 0 !important;      /* ← これを追加 */
		margin: 0 auto !important;
		padding: 0 1rem; /* ここで両者とも左右1rem */
		box-sizing: border-box;
	}

	/* サイドバーのトップマージンだけ残したいなら */

	.inside-right-sidebar {
		margin: 0;
	}

	.widget-area, sidebar, is-right-sidebar {
		margin: auto;
		padding: 0;
		padding-left: 1.5rem;
		align-items: center;
	}

	/* 以下は前回のまま… */
	.single-dinosaur .dinosaur-page {
		background-image: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/07/BackGroundBig3Mobile.jpg.jpg');
		background-size: 100% auto;
		background-position: left top -15px;

	}

	/* 背景画像をモバイル用に切り替え＆横幅に合わせて全体を表示 */
	.site-content {
		background-image: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/07/BackGroundBig3Mobile.jpg') !important;
		background-size: contain; /* 縦横比を保ったまま、全体が見えるように */
		background-repeat: no-repeat; /* 繰り返しは不要 */
		background-position: left top -15px;
	}

	/* ヒーロー画像を全ページ共通で可変に */
	.hero-section .hero-image {
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
		display: block;
		margin-top: 0 !important;
		position: relative;
		margin-bottom:2rem;
	}

	/* ヒーロー帯そのものも画面幅いっぱいに */
	.hero-section {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}	

	.single-dinosaur .hero-section .hero-image{
		width: 100%;
		height: auto !important;
		max-width: none;
		margin-top: -1rem;
		/*top:30px;*/
	}

	.single-dinosaur .hero-section {
		width: 100%;
		height: auto !important;
		margin: 0;
	}




	body {
		padding: 0;
		margin: 0;
	}

	.taxonomy-page,
	.dinosaur-page {
		padding: 1rem 0;
	}

	.frame-box {
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}

	/* 親をフル幅に */
	.comments-area {
		width:100% !important;
		margin:0 !important;
		padding:0 !important;
		box-sizing:border-box;
	}
	/* フォームとスレッド本体を 90% 幅にして中央寄せ */
	#comments #wpdcom,
	#comments .wpd-form-wrap,
	#comments .wpd-thread-wrapper {
		width:95% !important;
		margin:0 auto !important;
		padding:1rem 0 !important;
		box-sizing:border-box;
	}



	/* 必要なら中のリスト／フォームにも同様の余白調整を */
	.comments-area .comment-list,
	.comments-area .comment-respond {
		padding: 0 !important;
	}

	#comments {
		border-radius: 10px;
	}

	.wpd-form-wrap,
	.wpd-thread-wrapper {
		margin: 1rem;
	}

	.view3d-button {
		display: inline-block;
		padding: 6px 12px;
		background: linear-gradient(#2e4b26, #1f351b); /* 深緑グラデーション */
		border: 4px solid #a68545; /* 金縁風 */
		border-radius: 8px;
		font-family: "Noto Sans JP", sans-serif;
		font-size: 14px;
		font-weight: bold;
		color: #f7f3e6; /* アイボリー系文字色 */
		text-shadow: 2px 2px 0 #000;
		/* 立体感 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); /* 浮いてる感 */
		cursor: pointer;
		transition: all 0.2s ease;
		position: absolute;
		bottom: -1rem;
		right: 1rem;
		z-index: 4;
		text-decoration: none !important;
	}

	.frame-box,
	body.page .entry-content {
		/* 1. 枠線の幅を border で指定 */
		border: 20px solid transparent;
		/* 2. slice / width を 50px に統一 */
		border-image-source: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/06/Frame-3.png');
		border-image-slice: 140 fill; /* 画像の四辺から 50px を枠として切り出し */
		border-image-width: 20px; /* border: と同じ値 */
		border-image-repeat: repeat; /* 切り出した枠を並べて繰り返し */
		/* 3. 内側余白 */
		padding: 0rem;

		/* 5. レイアウト */
		max-width: 100%;
		margin: 1rem 1rem 1.5rem;
	}

	.frame-box h2 {
		font-size: 1.4rem; /* モバイル時はさらに小さく */
	}


	.cladogram-tree {
		list-style-type: none;
		display: block;
		position: relative;
		padding: 0px;
		background-color: #c8c0b0;
		font-family: "Noto Sans JP", sans-serif;
		font-optical-sizing: auto;
		font-weight: <weight>;
		font-style: normal;
		color: #241400;
		font-size: 1.0rem;
	}

	.cladogram-tree h3 {
		color: #594314;
		font-size: 1.2rem;
	}

	.taxonomy-page {
		margin-top: 2rem;
	}

	.dino-archive-list {
		display: block; /* grid を解除 */
		margin: 1.5rem auto; /* 上下マージン調整、中央寄せ */
		padding: 0 1rem; /* 横余白 */
	}

	.dino-archive-list .dino-item {
		display: flex; /* アイテム内レイアウトは必要に応じて */
		flex-direction: column;
		margin-bottom: 1rem; /* アイテム間の間隔 */
		width: 100%; /* 幅いっぱいに */
	}


	.dino-item {
		/* 1. 枠線の幅を border で指定 */
		border: 16px solid transparent;
		/* 2. slice / width を 50px に統一 */
		border-image-source: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/06/Frame-3.png');
		border-image-slice: 50 fill; /* 画像の四辺から 50px を枠として切り出し */
		border-image-width: 16px; /* border: と同じ値 */
		border-image-repeat: repeat; /* 切り出した枠を並べて繰り返し */
		width: 90%;
		align-items: center;
	}

	/* 1. 固定ページ本文エリアをフル幅＋余白調整 */
	body.page .inside-article,
	body.page .entry-content {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 1rem !important; /* 横余白を確保 */
		margin: 0 auto !important;
		box-sizing: border-box;
	}

	/* 2. 枠付きボックスも可変幅に */
	body.page .entry-content {
		border-width: 20px !important; /* 枠太さをモバイル向けに細めにしてもOK */
	}

	/* 3. 見出しやテキストサイズも調整 */
	body.page .entry-content h2 {
		font-size: 1.2rem !important;
		margin-bottom: 0.75rem;
		font-family: "Noto Sans JP", sans-serif;
	}

	body.page .entry-content p {
		font-size: 1rem !important;
		line-height: 1.6;
	}

	.inner-padding {
		margin: 0;
	}

	.widget-area .widget {
		color: #edd4ab;
		background-color: #221205;

		/*border-radius: 12px;*/
		padding: 1.5rem;
		margin-bottom: 2rem;

		box-shadow: 0 2px 6px rgba(0,0,0,0.05);
		opacity: 0.8;
		width: 90%;
		/* 2. slice / width を 50px に統一 */
		border-image-source: url('https://zukan.kyoryukan.net/wp-content/uploads/2025/06/Frame-3.png');
		border-image-slice: 60; /* 画像の四辺から 50px を枠として切り出し */
		border-image-width: 10px; /* border: と同じ値 */
		border-image-repeat: repeat; /* 切り出した枠を並べて繰り返し */
	}

	.widget, .inner-padding, .widget_block	{
		padding-left:0;
		margin:auto;
	}

	.widget-area, .sidebar, .is-right-sidebar, .inside-right-sidebar
	{
		padding-left:0;
		margin:auto;
	}

	/* フロントページでもヒーロー帯を画面幅いっぱいに */
	body.page-template-page-index .hero-section,
	body.home .hero-section {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* ヒーロー画像を可変幅に */
	body.page-template-page-index .hero-section .hero-image,
	body.home .hero-section .hero-image {
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
		display: block;
	}


	.hero-overlay .dino-title {
		font-family: "RocknRoll One", sans-serif;
		font-weight: 400;
		font-style: normal;
		text-shadow: 3px 3px 2px #2e3928;
		-webkit-text-stroke: 1px #2e3928;
		text-stroke: 1px #2e3928;
		font-size: 1.5rem;
	}	

	.hero-overlay .dino-en {
		font-style: italic;
		font-family: "PT Serif", serif;
		font-weight: 400;
		font-size: 1.0rem;
		opacity: 0.6;
		margin-top: -1.6rem;
	}

	/* ヒーロー帯ごと少し上に */
	.hero-section {
		/* もし上下余白（padding/margin）があればリセット */
		padding-top: 0 !important;
		margin-top: -20px; /* 画像ごと上に移動 */
	}

	/* もしくは画像だけ上に引き上げたい場合 */
	.hero-section .hero-image {
		margin-top: -15px !important;
		/* すでに width:100% height:auto を効かせている想定 */
	}


	/* トップページの「新着恐竜」とか */
	.toppage_heading
	{
		width: 200px;
		font-size: 1.3rem;
	}

	/* スマホだけ表示許可＆位置固定・初期非表示 */
	.floating-hamburger {
		position: fixed;
		top: 1rem;
		right: 1rem;
		z-index: 9999;

		width: 1.5rem;
		height: 1.5rem;
		background-color: rgba(249, 237, 220, 0.5);
		border: none;
		border-radius: 50%;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);

		font-size: 0.8rem;
		line-height: 1;
		text-align: center;
		color: #2f3e2d;
		cursor: pointer;
		margin: 0;
		padding: 0;
	}


	.index-page  {
		/* 上下にスペースを入れて、文字だけでなく領域として確保 */
		padding: 3rem 0; /* 上下3rem 空ける例 */
		margin-bottom: 5rem; /* さらに下に2remあれば安心 */
	}

	.index-page .dino-title {
		margin-top: -3rem; 
	}	

}

/* ──────────────────────────
フローティングハンバーガーボタン用スタイル
──────────────────────────*/

/* PCでは完全非表示 */
.floating-hamburger {
	display: none;
}

@media (max-width: 768px) {
	/* スマホ時のみ表示許可 */
	.floating-hamburger {
		display: block;
		position: fixed;
		top: 1rem;
		right: 1rem;
		z-index: 9999;

		width: 1.5rem;
		height: 1.5rem;
		line-height: 1.0rem;
		text-align: center;
		font-size: 1rem;
		color: #2f3e2d;
		background-color: rgba(249,237,220,0.8);
		border: none;
		border-radius: 50%;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);


		cursor: pointer;

		/* 初期非表示 → JSで .show クラスを付け替えてフェードイン */
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	/* スクロールで .show を付与 */
	.floating-hamburger.show {
		opacity: 1;
	}
}