------------------------------------------------------------------------------------------------
ここからスタイルの記述です。
※レスポンシブ対応になっております。
------------------------------------------------------------------------------------------------

<style>
/*----------全体スタイル----------*/
#rug-summer-2022{
font-size:14px;
max-width: 900px;
color: #616161;
}
#rug-summer-2022 h2,#rug-summer-2022 h3{
font-size:24px;
}
#rug-summer-2022 a{
text-decoration: none;
text-align: center;
color: #FFFFFF;
}
#rug-summer-2022 a:hover{
cursor: pointer;
opacity: 0.5;
}
/*----------見出し----------*/
#rug-summer-2022 .fv{
width: 100%;
}
#rug-summer-2022 .fv img{
width: 100%;
height: auto;
}
#section-intro{
padding-top: 50px;
padding-bottom: 50px;
}
#section-intro h2,#section-intro p{
text-align: center;
}
/*----------商品内容-全体----------*/
#rug-summer-2022 .product-list{
padding-top: 100px;
}
#rug-summer-2022 .product-list ul{
list-style:none;
padding-left: 0;
margin-left: 10px;
margin-right: 10px;
display: flex;
flex-wrap:wrap;
justify-content: space-around;
}
#rug-summer-2022 .product-list ul li{
width: 25%;
margin: 5px;
padding: 10px 3% 20px;
box-shadow: 0 0 5px 1px #C8C8C8;
border-radius: 20px;
margin-bottom: 80px;
}
/*----------商品内容-全体-上----------*/
#rug-summer-2022 .product-list__up{
display: flex;
margin: 50px 0 60px;
padding-left: 40px;
padding-right: 40px;
}
#rug-summer-2022 .product-list__up__50{
width: 50%;
}
#rug-summer-2022 .product-list__up img{
width: 100%;
height: auto;
}
#rug-summer-2022 .product-list__up__contents{
margin: -100px auto 10px 30px;
width: 50%;
}
#rug-summer-2022 .product-list__up__contents h3{
color: #3696D6;
}
#rug-summer-2022 .product-list__up__contents p{
width: 300px;
line-height: 40px;
margin-left: 0;
margin-right: auto;
margin-top: 10px;
}
#rug-summer-2022 .product-list__up__contents a{
background-color: #3696D6;
color:#FFFFFF;
display: block;
width: 100px;
padding: 5px;
margin-right: 0;
margin-left: auto;
}
/*----------商品内容-全体-下----------*/
#rug-summer-2022 .product-list__under li{
background-color: #F9F9F9;
}
#rug-summer-2022 .product-list__under__circle{
background-color: #3696D6;
width: 70px;
height: 70px;
font-sizu:12px;
color: #FFFFFF;
border-radius: 50px;
margin: -40px auto 15px;
position: relative;
}
#rug-summer-2022 .product-list__under__circle p{
position: absolute;
text-align: center;
top: 35%;
left: 50%;
color:#FFFFFF;
transform: translate(-50%, -50%);
}
#rug-summer-2022 .product-list__under__circle span{
font-size:16px;
}
#rug-summer-2022 .product-list__under dt{
color: #3696D6;
text-align: center;
font-size:18px;
font-weight: bold;
border-bottom: dashed 1px #3696D6;
padding-bottom: 10px;
margin-bottom: 10px;
}
#rug-summer-2022 .product-list__under dd{
margin: 0;
font-size:13px;
text-align: left;
}
#rug-summer-2022 .br-768__2{
display: none;
}
/*----------商品内容-青----------*/
#rug-summer-2022 .product-list__blue{
background:url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-blue1.png") no-repeat right,url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-blue2.png") no-repeat top left,url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-blue3.png") no-repeat left bottom;
}
/*----------商品内容-緑----------*/
#rug-summer-2022 .product-list__green{
background:url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-green1.png") no-repeat left,url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-green2.png") no-repeat top right,url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-green3.png") no-repeat right bottom;
}
#rug-summer-2022 .product-list__green .product-list__up__contents{
margin-right: 20px;
margin-left: 0;
}
#rug-summer-2022 .product-list__green .product-list__up__contents h3{
color: #7AA180;
}
#rug-summer-2022 .product-list__green .product-list__up__contents a,#rug-summer-2022 .product-list__green__point .product-list__under__circle{
background-color: #7AA180;
}
#rug-summer-2022 .product-list__green__point dt{
color: #7AA180;
border-color: #7AA180;
}
#rug-summer-2022 .product-list__green .product-list__up{
flex-direction: row-reverse;
}
@media screen and (max-width: 768px){
#rug-summer-2022 .br-768{
display: none;
}
#rug-summer-2022 .product-list{
padding-top: 20px;
padding-bottom: 20px;
}
#rug-summer-2022 .product-list ul{
display: block;
}
#rug-summer-2022 .product-list ul li{
width: auto;
margin-bottom: 20px;
}
#rug-summer-2022 .product-list__up__contents p{
line-height: 40px;
}
#rug-summer-2022 .product-list__up{
display: block;
padding-left: 20px;
padding-right: 20px;
position: relative;
margin-top:150px;
}
#rug-summer-2022 .product-list__up__50{
width: 400px;
margin-left: auto;
margin-right: auto;
}
#rug-summer-2022 .product-list__up__contents{
width: auto;
margin: 0;
}
#rug-summer-2022 .product-list__green .product-list__up__contents{
margin: 0;
}
#rug-summer-2022 .product-list__up__contents h3{
display: none;
}
#rug-summer-2022 .product-list__up__contents p{
width: auto;
text-align: center;
}
#rug-summer-2022 .br-768__2{
display: block;
}
#rug-summer-2022 .product-list__under__circle{
margin: 10px 0 20px;
padding: 10px;
width: auto;
height: 20px;
}
#rug-summer-2022 .product-list__under__circle p{
top:auto;
}
#rug-summer-2022 .product-list__under dt{
text-align: left;
}
/*----------h3を疑似要素で入れている----------*/
#rug-summer-2022 .product-list__h3-1::before,#rug-summer-2022 .product-list__h3-2::before,#rug-summer-2022 .product-list__h3-3::before,#rug-summer-2022 .product-list__h3-4::before{
width: 480px;
text-align: center;
color: #3696D6;
font-size:22px;
position: absolute;
font-weight: bold;
top:-110px;
left: 50%;
transform: translateX(-50%);
white-space: pre;
}
/*----------h3を疑似要素で入れている-ボリュームラグ----------*/
#rug-summer-2022 .product-list__h3-1::before{
content: "へたりにくい\A冷感ボリュームラグ";
}
/*----------h3を疑似要素で入れている-洗えるカーペット----------*/
#rug-summer-2022 .product-list__h3-2::before{
content: "キズにも強い、\A洗えるカーペット";
color: #7AA180;
}
/*----------h3を疑似要素で入れている-シェニールラグ----------*/
#rug-summer-2022 .product-list__h3-3::before{
content: "水をはじいて洗濯機丸洗いOK\Aシェニールラグ";
}
/*----------h3を疑似要素で入れている-い草ラグ----------*/
#rug-summer-2022 .product-list__h3-4::before{
content: "さらりとした肌触りが\A気持ちいい、い草ラグ";
color: #7AA180;
}
}
@media screen and (max-width: 480px){
#rug-summer-2022 .product-list__up__50{
width: 100%;
}
#rug-summer-2022 .product-list__up__contents p{
text-align: left;
}
#rug-summer-2022 .br-480,#rug-summer-2022 .br-768__2{
display: none;
}
}
</style>

