html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	line-height: 1.6;
	color: #000;
	justify-content: center; /* 中央寄せ */
	background-color: #ECE4D1;
	flex-direction: column; /* ← 縦方向に並べる */
	align-items: center;    /* 中央寄せしたい場合 */
	font-size: 18px;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

.top-bar {
	display: flex;
	justify-content: flex-end; /* 右端に寄せる */
	padding: 8px 20px;
	background-color: #9F836F;
	max-width: 1920px;
	margin: 0 auto;
}
.top-bar a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
}
.top-bar a:hover {
	text-decoration: none;
}

.band {
	background-color: #C79B71;
	color: #fff;
	text-align: center;
	padding: 5px 0;
}

.cards a,  .band a {
	text-decoration: none;
	color: inherit;
}

footer {
	background: #fff;
	padding: 15px;
	height: 43.5vh;
}

.container {
	display: flex;           /* 横並び */
	gap: 20px;              /* 列の間隔 */
	max-width: 1264px;
	margin: 0 auto;
}

.left, .right {
	flex: 1;                /* 幅を均等に */
	padding: 20px;
}

.right p {
	font-size: 10px;
	width: 500px;
}

.left img {
	padding-top: 20px;
	width: 100%;
	max-width: 450px;
}

.margin_top70 {
	margin-top: 70px !important;
}

.margin_bottom30 {
	margin-bottom: 30px !important;
}

.margin_bottom70 {
	margin-bottom: 70px !important;
}

.margin_right20 {
	margin-right: 20px !important;
}

.margin_left20 {
	margin-left: 20px !important;
}

.padding_top30 {
	padding-top: 30px !important;
}

header {
	color: #fff;
	width: 100%;
	margin: 0 auto;
	background-color: #9F836F;
}

.nav-container {
	display: flex;
	align-items: center;
	background: linear-gradient(to right, #ECE4D1 50%, #fff 50%);
}

.logo {
	margin-left: 20px;
	margin-right: 50px;
	height: 92px;
}

.logo a img {
	max-width: 450px;
	width: 100%;
}

nav ul {
	list-style: none;
	margin: 0px 0 0 0;
	padding: 0;
	display: flex;         /* 横並び */
}

nav li {
	position: relative;    /* ドロップダウン用 */
	background-color: #fff;
	margin-bottom: 0px;
}

nav a {
	color: #000;
	text-decoration: none;
	padding: 15px 30px;
	display: block;
	font-size: 24px;
}

nav a:hover {
	color: #fff;
	background-color: #CD1111;

}

/* ドロップダウン */
.dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #444;
	width: 100%;
	z-index: 1000;
	flex-direction: column;
	margin-top: 0px;
}

.dropdown li a {
	padding: 10px;
}

nav li:hover .dropdown {
	display: flex;
}

/* --- ここから「1とテキスト」専用 --- */
.number-text {
	display: flex;
	align-items: center;
}
.number-text .big-number {
	font-size: 52px;    /* 通常の2倍くらい */
	line-height: 1;     /* 数字だけ縦詰め */
	margin-right: 10px;
	font-weight: bold;
	font-family: "Times New Roman", Times, serif;
}
.number-text .text-lines {
	font-size: 24px;
	line-height: 1.3;
}


.active_menu {
	color: #fff;
	background-color: #CD1111;
}

.yohaku {
	width: 584px;
	display: none;
}

.dropdown a:hover {
	color: #CD1111;
	background-color: #fff;
	font-weight: bold;
}

main {
	margin: 0 auto;
	box-sizing: border-box;
	display: block;
}

.content_body {
	max-width: 1280px;
	background-color: rgba(255, 255, 255, 0.5);
	text-align: center;
	margin: 0 auto;
	padding-bottom: 1px;
	margin-bottom: 200px;
}

.content_body h1 {
	font-size: 60px;
	font-weight: bold;
}

.content_body h1 span {
	color: #CD1111;
}

.card {
	margin: 0px auto 60px auto;
	padding: 10px 60px 30px 60px;
	background-color: rgba(255, 255, 255, 0.9451);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	text-align: left;
	width: 85%;
}

.card_header {
	display: flex;
	align-items: flex-start;
}

