body {
	line-height: 200%;
	margin: 0;
	padding: 0;
	background: linear-gradient(135deg, #E8F5E9 0%, #f0f8ff 50%, #E8F5E9 100%);
	background-attachment: fixed;
	font-family: "????" , Meiryo , "?????? Pro W3" , "MS PGothic" , sans-serif;
	overflow-x: hidden;
}

h1 {
	font-weight: bold;
	font-size: 110%;
	color: #2E7D32;
	margin: 10px 0px 0px 0px;
	padding: 10px 10px 10px 20px;
	text-shadow: 2px 2px 4px rgba(76, 175, 80, 0.3);
	background-repeat: no-repeat;
	background-position: left center;
	border-radius: 20px;
	background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
	box-shadow: 0 4px 8px rgba(76, 175, 80, 0.2);
	transition: transform 0.3s ease;
	}

h1:hover {
	transform: translateY(-2px);
}

h2 {
	font-weight: bold;
	color: #ffffff;
	font-size: 120%;
	margin: 15px 0px 25px 0px;
	padding: 12px 15px 12px 35px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	border-radius: 25px;
	box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
	background: linear-gradient(135deg, #81C784 0%, #66BB6A 50%, #4CAF50 100%);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	}

h2:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(76, 175, 80, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

h2::before {
	content: "?";
	position: absolute;
	left: 10px;
	font-size: 1.2em;
}

h3,h4 {
	font-weight: bold;
	color: #2E7D32;
	font-size: 110%;
	margin: 15px 0px 15px 0px;
	padding: 10px 10px 10px 35px;
	text-shadow: 1px 1px 2px rgba(76, 175, 80, 0.2);
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 50%, transparent 100%);
	border-left: 5px solid #A5D6A7;
	border-radius: 15px;
	transition: all 0.3s ease;
}

h3:hover, h4:hover {
	background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 50%, transparent 100%);
	transform: translateX(5px);
}

a {
	color: #2E7D32;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
	}

a:hover {
	color: #388E3C;
	text-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
	transform: scale(1.05);
	}

.intro{
	float: left;
	width: 90%;
	font-size: 90%;
	display: block;
	margin-bottom: 15px;
	padding: 10px;
	border-radius: 15px;
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 100%);
	border: 2px dashed #A5D6A7;
	box-shadow: 0 4px 8px rgba(165, 214, 167, 0.2);
	transition: all 0.3s ease;
	}

.intro:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(165, 214, 167, 0.3);
}

.navia{
	clear: both;
	overflow: hidden;
	padding: 0;
	margin: 0 auto;
	border-radius: 30px;
	box-shadow: 0 8px 16px rgba(165, 214, 167, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5);
	background: linear-gradient(135deg, #A5D6A7 0%, #66BB6A 50%, #81C784 100%);
	transition: transform 0.3s ease;
	}

.navia:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(165, 214, 167, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.5);
}

.navia img{
	margin-bottom: -40px;
	max-width: 100%;
	}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
	border-radius: 15px;
	transition: transform 0.3s ease;
}

img:hover {
	transform: scale(1.02);
}

.book {
	margin: 2em auto; 
	padding: 1em 1.5em;
	width: 90%;
	color: #777777;
	background-color: #fff;
	border: 4px solid #f6bfbc;
	border-radius: 3em .8em 3em .7em/.9em 2em .8em 3em;
}

.str {
	width:90%;
	padding: 20px;
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 50%, #E8F5E9 100%);
	border-radius: 25px;
	box-shadow: 0 6px 12px rgba(165, 214, 167, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.8);
	border: 2px solid #A5D6A7;
	transition: all 0.3s ease;
}

.str:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(165, 214, 167, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}



