CompKai-FlowerGarden-

-HTML-

<body>
	<div id="wrap">
		<header class="clearfix">
			<p><img src="images/FlowerGarden_02.png" alt="FlowerGarden"></p>
			<div>
				<p>日頃の疲れを癒し・・・Gardenへお越しください。</p>
				<nav>
					<ul class="clearfix">
						<li>Home</li>
						<li>News</li>
						<li>Item</li>
						<li>Info</li>
					</ul>
				</nav>
			</div>
		</header>
		<div id="Mphoto"><img src="images/FlowerGarden_05.jpg" alt="メインビジュアル"></div>
		<section class="clearfix">
			<div id="lf">
				<h2>-Pickup-</h2>
				<div class="clearfix">
					<p><img src="images/FlowerGarden_09.jpg" alt="photo"></p>
					<p><img src="images/FlowerGarden_11.jpg" alt="photo"></p>
					<p><img src="images/FlowerGarden_13.jpg" alt="photo"></p>
					<p><img src="images/FlowerGarden_18.jpg" alt="photo"></p>
					<p><img src="images/FlowerGarden_19.jpg" alt="photo"></p>
					<p><img src="images/FlowerGarden_20.jpg" alt="photo"></p>
				</div>
			</div>
			<div id="rh">
				<h2>Infomation</h2>
				<dl>
					<dt>2019.08.18</dt>
					<dd>スタッフ募集のお知らせを掲載しました。<br>詳しくはお知らせのページをご覧ください。</dd>
					<dt>2019.08.01</dt>
					<dd>サマーギフトの取り扱いをはじめました。</dd>
					<dt>2019.07.29</dt>
					<dd>営業時間変更のお知らせを掲載しました。<br>詳しくはお知らせのページをご覧ください。</dd>
					<dt>201907.24</dt>
					<dd>ウエディング相談会実施のお知らせを掲載しました。<br>詳しくはお知らせのページをご覧ください。</dd>
				</dl>
			</div>
		</section>
		<footer>Copyright FlowerGarden</footer>
	</div>
</body>

-CSS-

@charset "UTF-8";

*{
	margin: 0;
	padding: 0
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

img {
	vertical-align: bottom;
}

#wrap {
	width: 960px;
	margin: 0 auto;
	padding: 0 10px;
	background: url(images/flowergarden9.jpg);
	font-family: '小塚ゴシック Pr6N';
	font-size: 14px;
}

header:before {
	content: "";
	display: block;
	width: 980px;
	height: 10px;
	background: #B28247;
	position: absolute;
	top: 0;
	left: -10px;
}
header {
	padding-top: 10px;
	position: relative;
}
header > p {
	float: left;
}
header > div {
	float: right;
}
header > div p {
	position: absolute;
	top: 40px;
	right: 0;
}
header > div nav {
	position: absolute;
	bottom: 0;
	right: 0;
	font-family: 'Courier New';
	font-size: 24px;
}
ul {
	list-style: none;
}
li {
	width: 116px;
	line-height: 70px;
	float: left;
}
section {
	margin: 30px 0;
	padding: 20px 15px;
	background: url(images/flowergarden8.jpg);
	border-radius: 10px;
}
section > div {
	float: left;
}
h2 {
	border-bottom: double 2px black;
	text-align: center;
	font-family: 'Courier New';
	font-size: 36px;
}
#lf {
	width: 570px;
	margin-right: 30px;
}
#lf > div {
	padding-top: 20px;
}
#lf p {
	width: 179px;
	margin-right: 15px;
	float: left;
}
#lf p:nth-of-type(3n) {
	margin-right: 0;
}
#lf p:nth-of-type(-n+3){
	margin-bottom: 10px;
}
#rh {
	width: 330px;
}
#rh dl {
	padding: 0 20px 0 30px;
}
#rh dd {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: dotted 2px black;
	line-height: 24px;
}

footer {
	width: 980px;
	margin-left: -10px;
	padding: 5px 0;
	border-top: solid 5px #B28247;
	text-align: center;
}