div#pagebody {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}
body,td,th {
	font-size: 100%;
	color: #3a1d1d;
	line-height: 1.5;
	background-color: #f4f4ff; /* 薄いラベンダー色 */
}
a {
	text-decoration: none;
}
a:link, a:visited {
	color: #1122cc;
}
a:hover {
	color: #dd0000;
	text-decoration: underline;
}
h1 {
	font-size: 180%;
}
h2 {
	font-size: 140%;
    position: relative;
    padding: 0.6em;
    background: #800080;
    color: white;
    border-top: 5px double;
    border-bottom: 5px double;
    /* --- 同系色のぼかしに変更 --- */
    /* 1. 元の影を削除 */
    /* box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); */ 
    
    /* 2. 新しいぼかしを追加: X=0, Y=0, ぼかし半径=15px, 広がり半径=3px, 色=#800080を薄めた色 */
    box-shadow: 0 0 15px 3px rgba(128, 0, 128, 0.7); /* パープル #800080 */
}
h3 {
	font-size: 130%;
	position: relative;
	padding: 0.6em;
	background: transparent;
	color: #800080;
	border-top: 5px double #800080;
	border-bottom: 5px double #800080;
    /* --- 同系色のぼかしに変更 --- */
    /* 1. 元の影を削除 */
    /* box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); */ 
    
    /* 2. 新しいぼかしを追加: X=0, Y=0, ぼかし半径=10px, 広がり半径=2px, 色=#800080を薄めた色 */
    box-shadow: 0 0 10px 2px rgba(128, 0, 128, 0.6); /* パープル #800080 */
}
h4 {					/* 各項目 */
	font-size: 120%;
	padding: .25em 0 .25em .75em;
	border-left: 6px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-color: #800080;
}	
h5 {
	font-size: 100%;
	padding: .25em 0 .25em .75em;
	border-left: 6px solid #ccc;
	border-color: #800080;
}

ol {
    display: block;
	background-color: #fff4ff;
}
ul {
    display: block;
	background-color: #fff4ff;
}

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 #ffb2ff; 
	border-radius: 20px; 
	background-color: #fff4ff;
  	text-align    : left; 
}
div.push {				/* ラベンダー */
	padding: 10px; 
	margin-bottom: 10px; 
	border: 1px solid #d8b2ff; 
	border-radius: 20px; 
	background-color: #f4f4ff;
  	text-align    : center; 
}
div.push2 {				/* ピンク */
	padding: 10px; 
	margin-bottom: 10px; 
	border: 1px solid #ffb2ff; 
	border-radius: 20px; 
	background-color: #fff4ff;
  	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 #b2ffb2; 
	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    : #fff4ff;     /* 背景色     */
  color         : #7f007f;     /* 文字色     */
  line-height   : 1.5em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border: 1px dotted #333333;"
}
.button:hover {
}

.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: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
    margin: 3px 3px;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    content: "“";
    font-family: sans-serif;
    color: #9dd4ff;
    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: whitesmoke;/*背景色*/
    border-left: double 7px #4ec4d3;/*左線*/
    border-right: double 7px #4ec4d3;/*右線*/
}
.box7 p {
    margin: 0; 
    padding: 0;
}
.shutten {
	color: gray;
	font-size: small; 
}

.steps2 {
	counter-reset: step-counter;
}
.steps2 > h2 {
  /* 連番カウンターを+1する */
  counter-increment: step-counter;
}
.steps2 > h2:before {
  /* 連番カウンターの値を表示する */
  content: counter(step-counter)"位：";
}

.steps3 {
	counter-reset: step-counter;
}
.steps3 > h3 {
  /* 連番カウンターを+1する */
  counter-increment: step-counter;
}
.steps3 > h3:before {
  /* 連番カウンターの値を表示する */
  content: counter(step-counter)"位：";
}

.steps4 {
	counter-reset: step-counter;
}
.steps4 > h4 {
  /* 連番カウンターを+1する */
  counter-increment: step-counter;
}
.steps4 > h4:before {
  /* 連番カウンターの値を表示する */
  content: counter(step-counter)"位：";
}


a.waku {				/* ピンク */
	display       : block;
	border-radius : 20px;          /* 角丸       */
	margin-bottom: 10px; 
	text-align    : center;      /* 文字位置   */
	cursor        : pointer;     /* カーソル   */
	padding       : 10px 10px;   /* 余白       */
	background-color: #fff4ff;
	border: 1px solid #ffb2ff; 
}
a.waku2 {				/* ラベンダー */
	display       : block;
	border-radius : 20px;          /* 角丸       */
	margin-bottom: 10px; 
	text-align    : center;      /* 文字位置   */
	cursor        : pointer;     /* カーソル   */
	padding       : 10px 10px;   /* 余白       */
	background-color: #f4f4ff;
	border: 1px solid #d8b2ff; 
}

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

.dekinai {
  background: #fff4ff;
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
  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: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #cccccc;
  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: #f2f2f2;
  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 #333333;
  border-right: 3px solid #333333;
}

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