.div-table { display: grid; border-top: 1px solid #d1d5db; border-left: 1px solid #d1d5db; background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 50%, #e8f4fd 100%);}
.div-table-row { display: contents; }
.div-table-cell { border-right: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db; padding: 8px 12px; }


/* 目次全体 */
.toc {
  background: #f0eded;
  padding: 10px 15px;
  border-radius: 12px;
  max-width: 500px;
  margin-bottom: 20px;
}

.toc span {
  margin-right: 20px;
  display: inline-block;
  border-bottom: 2px solid blue;
  font-size: 15px;
}

.toc ul

/* リスト */
.toc ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.toc li {
  margin: 8px 15px;
}

/* リンク */
.toc a {
  text-decoration: none;
  color: #333;
  display: block;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* ホバー */
.toc a:hover {
	background: #e8e8e8;
	color: #1a73e8;
	text-decoration: none;
}

.extitle {
	width:70%;
	padding: 15px;
	border-left: solid 25px #66BB6A;
	border-right: 3px dashed #A5D6A7;
	border-top: 3px dashed #A5D6A7;
	border-bottom: 3px dashed #A5D6A7;
	border-radius: 20px;
	box-shadow: 0 6px 12px rgba(165, 214, 167, 0.3);
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 100%);
	transition: all 0.3s ease;
}

.extitle:hover {
	transform: translateX(5px);
	box-shadow: 0 8px 16px rgba(165, 214, 167, 0.4);
}

.ex {
	width:90%;
	padding: 15px;
	border: solid 3px #A5D6A7;
	border-radius: 20px;
	box-shadow: 0 6px 12px rgba(165, 214, 167, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.8);
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 50%, #E8F5E9 100%);
	transition: all 0.3s ease;
}

.ex:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(165, 214, 167, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.8);
	border-color: #66BB6A;
}


.col {
	width:90%;
	padding: 20px;
	background: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 50%, #81C784 100%);
	border-radius: 25px;
	box-shadow: 0 6px 12px rgba(165, 214, 167, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.8);
	border: 2px solid #81C784;
	transition: all 0.3s ease;
}

.col:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(165, 214, 167, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.hitotitle {
	width:90%;
	padding: 15px;
	border-left: solid 25px #66BB6A;
	border-right: 3px dashed #A5D6A7;
	border-top: 3px dashed #A5D6A7;
	border-bottom: 3px dashed #A5D6A7;
	border-radius: 20px;
	box-shadow: 0 6px 12px rgba(102, 187, 106, 0.3);
	background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
	transition: all 0.3s ease;
}

.hitotitle:hover {
	transform: translateX(5px);
	box-shadow: 0 8px 16px rgba(102, 187, 106, 0.4);
}

.area {
    clear: both;
	overflow: hidden;
	padding: 5px;
	margin-bottom: 30px;
}

.arealeftimg {
	float:left;
	width:20%;
	margin-right: 5px;
	margin-left: 5px;
	transition: transform 0.3s ease;
}

.arealeftimg:hover {
	transform: scale(1.05) rotate(2deg);
}

.arealeft {
	float:left;
	width:70%;
	margin-right: 10px;
	padding: 15px;
	border-radius: 20px;
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 50%, #E8F5E9 100%);
	box-shadow: 0 6px 12px rgba(165, 214, 167, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.8);
	border: 2px solid #A5D6A7;
	transition: all 0.3s ease;
}

.arealeft:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(165, 214, 167, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

table {
text-align: center;
	border: 3px solid #A5D6A7;
	border-collapse: collapse;
	border-spacing: 0;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 6px 12px rgba(165, 214, 167, 0.3);
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 100%);
}

.tc {
	padding: 8px;
	color: #ffffff;
	background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(76, 175, 80, 0.3);
}

.td {
	padding: 8px;
	color: #ffffff;
	background: linear-gradient(135deg, #A5D6A7 0%, #66BB6A 100%);
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(165, 214, 167, 0.3);
}

#op {
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	max-width: 960px;
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}

#left {
	float: left;
	width: 70%;
	margin-top: 30px;
	margin-left: auto;
	margin-bottom: 10px;
}

#menu {
	float: right;
	font-size: 90%;
	width: 25%;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-right: auto;
}

