<style tyle="css/text">
.sparea {
background:url<?php echo site_url(); ?>/img/common_line01.gif) repeat-x bottom;
padding-bottom: 16px;
margin-bottom:20px;
width:700px;
height:500px;
}
.sparea .sp_h2{
background:url('<?php echo site_url(); ?>/img/sp_titcrown1.gif') no-repeat top left;
font-size: 20px;
margin-bottom: 7px;
padding:3px 0 3px 40px;
font-weight: bold;
}
.sparea .sp_h2b{
background:url('<?php echo site_url(); ?>/img/sp_titcrown2.gif') no-repeat top left;
font-size: 20px;
margin-bottom: 7px;
padding:3px 0 3px 40px;
font-weight: bold;
}
.sparea .sp_h2c{
background:url('<?php echo site_url(); ?>/img/sp_titcrown3.gif') no-repeat top left;
font-size: 20px;
margin-bottom: 7px;
padding:3px 0 3px 40px;
font-weight: bold;
}
.sparea .sp_h3{
font-size: 20px;
}
.sparea .sp_l{
float: left;
}
.sparea .sp_r{
float: right;
width:400px;
}
.sparea .sp_r .sp_txtarea{
background: url('<?php echo site_url(); ?>/img/sp_txtbtm01.gif') no-repeat left bottom #ffeac3;
padding: 15px 15px 0;
margin-bottom: 3px;
}
.sparea .sp_r .sp_txtarea h3{
color: #c27700;
font-size: 16px;
padding-bottom: 2px;
}
.sparea .sp_r .sp_txtarea .sp_txt{
padding-bottom: 10px;
}
.sparea .sp_r .sp_txtarea .sp_btn{
text-align: right;
padding-right: 12px;
}
</style>
<!-- 商品 -->
<div class="sparea">
<h2 class="sp_h2">商品名</h2>
<div class="sparea_item">
<p class="sp_l"><a href="#" target="_blank"><img title="商品名" src="<?php echo site_url(); ?>/img/250x250.jpg" alt="商品名" width="250" height="250" /></a></p>
<div class="sp_r">
<div class="sp_txtarea">
<h3 class="sp_h3"><strong>商品キャッチ</strong></h3>
<p class="sp_txt">商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明<br />
商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明。<br />
商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明商品説明。<p class="sp_btn"><a href="#" target="_blank"><img src="<?php echo site_url(); ?>/img/sp_btn01.gif" alt="詳細を見る" width="103" height="31" /></a></p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!--/商品 -->