<h1>四季の種類</h1>

<div>
	<h2>春</h2>

	<div>
		<h3>桜がきれい</h3>
		<p>ソメイヨシノの桜が見どころ</p>

		<h3>夜桜がきれい</h3>
		<p>夜の桜を見ながら、お酒を飲むのはほどほどにね</p>

		<h3>新しい出会いが増える</h3>
		<p>いろんな人と巡り合えることができますね</p>
	</div>

	<h2>夏</h2>

	<div>
		<h3>そろそろ夏本番！</h3>
		<p>梅雨が明ける頃は本格的に夏本番がスタート！</p>

		<h3>花火がきれい</h3>
		<p>夏の定番は花火は欠かせないですね</p>

		<h3>長期休暇で旅行</h3>
		<p>家族と一緒にと腕をしながら思い出つくりはいいですね</p>
	</div>

	<h2>秋</h2>

	<div>
		<h3>夏が終わったけど残暑続き！</h3>
		<p>夏が終わったのはさみしいですなぁ</p>

		<h3>秋の味覚がおいしい</h3>
		<p>サンマ、松茸、栗、梨…</p>

		<h3>秋の紅葉がきれい</h3>
		<p>秋になると色が赤色の染まるころ、きれいでしょう</p>
	</div>

	<h2>冬</h2>

	<div>
		<h3>1年の最後の季節</h3>
		<p>春・夏・秋の次が最後ですね</p>

		<h3>冬のお鍋は体が温まる</h3>
		<p>いろんな食材を入れてみんなで囲みながらおいしく食べようね</p>

		<h3>冬のイベントがいっぱい</h3>
		<p>クリスマス、年末年始などいろいろありますね</p>
	</div>
</div>

h1 {
	margin: 0 auto 30px;
	padding: 0;
}

div {
	margin: 0 auto 30px;
	padding: 0;
}

div h2 {
	margin: 0 auto 30px;
	padding: 0;
}

div div {
	counter-reset: titlenum;
	margin: 0 10px 30px;
	padding: 0;
}

div div h3: before {
	background: #00008b;
	border-radius: 5px;
	color: #FFF;
	counter-increment: titlenum;
	content: "POINT " counter(titlenum);
	display: block;
	left: 0;
	margin: auto;
	padding: 5px 10px;
	position: absolute;
	top: 0;
}

div div h3 {
	margin: 0 auto 10px;
	padding: 5px 0 5px 110px;
	position: relative;
	
}

div div p {
	margin: 0 auto 20px;
	padding: 0;
}