#menu li:first-child a {
	border-radius: 5px 0 0 5px;  
}  

#menu li:last-child a {  
	border-radius: 0 5px 5px 0;  
} 

#menu .ta {
	border: 2px solid #A5D6A7;
	padding: 10px;
	background: linear-gradient(135deg, #F1F8E9 0%, #E8F5E9 50%, #E8F5E9 100%);
	margin-bottom: 20px;
	border-radius: 20px;
	box-shadow: 0 6px 12px rgba(165, 214, 167, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;
}

#menu .ta:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(165, 214, 167, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.mmm a {
	text-decoration: none;
	display: block;
	border-bottom: 1px dotted #999999;
	padding: 12px 15px;
	padding-left: 15px;
	zoom: 1;
	min-height: 20px;
}

.mmm a:hover {
	background: linear-gradient(135deg, #A5D6A7 0%, #66BB6A 100%);
	color: #ffffff;
	border-radius: 10px;
	transform: translateX(5px);
	box-shadow: 0 3px 6px rgba(165, 214, 167, 0.3);
	transition: all 0.3s ease;
}

#menu .side {
	color:#ffffff;
	margin: 10px 0px 30px 0px;
	padding: 12px 12px 12px 40px;
	box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	border-radius: 20px;
	background: linear-gradient(135deg, #81C784 0%, #66BB6A 50%, #4CAF50 100%);
	transition: transform 0.3s ease;
	position: relative;
}

#menu .side::before {
	content: "??";
	position: absolute;
	left: 12px;
	font-size: 1.2em;
}

#menu .side:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(76, 175, 80, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.ad {
	color:#ffffff;
	padding: 15px;
	margin-bottom: 30px;
	width: auto;
	background: linear-gradient(135deg, #333333 0%, #000000 100%);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
	border-radius: 30px;
	border: 2px solid #555555;
	transition: all 0.3s ease;
}

.ad:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

#footer {
	clear: both;
	font-size: 90%;
	padding: 20px;
	text-align: center;
	color: #ffffff;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	border-radius: 25px;
	box-shadow: 0 8px 16px rgba(76, 175, 80, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
	background: linear-gradient(135deg, #81C784 0%, #66BB6A 50%, #4CAF50 100%);
	transition: transform 0.3s ease;
}

#footer:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(76, 175, 80, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

#footer li{
	display: inline;
}

#footer li a{
	color: #ffffff;
}

#footer li a:hover {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	padding: 5px 10px;
	transition: all 0.3s ease;
}

/* ===== ??????????????? ===== */
html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ===== ??????1024px??? ===== */
@media only screen and (max-width: 1024px) {
	#op {
		max-width: 100%;
		padding: 0 20px;
	}

	#left {
		width: 100%;
		float: none;
		margin-top: 20px;
	}

	#menu {
		float: none;
		width: 100%;
		margin-top: 25px;
		margin-bottom: 25px;
		clear: both;
	}

	.area {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		align-items: flex-start;
	}

	.arealeftimg {
		width: 25%;
		min-width: 80px;
	}

	.arealeft {
		width: calc(75% - 15px);
		flex: 1;
		min-width: 0;
	}

	.str,
	.extitle,
	.ex,
	.col,
	.hitotitle {
		width: 100%;
		max-width: 100%;
	}

	body {
		margin: 0;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}