.card_header .number {
	font-size: 96px;
	color: #CD1111;
	margin: 0 20px 0 0;
}

.card_header .title_line1 {
	margin-top: 70px;
}

.card_content {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin: 40px 0;
}

.card_content img {
	max-width: 100%;
}

.card_content img .img_padding {
	padding: 0 20px 0 40px;
}

.card_content div {
	margin: 20px 0 0 0;
}

.text {
	flex: 1;
	min-width: 250px;
	line-height: 1.8;
	text-align: left;
}

.text span {
	color: #CD1111;
	font-weight: bold;
}

.orange {
	color: #dd7a1b !important;
	font-weight: bold;
}

.h1_number {
	color: #000 !important;
	font-family: "Times New Roman", Times, serif;
	font-size: 120px;
	font-weight: bold;
}

.contents {
	max-width: 1920px;
	box-sizing: border-box;
	position: relative;
	margin: 50px auto 0 auto;
	padding-bottom: 80px;
}

.contents h2 {
	width: 90%;
	margin: 0 auto;
	background-image: url(../images/h2_title.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	height: auto;
	aspect-ratio: 1000 / 160;
	text-align: center;
	font-size: clamp(1rem, 2.5vw, 3rem);
}

.contents h2 .h2_number {
	color: #C8161D;
	display: block;
	font-family: "Times New Roman";
	font-size: clamp(1rem, 3.5vw, 4rem);
	padding-top: clamp(1rem, 4vw, 5rem);
	margin-bottom: clamp(-20px, -1vw, 0px);
}

.contents h2 .h2_highlight {
	color: #C8161D;
}

.card_content__column {
	background: #EEEEEE;
	border-radius: 16px 16px 0 0;
	padding: 52px 32px 32px 32px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 2px solid #572E12;
	background: linear-gradient(to bottom, #ffda71 30px, #572e12 30px, #572e12 32px, #f8f0e3 32px);
}

.card_content__column h3 {
	font-size: 24px;
	font-weight: bold;
	color: #572E12;
	margin: 30px 0;
}

.card_content__column p {
	font-size: 16px;
	line-height: 1.8;
	flex: 1;
}

.card_content__column .icon {
	text-align: right;
	margin-right: -31px;
}

.card_content__column .icon button {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #00c08b;
	background: #fff;
	color: #00c08b;
	font-size: 18px;
	cursor: pointer;
}

.card_content__column .icon button:hover {
	background: #00c08b;
	color: #fff;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 26px 15px 26px 40px;
	background: #CD1111;
	color: #fff;
	border-radius: 40px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	margin-bottom: 60px;
}

.icon-circle {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	padding: 0px 0 0 2px;
	margin: 0 0 0 59px;
}

.icon-circle2 {
	margin: 0 0 0 12px;
}

.icon-circle .arrow {
	display: inline-block;
	transform: rotate(90deg);   /* ▼ を 90度回転（右向き） */
	font-size: 16px;
	line-height: 1;
	color: #CD1111;                 /* 矢印の色（赤） */
}

/* 任意：ホバー時の軽い演出 */
.pill:hover {
	filter: brightness(1.2);
}

.dropdown_active {
	color: #CD1111;
	font-weight: bold;
}

@media (max-width: 1000px) {
	.hamburger_menus {
		grid-template-columns: auto !important;
	}
}

@media (max-width: 768px) {
	body {
		width: 100%;
	}

	.contents {
		width: 100%;
		background: none;
	}

	header {
		width: 100%;
		min-width: 100%;
	}

	h1 img {
		width: 100% !important;
	}

	.sub_contents_title img {
		width: 30%;
	}

	.left img {
		width: 100%;
	}

	.right img {
		width: 70%;
	}

	.right a img {
		width: 20%;
	}

	.right p {
		width: 100%;
	}

	.intro {
		margin: 0 10px;
		padding: 0;
		transform: none;
		max-width: 100%;
	}

	.card {
		margin: 0 10px 20px 10px;
		height: 75%;
	}

	.nav-container {
		display: block;
		background: #ECE4D1;
	}

	.nav-container_content {
		display: block !important;;
	}

	.yohaku {
		display: none;
	}

	main {
		width: 100%;
	}

	.cards {
		justify-content: left !important;
		gap: 1rem !important;
		width: 88%;
		margin: 4rem auto !important;
		align-items: stretch;
	}

	.card_content__column {
		display: block;
		margin: 0 0 10px 0;
	}

	.card_content div {
		width: 100%;
	}

	.card_content_img {
		width: 46% !important;
	}

	.card_content_img2 {
		width: 25% !important;
	}

	.card_content .text {
		min-width: 46%;
	}

	.box {
		width: 100% !important;
	}

	table {
		width: 100% !important;
		margin: 0 !important;
	}

	iframe {
		width: 100%;
	}

	.top-bar {
		max-width: 100%;
		width: 100%;
		padding: 8px 0;
	}

	nav {
		margin-top: 40px;
	}

	.band {
		min-width: 100%;
	}

	footer {
		min-width: 100%;
		padding: 0;
	}

	.cards a {
		flex: 1;
	}

	.content_body {
		padding-bottom: 50px;
		margin-bottom: 80px;
	}

	.pill {
		width: 30%;
		margin-bottom: 0px;
	}

	.icon-circle {
		margin: 0;
	}

	.rounded-container {
		flex-direction: column;
		align-items: center;
	}

	.image-wrapper {
		margin-right: 0;
		margin-bottom: -20px;
	}
	.rounded-box {
		padding-left: 20px;
	}

	.matome-flex-container {
		flex-direction: column; 
		text-align: center;
	}

	.unified-highlight-table {
		font-size: 18px;
	}

	.unified-highlight-table th,
	.unified-highlight-table td {
		padding: 12px;
	}
}

#backToTop {
	position: fixed;
	right: 180px;
	bottom: 16px;
	border: none;
	z-index: 9999;

	/* 初期は非表示 */
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, filter .2s ease;
	background-color: transparent;
}

/* 表示状態 */
#backToTop.show {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* ホバー/フォーカス */
#backToTop:hover,
#backToTop:focus-visible {
	filter: brightness(1.15);
	outline: none;
}

