:root {
	--hero-height: 40vh;		/* コンテナの高さ */
	--focal-point: center 60%;	/* 画像の表示位置（x y） */
	--title-align: center;		/* タイトルの配置（center, flex-start, flex-end） */
	--all-background-color: gold;
	--tab-active-color: #598665;
	background-color: var(--all-background-color);
}
.pre-hero {
	margin-top:1em;
	margin-bottom:1em;
	background-color: var(--all-background-color);
}
.top_text {
	color:white;
	font-weight:bold;
	font-size:1.2em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	margin-left:2em;
	opacity:1;
	background-color: var(--all-background-color);
}
.hero-viewport {
	background-color: var(--all-background-color);
}
.hero-title {
	color:yellow;
	text-align:center;
}
.title_sub {
	font-size:0.5em;
	font-weight:normal;
}
.tab-buttons {
  border-bottom-color: var(--tab-active-color);
}
.tab-btn {
	font-family: "Zen Kurenaido",  serif;
	font-weight: 400;
	font-style: normal;
}
.tab-btn.active {
  background-color: black; /* アクティブな色 */
}
.tab-item {
  border-color: var(--tab-active-color);
}
.content {
	width:90vw;
	margin-left:auto;
	margin-right:auto;
}
.youtube {
	width:95vw;
	height:768px;
}
div#tab6 {
	font-family: "Shippori Mincho B1", serif;
	font-weight: 400;
	font-style: normal;
}
ul.check-list {
	list-style-type: none; /* デフォルトのドットを消す */
	padding-left: 20px;
}

ul.check-list li::before {
	content: "☐"; /* 未チェックなら ☐、チェック済み風なら ☑ */
	margin-right: 10px;
	display: inline-block;
	width: 1em;
}
.map {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}
.figure-right {
	width: 384px;
	margin-right: 30vw;
}
p.right {
	margin-right:3em;
	text-align:right;
}
/* --- スマホ・共通の基本設定 --- */
.right {
  width: 100%;        /* スマホでは横幅いっぱい */
  max-width: 100%;    /* はみ出し防止 */
  margin-right: 0;    /* スマホでは右余白をなくす */
  margin-bottom: 20px; /* 下に少し隙間を作る */
  height: auto;       /* 高さは自動調整 */
}
div.left.thumbnail > figure,
div.right.thumbnail > figure {
	margin: 0;
	width: 256px;        /* PCでの画像/地図の横幅 */
	height:auto;
}

/* --- PC・タブレット向けの調整 (画面幅が768px以上の場合) --- */
@media screen and (min-width: 768px) {
  .right {
    width: 384px;     /* 指定のサイズに戻す */
    margin-right: 20vw; /* 指定の余白に戻す */
    float: right;      /* 右に寄せる（元のレイアウトに合わせる場合） */
    margin-left: 20px;  /* テキストとの間に隙間を作る */
  }
}