------------------------------------------------------------------------------------------------
ここまでがスタイルの記述です。
------------------------------------------------------------------------------------------------


------------------------------------------------------------------------------------------------
ここからHTMLの記述です。
------------------------------------------------------------------------------------------------

<section id="rug-summer-2022">
<div class="fv">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-rug.jpg" alt="夏ラグ特集の画像">
</div>
<section id="section-intro">
<h2>夏を足元から涼しく！新作ラグ特集</h2>
<p>
日ざしが強く夏の気配を感じられるこの頃…。<br>
足元から涼しさを感じられる素材のラグで涼を呼び込みませんか？<br>
見た目にもすずやかなカラーリングの新作ラグ特集です。
</p>
</section>
<section id="section-product">
<section class="product-list product-list__blue">
<div class="product-list__up product-list__h3-1">
<div class="product-list__up__50"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-rug01.jpg" alt="冷感ボリュームラグの画像"></div>
<div class="product-list__up__contents">
<h3>へたりにくい冷感ボリュームラグ</h3>
<p>へたりにくいボリュームラグに夏らしい冷感生地使用のものが新登場。<br class="br-480">ふっかふかのふみ心地で、思わずごろっと<br class="br-768">寝転がりたくなります。</p>
<a href="#">商品詳細</a>
</div>
</div>
<ul class="product-list__under product-list__blue__point">
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>1</span></p></div>
<dl>
<dt>ひんやり冷たい<br class="br-768">接触冷感生地を使用</dt>
<dd>表生地にq-max値が0.33(平均値0.22)の接触冷感生地を使用。肌に触れるたびにひんやりと冷たく、エアコンとの併用でさらに冷感アップ。</dd>
</dl>
</li>
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>2</span></p></div>
<dl>
<dt>ふっかふかの<br class="br-768">ボリューム感</dt>
<dd>中に30ｍｍウレタンフォームを使用していてボリュームたっぷり。ごろりと横になっても全く底つき感なく、フローリングの上でも長時間ゆっくりくつろげます。8万回の耐久試験で復元率約97％で、長くご使用いただけます。</dd>
</dl>
</li>
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>3</span></p></div>
<dl>
<dt>階下に安心の<br class="br-768">防音効果</dt>
<dd>極厚仕様で階下への騒音を軽減します。小さなお子様がいるご家庭も安心。</dd>
</dl>
</li>
</ul>
</section>
<section class="product-list product-list__green">
<div class="product-list__up product-list__h3-2">
<div class="product-list__up__50"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-rug02.jpg" alt="冷感ボリュームラグの画像"></div>
<div class="product-list__up__contents">
<h3>キズにも強い、洗えるカーペット</h3>
<p>ポリプロピレンの素材で織りあげたキズに<br class="br-768">強いカーペット。<br class="br-768__2">水で洗い流すこともできて<br class="br-768">清潔にご使用いただけます。</p>
<a href="#">商品詳細</a>
</div>
</div>
<ul class="product-list__under product-list__green__point">
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>1</span></p></div>
<dl>
<dt>水洗いができて<br class="br-768">清潔</dt>
<dd>水がこぼれてもサッとひと拭き、汚れが気になるときは水で洗い流せて清潔です。一般的な除菌スプレーで拭いても褪せたりしないから、お手入れ簡単＆キレイ。</dd>
</dl>
</li>
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>2</span></p></div>
<dl>
<dt>ひっかき傷に<br class="br-768">強い</dt>
<dd>比較的固い素材のポリプロピレンをパイプ状にして織りあげています。ペットに引っかかれても傷がつきにくく、床を傷から守ります。</dd>
</dl>
</li>
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>3</span></p></div>
<dl>
<dt>ホコリやゴミが詰まりにくくキレイ</dt>
<dd>毛足の長いラグと比較するとホコリや髪の毛が詰まりにくく、お掃除も簡単。カビが発生しにくい素材のため、カビを食すダニも寄り付きにくく、清潔なカーペットです。</dd>
</dl>
</li>
</ul>
</section>
<section class="product-list product-list__blue">
<div class="product-list__up product-list__h3-3">
<div class="product-list__up__50"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-rug03.jpg" alt="冷感ボリュームラグの画像"></div>
<div class="product-list__up__contents">
<h3>水をはじいて洗濯機丸洗いOKのシェニールラグ</h3>
<p>撥水加工で水をはじくから汚れにくい。<br class="br-480">リビングだけでなく汚が気になるダイニングでも使いやすい。<br class="br-480">気になる汚れは、専用ネットに入れて洗濯機で丸洗いも可能。<br class="br-480">清潔にご使用いただけます。</p>
<a href="#">商品詳細</a>
</div>
</div>
<ul class="product-list__under product-list__blue__point">
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>1</span></p></div>
<dl>
<dt>お手入れ簡単<br class="br-768">清潔</dt>
<dd>短めの毛足の生地を使用しているから、ホコリなども絡まりにくくお掃除もラクラク。撥水加工で汚れもつきにくく、また洗えるから、清潔にご使用いただけます。</dd>
</dl>
</li>
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>2</span></p></div>
<dl>
<dt>つややかで、さらりとしたタッチ感</dt>
<dd>シェニール糸で織りあげた表生地はやわらかで、なめらかな肌触り。さらりとした肌触りで季節を問わずご使用いただけます。</dd>
</dl>
</li>
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>3</span></p></div>
<dl>
<dt>すべりにくい加工付でずれにくい</dt>
<dd>裏面にすべりにくい加工をしています。ズレたり滑りにくいから、安心にご使用いただけます。</dd>
</dl>
</li>
</ul>
</section>
<section class="product-list product-list__green">
<div class="product-list__up product-list__h3-4">
<div class="product-list__up__50"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-rug/2022-summer-rug04.jpg" alt="冷感ボリュームラグの画像"></div>
<div class="product-list__up__contents">
<h3>さらりとした肌触りが気持ちいい、い草ラグ</h3>
<p>これから暑くなっていく季節。<br class="br-768">天然素材のラグで足元から心地よく。</p>
<a href="#">商品詳細</a>
</div>
</div>
<ul class="product-list__under product-list__green__point">
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>1</span></p></div>
<dl>
<dt>ナチュラルな素材と<br class="br-768">デザイン</dt>
<dd>お部屋になじみやすいやわらかなカラーとデザイン。和室でも洋室でも、お部屋のタイプを問わずコーディネートいただけます。</dd>
</dl>
</li>
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>2</span></p></div>
<dl>
<dt>これからの蒸し暑い季節もサラリとさわやか</dt>
<dd>い草は綿の約2.5倍の吸湿力があります。自然素材のやさしい肌触りでいつまでも寝転んでいたくなる心地よさ。</dd>
</dl>
</li>
<li>
<div class="product-list__under__circle"><p>point<br class="br-768"><span>3</span></p></div>
<dl>
<dt>お掃除しやすく<br class="br-768">収納便利</dt>
<dd>汚れが付きにくい素材のい草。掃除もしやすくお手入れも簡単。コンパクトに折りたためるから、運びやすく収納も便利です。</dd>
</dl>
</li>
</ul>
</section>
</section>
</section>

------------------------------------------------------------------------------------------------
ここまでがHTMLの記述です。
------------------------------------------------------------------------------------------------