@media (min-width: 1920px) {
	#backToTop {
	right: calc(240px + (100vw - 2000px) * 0.496);
	}
}

@media (max-width: 1919px) {
	#backToTop {
		right: 2%;
	}
}

/* スクロールバーの上に被らないよう微調整（任意） */
@media (max-width: 768px) {
	#backToTop { right: 12px; bottom: 12px; }
}

.nav-container_content {
	margin: 0 auto;
	display: flex;
}

.band_menu {
	list-style: none;
	padding: 0;
	margin: 0 auto;        /* 中央寄せ */
	display: flex;
	justify-content: center; /* 横並びメニュー全体を中央に */
	align-items: center;
}

.band_menu li {
	position: relative;
	padding: 0 30px;
	white-space: nowrap;   /* 改行しない */
}

/* 2個目以降のメニューの前に「｜」を入れる */
.band_menu li + li::before {
	content: "｜";
	position: absolute;
	left: -5px;
	color: #fff;           /* 色はお好みで */
}

/* ハンバーガーアイコン */
.hamburger {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	z-index: 1001;
	background-color: #fff;
	padding: 20px;
	border: 2px solid #572E12;
}

.hamburger span {
	display: block;
	height: 2px;
	background: #000;
	border-radius: 2px;
	transition: all 0.3s ease;
}

/* ハンバーガーが×になるアニメーション */
.hamburger.open span:nth-child(1) {
	transform: rotate(45deg) translate(10px, 10px);
}

.hamburger.open span:nth-child(2) {
	opacity: 0;
}

.hamburger.open span:nth-child(3) {
	transform: rotate(-45deg) translate(10px, -10px);
}

/* メニュー（上から下に展開） */
.menu {
	position: fixed;
	top: -250%;           /* 初期は画面外上部に隠す */
	left: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	transition: top 0.3s ease;
	z-index: 1000;
	background-color: rgba(255, 255, 255, 0.8);
}

/* メニューを開いた状態 */
.menu.open {
	top: 0;
	overflow-y: auto;
	height: 100vh;
}

.menu span {
	display: none;
}

