@charset "UTF-8";

/* ================================== */
/* 今回のサンプル(A～D)の共通デザイン */
/* ================================== */
/* 以下のCSSは、描画領域の横幅に関係なく、常に適用されます。 */
/* 描画領域の横幅が600px・850px以上になった際には、別途HTMLソース側に記述したCSSで装飾を上書きする形(＝モバイルファースト)でレスポンシブ・ウェブデザインを実現しています。 */

	/* -------------------------- */
	/* ▼ページ周囲の余白をなくす */
	body {
		padding: 0;
		margin: 0;
	}

	/* -------------------- */
	/* ▼メインカラムの装飾 */
	/* -------------------- */
	.main-column {
		background: #f5deb3;	/* 背景色(淡い茶色) */
		padding: 1px 0px;		/* 内側の余白(上下に1px) */
	}
	.main-box {
		margin: 1em;
		line-height: 1.5;
	}
	.main-box ul li {
		line-height: 1.8;
	}
	.main-box h3 {
		margin-top: 1em;
		padding-top: 1em;
		border-top: 1px dashed gray;
	}

	/* -------------------- */
	/* ▼サイドカラムの装飾 */
	/* -------------------- */
	.side-column {
		background-color: #b8860b;	/* 背景色(茶色) */
		padding: 1px 0px;			/* 内側の余白(上下に1px) */
	}
	.side-box {
		margin: 1em;
		border: 1px solid white;
		border-radius: 0px 0px 10px 10px;
		background-color: #d2b48c;
	}
	.side-box h2 {
		margin: 0px;
		padding: 0px 5px;
		font-size: 1.2em;
		background-color: #8b4513;
		color: white;
	}
	.side-box p {
		padding: 0px 0.5em;
	}
img {
    width:auto;
    height:auto;
    max-width:80%;
    max-height:80%;
}

	/* ------------------ */
	/* ▼ヘッダ部分の装飾 */
	.pageheader {
		background-color: #cd853f;
		margin: 0px;
		padding: 1em;
		border-bottom: 1px solid #0000cc;
	}

	/* ------------------ */
	/* ▼フッタ部分の装飾 */
	.pagefooter {
		background-color: #ffddbb;
		margin: 0px;
		padding: 1em;
		border-top: 1px solid #cc0000;
	}


/* ================================================================================================================ */
/* 以下は、サンプル掲載用の装飾・説明用の装飾であり、記述は必須ではありません。（本記事のテクニックとは無関係です） */
/* ================================================================================================================ */
body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", sans-serif;
	-webkit-text-size-adjust: 100%;
p
}
.cmain { color: white; background-color: #cd5c5c; padding: 1px 3px; margin: 0px 2px; border-radius: 3px; }
.cside { color: white; background-color: #4b0082; padding: 1px 3px; margin: 0px 2px; border-radius: 3px; }
.patternnum { font-size: 2em; color: #000080; }
.here { font-weight: bold; color: #000080; }

p.sample1 {font-family: "Arial black";}
p.sample2 {font-family: cursive; }
p.sample3 {font-family: GungsuhChe; }

a {
    text-decoration:none; 
}
a:link { color: #ffffff; }
a:visited { color: #696969; }