/* ページ全体 */
div#pagebody {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

body, td, th {
	font-size: 100%;
	color: #013220;        /* ディープグリーン */
	line-height: 1.5;
	background-color: #fff8e7; /* クリーム系 */
}

/* リンク */
a {
	text-decoration: none;
}

a:link, a:visited {
	color: #013220;
}

a:hover {
	color: #b8860b;       /* ブロンズ調 */
	text-decoration: underline;
}

/* 見出し */
h1 {
	font-size: 180%;
	color: #013220;
}

h2 {
	font-size: 140%;
	position: relative;
	padding: 0.6em;
	background: #013220;
	color: #daa520;        /* ゴールデンブラウン */
	border-top: 5px double #556b2f; /* オリーブドラブ */
	border-bottom: 5px double #556b2f;
}

h3 {
	font-size: 140%;
	padding: 0.5em 0 0.5em 0.75em;
	border-left: 6px solid #556b2f; /* 枠線はそのまま重厚感あるオリーブ */
	border-bottom: 1px solid #556b2f;
	background-color: #78866b; /* カーキ系の濃い緑 */
	color: #f0f0e0;            /* 背景に映える薄いベージュ系文字 */
}

h4 {
	font-size: 120%;
	padding: 0.25em 0 0.25em 0.75em;
	border-left: 6px solid #556b2f;
	border-bottom: 1px solid #556b2f;
	color: #013220;
}

h5 {
	font-size: 100%;
	padding: 0.25em 0 0.25em 0.75em;
	border-left: 6px solid #556b2f;
	color: #013220;
}

ol {
	display: block;
	background-color: #fffbea; /* 基調色 */
}

ul {
	display: block;
	background-color: #fffbea;
}

ul li {
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 1.5;
}

ol li {
	padding-top: 2px;
	padding-bottom: 2px;
	line-height: 1.5;
}

div.push0 {				
	padding: 10px; 
	margin-bottom: 10px; 
	border: 1px solid #7fff00; 
	border-radius: 20px; 
	background-color: #f4fff9;
  	text-align: left; 
}

div.push {				
	padding: 10px; 
	margin-bottom: 10px; 
	border: 1px solid #7fff00; 
	border-radius: 20px; 
	background-color: #f4fff9;
  	text-align: center; 
}

div.push2 {				
	padding: 10px; 
	margin-bottom: 10px; 
	border: 1px solid #7fff00; 
	border-radius: 20px; 
	background-color: #f4fff9;
  	text-align: center; 
}

div.push3 {				
	padding: 10px; 
	margin-bottom: 10px; 
	border: 1px solid #ffd700; 
	border-radius: 20px; 
	background-color: #ffffe5;
  	text-align: center;
}

div.push4 {				
	padding: 10px; 
	margin-bottom: 10px; 
	border: 1px solid #7fff00; 
	border-radius: 20px; 
	background-color: #f4fff9;
  	text-align: center;
}

.button {
	display: inline-block;
	border-radius: 8px;
	font-size: 12pt;
	text-align: center;
	cursor: pointer;
	padding: 10px 10px;
	background: #f4fff9;
	color: #013220; /* ディープグリーン */
	line-height: 1.5em;
	transition: all .3s;
	border: 1px dotted #013220;
}

.button:hover {
	background-color: #ffd700; /* ゴールドにホバーで成功感 */
	color: #013220;
}

.yoko li {
	display: inline-block;
	height: 40px;
}

.shadow {
	text-shadow: 1px 1px 2px silver;
	font-weight: bold;
}

@media screen and (max-width: 560px) {
	.iframe-responsive {
		position: relative;
		width: 100%;
		padding: calc(315 / 560 * 100%) 0 0;
	}
	.iframe-responsive iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

img.size {
	max-width: 100%;
	width: 900px;
}

img.size2 {
	max-width: 100%;
	width: 560px;
}

pre {
	font-size:130%;
	white-space: pre-wrap;
}

blockquote {
	position: relative;
	padding: 35px 5px 10px 10px;
	box-sizing: border-box;
	font-style: italic;
	color: #555555;
	border-left: 4px solid #7fff00;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
	margin: 3px 3px;
	background-color: #fffbea;
}

blockquote:before {
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 3px;
	content: "“";
	font-family: sans-serif;
	color: #7fff00;
	font-size: 90px;
	line-height: 1;
}

blockquote p {
	padding: 0;
	margin: 7px 0;
	line-height: 1.7;
}

blockquote cite {
	display: block;
	text-align: right;
	color: #888888;
	font-size: 0.9em;
}

.box7 {
	padding: 0.5em 1em;
	margin: 2em 0;
	color: #474747;
	background: #fffbea;
	border-left: double 7px #7fff00;
	border-right: double 7px #7fff00;
}

.box7 p {
	margin: 0;
	padding: 0;
}

.shutten {
	color: gray;
	font-size: small; 
}

.steps2, .steps3, .steps4 {
	counter-reset: step-counter;
}

.steps2 > h2,
.steps3 > h3,
.steps4 > h4 {
	counter-increment: step-counter;
}

.steps2 > h2:before,
.steps3 > h3:before,
.steps4 > h4:before {
	content: counter(step-counter)"位：";
}

a.waku, a.waku2 {
	display: block;
	border-radius: 20px;
	margin-bottom: 10px;
	text-align: center;
	cursor: pointer;
	padding: 10px 10px;
	background-color: #f4f3ec;   /* 落ち着いたクリーム系 */
	border: 1px solid #556b2f;   /* 重厚感のあるオリーブドラブ */
	color: #013220;              /* ディープグリーン文字 */
	transition: all 0.3s;
	text-decoration: none;
}

a.waku:hover, a.waku2:hover {
	background-color: #e6e4d9;   /* ホバー時も落ち着いた変化 */
	border-color: #6b8e23;       /* 少し明るめのオリーブでアクセント */
	color: #013220;
}

.marker-P-pink {
	background: linear-gradient(transparent 60%, #f4fff9 0%);
}

.dekinai {
	background: #f4fff9;
	border-radius: 8px;
	box-shadow: 0px 0px 5px silver;
	padding: 0.5em 0.5em 0.5em 2em;
}

.dekinai li {
	line-height: 1.5;
	padding: 0.5em 0;
}

.button15 a {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 1em 2em;
	width: 300px;
	color: #013220;
	font-size: 18px;
	font-weight: 700;
	background-color: #7fff00;
	border-radius: 50vh;
	transition: 0.3s;
}

.button15 a::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background-color: #ffd700;
	border-radius: 50vh;
}

.button15 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 32px;
	transform: translateY(-50%) rotate(45deg);
	width: 5px;
	height: 5px;
	border-top: 3px solid #013220;
	border-right: 3px solid #013220;
}

.button15 a:hover {
	text-decoration: none;
	background-color: #ffd700;
	color: #013220;
}