.hamburger_menus {
	background-color: #f4f4f4;
	height: auto;
	display: grid;
	padding-top: 20px;
	grid-template-columns: repeat(3, 1fr);
}

.hamburger_menu {
	text-align: center;
}

.hamburger_menu li + li::before {
	content: "｜";
	position: absolute;
	left: -5px;
	color: #572E12;
}

.hamburger_menu img {
	width: 100%;
}

.hamburger_menu:nth-child(8) {
	grid-column: span 2;
}

.hamburger_menu:nth-child(8) {
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* ? 下寄せ */
	grid-column: span 2;       /* 元の指定はそのまま */
}

.menu ul {
	list-style: none;
	margin: 0 20px 25px 0;
	padding: 0;
	display: flex;               /* 横並び */
	justify-content: flex-end;   /* ★ 右寄せ */
}

.menu li {
	position: relative;    /* ドロップダウン用 */
	background-color: #f4f4f4;
	margin-bottom: 0px;
	padding: 0 20px;
}

.menu a {
	text-decoration: none;
	display: block;
	color: #572E12;
}

.menu a:hover {
	background-color: transparent !important;
	color: #572E12 !important;
}

#hamburger_title {
	background-color: #fff;
	padding-bottom: 15px;
}

#hamburger_title img {
	padding: 10px 0 10px 15px;
}

#header_sub {
	height: 100px;
	background-color: #fff;
	text-align: left;
	margin-top: -50px;
}

#header_sub img {
	padding: 20px 0 0 20px;
}

.breadcrumb {
	margin: 20px 0 50px 20px;
}

.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb li {
	margin-right: 10px;
	position: relative;
	background-color: transparent;
}

.breadcrumb li + li::before {
  content: ">";
  margin-right: 10px;
  color: #000;
}

.breadcrumb a {
	text-decoration: none;
	color: #000;
	padding: 0;
	font-size: unset;

  line-height: 1.2;       /* 行の高さを統一 */
  display: inline-block;   /* 縦位置が揃いやすくなる */
  vertical-align: middle;  /* 中央揃え */
}

.breadcrumb a:hover {
	color: #000;
	background-color: transparent;
}

.menu_contents {
	background: rgba(255, 255, 255, 0.5);
	width: 90%;
	margin: -6px auto 0px auto;
}

.menu_contents_text {
	width: 80%;
	margin: 0px auto;
	padding: 50px 0;
	flex: 1; /* テキスト部分を広く */
}

.menu_contents_text h3 {
	font-size: clamp(14px, 2vw, 24px);
}

.menu_contents_3_1 {
	display: flex;
	gap: 20px; /* 任意：間隔調整 */
	align-items: flex-start; /* 上揃え（必要に応じて） */
	width: 90%;
	margin: 0 auto;
}
.menu_contents_image img {
	max-width: 90%;
	height: auto;
	display: block;
	padding: 50px 0;
}

.menu_item_list {
	width: 90%;
	height: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0 auto;
}

.menu_item {
	text-align: center;
}

.menu_item img {
  width: 100%;
  height: auto;
  display: block;
}

.menu_item span {
	margin: 0px auto;
	display: block;
	width: 65%;
	text-align: left;
	line-height: 1.5;
	font-size: clamp(8px, 1.5vw, 24px);
	margin-top: clamp(-200px, -11vw, -50px);
	margin-bottom: 8vw;
}

.menu_item a {
	color: #000;
	text-decoration: none;

}

.nav_pager {
	background-color: #fff;
	width: 89%;
	margin: 0 auto;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 5px;
}

.nav_pager_inner {
	border: 2px solid #572E12;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.nav_pager_menu {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;
}

.nav_pager_prev {
	text-align: left;
	padding-left: 20px;
}

.nav_pager_next {
	text-align: right;
	padding-right: 20px;
}

.sub_contents {
	background: rgba(255, 255, 255, 0.8);
	width: 90%;
	margin: -6px auto 0px auto;
	padding-top: 50px;
	padding-bottom: 50px;
}

.sub_contents_title {
	font-size: clamp(15px, 2.5vw, 40px);
	margin: 2% 15% 3% 15%;
	display: flex;
	align-items: center;
}

