@charset "utf-8";
/* CSS Document */

		/* ---------------------------- */
		/* ▼「続きを読む」ボタンの装飾 */
		/* ---------------------------- */
		/* ▽ボタンとマスク(グラデーション)を掲載するボックス */
.readmore-button-box {　/* ↓※以下は古いブラウザでグラデーションを表示するための各種対策 */
	background: -webkit-gradient(top, rgba(255,255,255,0.5), white); /* Chrome,Safari */
	background: -moz-linear-gradient(top, rgba(255,255,255,0.5), white); /* Firefox */
	background: -o-linear-gradient(top, rgba(255,255,255,0.5), white); /* Opera */
	background: -ms-linear-gradient(top, rgba(255,255,255,0.5), white); /* IE10 */
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#80ffffff,EndColorStr=#ffffffff); /* IE9- */
			/* ↑ここまで */
	text-align: center;
	background-image: linear-gradient( 180deg, rgba(255,255,255,0.5), white );	/* 上から下へ：[白色半透明]から[白色]へグラデーション */
	padding-top: 0.5em;	/* ボタンの上側でグラデーションを見せる距離(長さ) */
	margin-top: -6.5em;	/* ボックスを上側に重ねる距離(長さ) */
	position: relative;	/* ボックス全体を上に重ねるために必要 */
}
		/* ▽リンクを「続きを読む」ボタンの形に装飾 */
.readmore-button-box a {
	background-color: #D7F0EC;	/* ボタンの色(濃い赤) */
	color: #FFF;				/* ボタンの文字色(白) */
	border-radius: 18px;		/* 角丸の半径 */
	padding: 0.5em 2.5em;;		/* 内側の余白 */
	display: inline-block;		/* ボタン全体をクリック可能に */
	font-weight: bold;			/* ボタンの文字を太字に */
	font-size: 1.25em;			/* ボタンの文字サイズ */
}
.readmore-button-box a:hover {
	background-color: #F9F;		/* ボタンにマウスが乗ったら明るい赤色に */
}

		/* -------------------- */
		/* ▼「続き」領域の装飾 */
		/* -------------------- */
.readmore-area {
	display: none;	/* デフォルトでは非表示にしておく（※これはCSSではなくスクリプト側で処理する方が望ましいですが、ここでは解説を簡単にするためにCSSで記述。jQuery使用版サンプルではスクリプトで処理しています。） */
}

		/* ………………………………………………………………………………………………… */
		/* ▼サンプル領域表示用の装飾（表示枠を作っているだけで、必須ではありません） */
div.t_area {
	border: 1px solid #9FC;		/* 枠線 */
	padding: 1em;				/* 内側の余白 */
	margin: 10px;	/* 外側の余白 */
	max-width: 580px;			/* 最大幅 */
	display: inline-block;		/* 空間があれば横方向にも並べる */
	vertical-align: top;		/* (横に並んだ場合)上端を揃える */
}