/* ===== ????768px??? ===== */
@media only screen and (max-width: 768px) {
	body {
		line-height: 1.85;
		font-size: 15px;
		margin: 0;
		padding: 0 12px;
	}

	#op {
		padding: 0 12px;
		width: 100%;
	}

	h1 {
		font-size: 1.15rem;
		padding: 12px 15px;
		margin: 8px 0;
		border-radius: 18px;
		word-break: break-all;
	}

	h2 {
		font-size: 1.1rem;
		margin: 12px 0 20px 0;
		padding: 14px 15px 14px 45px;
		border-radius: 20px;
		line-height: 1.5;
		word-break: break-all;
	}

	h2::before {
		left: 12px;
		font-size: 1em;
	}

	h3, h4 {
		font-size: 1.05rem;
		margin: 12px 0;
		padding: 12px 12px 12px 40px;
		border-radius: 14px;
		word-break: break-all;
	}

	.intro {
		width: 100%;
		font-size: 0.95rem;
		padding: 12px;
		margin-bottom: 12px;
		float: none;
	}

	.navia {
		border-radius: 20px;
		margin: 0 0 15px 0;
	}

	.navia img {
		margin-bottom: -30px;
	}

	.str {
		width: 100%;
		padding: 16px;
		border-radius: 18px;
		margin: 0 0 15px 0;
	}

	.extitle {
		width: 100%;
		padding: 12px 12px 12px 20px;
		border-left-width: 18px;
		border-radius: 16px;
	}

	.ex {
		width: 100%;
		padding: 12px;
		border-radius: 16px;
	}

	.col,
	.hitotitle {
		width: 100%;
		padding: 14px;
		border-radius: 18px;
	}

	.area {
		flex-direction: column;
		margin-bottom: 20px;
		padding: 0;
		gap: 10px;
	}

	.arealeftimg {
		float: none;
		width: 100%;
		max-width: 160px;
		margin: 0 auto 8px auto;
		display: block;
	}

	.arealeftimg img {
		width: 100%;
		max-width: 160px;
		margin: 0 auto;
		display: block;
	}

	.arealeft {
		float: none;
		width: 100%;
		margin: 0;
		padding: 14px;
		border-radius: 18px;
	}

	#menu .ta {
		width: 100%;
		margin-bottom: 15px;
		padding: 12px;
		border-radius: 16px;
	}

	.mmm a {
		padding: 14px 15px;
		min-height: 44px;
		display: flex;
		align-items: center;
		font-size: 0.95rem;
	}

	#menu .side {
		padding: 14px 15px 14px 45px;
		margin: 10px 0 20px 0;
		border-radius: 16px;
		font-size: 1rem;
	}

	#menu .side::before {
		left: 14px;
	}

	#footer {
		padding: 18px 12px;
		border-radius: 20px;
		margin: 15px 0 10px 0;
		font-size: 0.9rem;
	}

	#footer ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 4px;
	}

	#footer li a {
		padding: 8px 12px;
		display: inline-block;
		min-height: 44px;
		line-height: 28px;
	}

	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		font-size: 0.9rem;
	}

	.tc, .td {
		padding: 10px 8px;
		white-space: nowrap;
	}

	a:hover {
		transform: none;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}

/* ===== ??????480px??? ===== */
@media only screen and (max-width: 480px) {
	body {
		font-size: 14px;
		padding: 0 10px;
	}

	#op {
		padding: 0 10px;
	}

	h1 {
		font-size: 1.05rem;
		padding: 10px 12px;
	}

	h2 {
		font-size: 1rem;
		padding: 12px 12px 12px 40px;
		margin: 10px 0 16px 0;
	}

	h3, h4 {
		font-size: 0.98rem;
		padding: 10px 10px 10px 35px;
	}

	.str, .arealeft, .ex, .col, .hitotitle {
		padding: 12px;
	}

	.mmm a {
		padding: 12px 15px;
		font-size: 0.9rem;
	}

	#footer li a {
		padding: 6px 10px;
		font-size: 0.85rem;
	}
}

/* ===== ???????????????? ===== */
@media (hover: none) and (pointer: coarse) {
	a:hover {
		transform: none;
	}

	h1:hover,
	h2:hover,
	h3:hover,
	h4:hover,
	.str:hover,
	.arealeft:hover,
	.navia:hover,
	#menu .ta:hover,
	#menu .side:hover,
	#footer:hover,
	.extitle:hover,
	.ex:hover,
	.col:hover,
	.hitotitle:hover {
		transform: none;
	}

	.mmm a:hover {
		transform: none;
	}
}