.sub_contents_title img {
	width: 232px;
	margin-left: auto;
}

.card_header .title {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
	padding-left: 20px;
	background: none;
	aspect-ratio: unset;
	width: 100%;
	margin: auto;
}

.cards {
	display: flex;
	gap: 30px;
	text-align: left;
}

.title_line {
    margin: -30px 0 0 -25px;
}

iframe {
	margin: 0 auto;
	display: block;
}

#main_title {
text-align: center;
}

#main_title span {
	display: block;
	font-weight: bold;
	margin: -7.5% 0 3.5% 0;
	font-size: clamp(15px, 2.5vw, 50px);
	color: #fff;
}

a:hover {
	opacity: 0.6;
}

#backToTop {
	cursor: pointer;
}

/* summaryにある標準の矢印（三角）を消す場合 */
summary {
	display: block; /* Chrome, Edge, Safari */
	list-style: none; /* Firefox */
	cursor: pointer;
}
summary::-webkit-details-marker {
	display: none; /* Safari用 */
}

/* summary標準の矢印を消す */
summary {
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
	list-style: none; /* Firefox */
	padding-right: 50px;
}
summary::-webkit-details-marker {
	display: none; /* Safari, Chrome */
}

/* アイコンの土台 */
.toggle_icon {
	position: absolute;
	top: 25px;
	right: 0px;
	width: 40px;
	height: 40px;
	transition: transform 0.3s ease; /* 回転のアニメーション */
}

/* ＋アイコンの棒（横と縦） */
.toggle_icon::before,
.toggle_icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #cd1111;
}

/* 横棒 */
.toggle_icon::before {
	width: 100%;
	height: 3px;
}

/* 縦棒 */
.toggle_icon::after {
	width: 3px;
	height: 100%;
}

/* 全体を45度回転させて「×」にする場合 */
details[open] .toggle_icon {
	transform: rotate(45deg);
}

.rounded-container {
	display: flex;
	align-items: center;
/*
	justify-content: center;
	width: 90%;
*/
	margin: 80px auto 20px auto;
	gap: 10px;
}

.image-wrapper {
	flex-shrink: 0;
	z-index: 1;
	margin-right: -140px;
	margin-top: -65px;
}

.image-wrapper img {
	width: 150px;
	display: block;
}

.rounded-box {
	flex-grow: 1;
	max-width: 830px;
	font-size: 18px;
	font-weight: bold;
	border: 2px solid #572e12;
	border-radius: 15px;
	overflow: hidden;
	background: linear-gradient(to left, #ffda71 50px, #572e12 50px, #572e12 52px, #f8f0e3 52px);
	padding: 20px 70px 20px 140px; 
}

.rounded-button {
	display: flex;
	align-items: center;
	justify-content: space-between; 
	width: 100%;
	max-width: 590px;
	padding: 12px 20px;
	background-color: #572E12;
	color: white;
	border-radius: 30px;
	font-weight: bold;
	box-sizing: border-box;
}

.rounded-text {
	flex-grow: 1;
	text-align: left;
}

.rounded-icon, .rounded-spacer {
	font-size: 0.8em;
	width: 1.2em;
}

.rounded-spacer {
	visibility: hidden;
}

.column {
	flex-direction: column;
}

.matome-box {
	border: 10px solid #FFDA71;
	border-radius: 20px;
}

.matome {
	margin: -38px 0 0 -60px;
}

.matome-flex-container {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 20px 0;
}

.matome-text-content {
	flex: 1;
	line-height: 1.8;
	font-size: 20px;
}

.matome-image-content {
	flex-shrink: 0;
}

.card_content_center a {
    text-decoration: none; /* 下線を消す */
    margin: 0 auto;       /* 左右中央寄せ */
    width: 100%;          /* max-widthを活かすために一旦100%に */
    max-width: 590px;     /* ボタンの最大幅と同じに設定 */
}

.card_content a {
	text-decoration: none; /* 下線を消す */
	display: contents;
}

.rounded-text-center {
    flex-grow: 1;
    text-align: center;   /* 左寄せから中央寄せに変更 */
}

.bubble_container {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	margin: 0px 0 -10px 140px;
}

.speech_bubble {
	display: inline-block;
	padding: 10px 20px;
	background-color: #ffda71;
	color: #ffffff;
	text-shadow: 
		-1px -1px 0 #000,
		 1px -1px 0 #000,
		-1px  1px 0 #000,
		 1px  1px 0 #000;
	border: 2px solid #000;
	border-radius: 30px;
	font-weight: bold;
	position: relative;
	font-size: 20px; 
}

.character_image {
	flex-shrink: 0;
}

.speech_bubble::before {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 10%;
	border-top: 15px solid #000;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}

.speech_bubble::after {
	content: '';
	position: absolute;
	bottom: -13px;
	left: calc(10% + 2px);
	border-top: 13px solid #ffda71; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}

.dice_title {
	position: relative;
	padding-left: 20px;
	color: #C8161D;
	font-size: 24px;
	line-height: 1.5;
	display: flex;
	align-items: center;
	font-weight: bold;
	margin: 40px 0;
}

.dice_title::before {
	content: "";
	position: absolute;
	left: 0;
	width: 14px;
	height: 1.6em;
	background-color: #FFDA71;
	border: 2px solid #572E12;
	border-radius: 10px;
	box-sizing: border-box;
}

.flex_row_container {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	margin-top: 40px;
	margin-bottom: 20px;
}

.rounded_highlight_box {
	flex: 1;
	min-width: 280px;
	border: 1px solid #572E12;
	border-radius: 20px;
	padding: 24px;
	box-sizing: border-box;
	margin: 40px 0 40px 0;
}

.accent_text {
	margin: 0;
}

.rounded_highlight_box_title {
	margin: -40px 0 0 0;
	background-color: #fff;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: bold;
	width: fit-content;
	max-width: 100%;  
}

.rounded_highlight_box_title::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: #FFDA71;
	border: 2px solid #572E12;
	border-radius: 50%;
	box-sizing: border-box;
	flex-shrink: 0;
}

.rounded_highlight_box_title_one::before {
	content: "1";
	width: 24px;
	height: 24px;
	background-color: transparent;
	border: none;
	color: #FFDA71;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 24px;
	padding: 0px 0 0px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rounded_highlight_box_title_two::before {
	content: "2";
	width: 24px;
	height: 24px;
	background-color: transparent;
	border: none;
	color: #FFDA71;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 24px;
	padding: 0px 0 0px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rounded_highlight_box_title_three::before {
	content: "3";
	width: 24px;
	height: 24px;
	background-color: transparent;
	border: none;
	color: #FFDA71;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 24px;
	padding: 0px 0 0px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rounded_highlight_box_title_four::before {
	content: "4";
	width: 24px;
	height: 24px;
	background-color: transparent;
	border: none;
	color: #FFDA71;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 24px;
	padding: 0px 0 0px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.title_overlap_frame::before {
	align-self: flex-start; /* 親の center 設定を無視して上端に固定 */
	margin-top: 2px;       /* 1行目のテキストの高さに合わせて数ピクセル調整 */
}

.rounded_highlight_box p {
	padding: 30px;
}

.rounded_highlight_list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 2em;
}

.rounded_highlight_list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.rounded_highlight_list li::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: #FFDA71;
	border: 2px solid #572E12;
	border-radius: 50%;
	box-sizing: border-box;
	flex-shrink: 0;
	margin-top: calc((1.5em - 24px) / 2);
}

.rounded_highlight_list_inner {
	padding: 0;
	margin: 20px 0 0 0;
	font-weight: normal;
}

.unified-highlight-table {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
	border-style: hidden;
	box-shadow: 0 0 0 1px #572E12;
	margin: 40px 0;
}

.unified-highlight-table th,
.unified-highlight-table td {
	border: 1px solid #572E12;
	padding: 20px;
	background-color: #FFDA71;
	color: #572E12;
}

.unified-highlight-table thead th {
	background-color: #F6E9D5;
	color: #572E12;
	text-align: center;
}

.unified-highlight-table .text-with-image {
	display:inline-block;
	width:3em;
	height:3em;
	vertical-align:middle;
	margin-right:0.8em;
	text-align:left;
}

.unified-highlight-table span img {
	width:100%;
	height:100%;
	object-fit:contain;
}

.table-item-name {
	width: 25%;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}


.table-content {
	text-align: left;
	background-color: #fff !important;
}

.margin0 {
	margin: 0;
}

.margin40 {
	margin: 40px 0;
}

.bubble_container_nomal {
	margin-left: 5px;
}

.custom-list {
	list-style: none;
	counter-reset: my-idx;
}

.custom-list-inner-ul > li {
	counter-increment: my-idx;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0px 0 30px 0;
	font-weight: bold;
}

.custom-list-inner-ul > li div {
	font-weight: normal;
}

.custom-list li {
	counter-increment: my-idx; /* ループごとにカウントアップ */
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.custom-list li {
	counter-increment: my-idx; /* ループごとにカウントアップ */
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.custom-list-inner-ul > li::before {
    content: counter(my-idx);
    position: absolute;
    left: -35px;
    background-color: #fff;
    padding: 0 5px;
    color: #FFDA71;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    z-index: 3;
}

.custom-list li::before {
	/* 自動カウントされた数字を表示 */
	content: counter(my-idx); 
	width: 24px;
	height: 24px;
	background-color: transparent;
	border: none;
	color: #FFDA71;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 24px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.custom-square-list {
	list-style: none;
	counter-reset: my-idx;
	flex-wrap: wrap;
	/* gapを調整。15pxの隙間に対し、三角形をさらに外へ出すことで重ねます */
	gap: 40px 15px; 
	padding: 20px 0 0 0;
}

.custom-square-list > li {
	counter-increment: my-idx;
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #572E12;
	border-radius: 20px;
	padding: 20px 15px 15px 15px;
	z-index: 1;
	margin: 0 0 45px 0;
}

.custom-square-list > li::before {
	content: counter(my-idx);
	position: absolute;
	top: -18px;
	left: 20px;
	background-color: #fff;
	padding: 0 5px;
	color: #FFDA71;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	z-index: 12; /* 数字を最前面に */
}

/* タイトル */
.custom-square-list > li > span {
	font-weight: bold;
	font-size: 1.1em;
	margin: -36px 0 8px 0;
	background-color: #fff;
	color: #000;
	padding-left: 35px;
	padding-right: 10px; /* 文字の後ろの白背景に少し余裕を持たせる */
	width: fit-content;    /* 幅を「中身（文字数）」に強制的に合わせる */
	/* ------------------ */

	position: relative;
	z-index: 2;
}

.custom-side-list {
	list-style: none;
	counter-reset: my-idx;
	display: flex;
	flex-wrap: wrap;
	/* gapを調整。15pxの隙間に対し、三角形をさらに外へ出すことで重ねます */
	gap: 40px 15px; 
	padding: 20px 0 0 0;
}

.custom-side-list li {
	counter-increment: my-idx;
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #572E12;
	border-radius: 20px;
	padding: 20px 15px 15px 15px;
	background-color: #fff;
	width: 230px;
	box-sizing: border-box;
	flex-shrink: 0;
	min-height: 230px;

	/* --- 重要：次の要素より前面にする設定 --- */
	z-index: 1; 
}

/* 
   Flexboxでは通常「後から書いた要素」が上に重なります。
   三角形を「次の枠」の上に重ねるには、左側の要素ほどz-indexを高くする必要があります。
*/
.custom-side-list li:nth-child(1) { z-index: 10; }
.custom-side-list li:nth-child(2) { z-index: 9; }
.custom-side-list li:nth-child(3) { z-index: 8; }
.custom-side-list li:nth-child(4) { z-index: 7; }
.custom-side-list li:nth-child(5) { z-index: 6; }

/* 数字 */
.custom-side-list li::before {
	content: counter(my-idx);
	position: absolute;
	top: -18px;
	left: 20px;
	background-color: #fff;
	padding: 0 5px;
	color: #FFDA71;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	z-index: 12; /* 数字を最前面に */
}

/* タイトル */
.custom-side-list li span {
	font-weight: bold;
	font-size: 1.1em;
	margin: -36px 0 8px 0;
	background-color: #fff;
	color: #000;
	padding-left: 35px;
	display: block;
}

/* 説明文中央寄せ */
.custom-side-list li div {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.5;
	color: #333;
	margin: 0;
	padding: 0 5px;
}

/* 三角形エリア（前面に重なるように調整） */
.custom-side-list li::after {
	content: "";
	position: absolute;
	/* 枠の右端から突き出させる。gap(15px)より大きく出すことで次のliに重なる */
	right: -32px; 
	top: 50%;
	transform: translateY(-50%);
	
	width: 52px;
	height: 52px;
	
	/* 三角形の描画（塗り#FFDA71、フチ#572E12） */
	/* 三角形のデザイン修正版（角丸・細いフチ） */
	/* 三角形のデザイン修正版（角丸・フチ1px） */
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTguNSw3Ljg5IEM4LjUsNy4yIDkuMjUsNi44IDkuODUsNy4xIEwxNy4yLDEwLjg4IEMxNy44NSwxMS4yIDE3Ljg1LDEyIDE3LjIsMTIuNCBMMTAsMTYuMTkgQzkuMzUsMTYuNCA4LjUsMTYuMSA4LjUsMTUuNDEgWiIgZmlsbD0iI0ZGREE3MSIgc3Ryb2tlPSIjNTcyRTEyIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIi8+PC9zdmc+');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100px;
	
	z-index: 11; /* liの枠線(z-index 1?10)よりも確実に前面に出す */
}

/* 一番右側の枠には表示させない */
.custom-side-list li:last-child::after {
	display: none;
}

.custom-square-list-inner {
	list-style: none !important;
	padding: 0 !important;
	margin: 20px 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding-left: 2em !important;
}

.custom-square-list-inner li {
	border: none;
	height: auto;
	padding: 0 0 0 12px;
	min-height: auto;
}

/* 子リストの丸印（数字を消して丸にする） */
.custom-square-list-inner li::before {
	content: "";
	left: 24px;
	width: 24px;
	height: 24px;
	background-color: #FFDA71;
	border: 2px solid #572E12;
	border-radius: 50%;
	box-sizing: border-box;
	flex-shrink: 0;
	margin-top: calc(1.5em / 2);
	padding: 0 5px;
	color: #FFDA71;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	z-index: 12;
	position: absolute;
	margin: 0;
}

.title_overlap_frame {
	margin-top: -38px !important;
}

.bold_contents {
	display: contents;
	font-weight: bold;
}

.padding_left0 {
	padding-left: 0px;
}

.point-frame {
	position: relative; 
	border: 1px solid #572E12;
	background-color: #F8F0E3;
	padding: 20px 80px;
	margin-bottom: 20px; 
	width: 72%;
	margin: 30px 0 !important;
}

.point-frame::after {
	content: "";
	position: absolute;
	/* --- 左下に配置するための設定 --- */
	bottom: -20px;  /* 下端からの距離（マイナスで外側へ） */
	left: -15px;    /* 左端からの距離 */

	/* アイコンのサイズ */
	width: 74px;   
	height: 71px;

	background-image: url(../images/point.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;
}

.align-the-height {
	min-height: 160px;
}

.flex-container {
	display: flex;
	align-items: center; /* 縦方向の中央揃え */
	gap: 20px;           /* 画像と文章の間の隙間 */
	margin: 20px 0;
	align-items: flex-start; 
}

.flex-image img {
	width: 100%;        /* 親要素の幅いっぱいに広げる */
	height: auto;
	display: block;
}

.flex-text {
	flex: 1;            /* 残りの幅をすべて使う */
	line-height: 1.8;
}

/* スマホなど画面が狭いときの設定（メディアクエリ） */
@media (max-width: 600px) {
    .flex-container {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start;
    }
    .flex-image {
        flex: 0 0 auto;
        width: 100%; /* 画像を横幅いっぱいにする */
    }
}

.common-flex-container {
	display: flex; /* 横並びにする */
}
.item {
	flex: 1; /* 均等に引き伸ばす（50:50になる） */
	/* または width: 50%; でも可能 */
}

.common-flex-container .rounded-button {
	width: 95%;
	max-width: 95%;
}

.text-center {
	text-align: center;
}

.width50per {
	width: 50%;
}

.align-items-end {
	align-items: end;
}