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

<style>
/*----------　　初期設定　　----------*/
#kotatsu-2022{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
#kotatsu-2022 ul{
list-style-type: none;
padding-left: 0;
}
#kotatsu-2022 h2,#kotatsu-2022 h3,#kotatsu-2022 h4,#kotatsu-2022 h5,#kotatsu-2022 p{
margin: 0;
}
#kotatsu-2022 img{
width: 100%;
vertical-align:top;
margin-bottom: 10px;
}
#kotatsu-2022 a{
text-decoration: none;
}
html { scroll-behavior: smooth;} /*--ゆっくりスクロール--*/
/*----------　　all　　----------*/
#kotatsu-2022{
font-family: "yu gothic";
}
#kotatsu-2022 .back-1{
background: #fff;
padding: 50px;
}
#kotatsu-2022 .back-2{
background: #F6F6F6;
padding: 100px 50px;
}
#kotatsu-2022{
text-align: center;
}
#kotatsu-2022 h2{
font-weight: 300;
font-size: 24px;
font-weight: bold;
padding-bottom: 32px;
}
#kotatsu-2022 h3{
font-size: 12px;
line-height: 24px;
padding: 10px 2px;
color: rgb(255, 255, 255); /*文字色*/
background: #AA9F9F;/*背景色*/
}
#kotatsu-2022 .div-text p{
font-size: 12px;
line-height: 24px;

}
#kotatsu-2022 .img-text p{
font-size: 8px;
text-align: left;
}
#kotatsu-2022 section{
margin-bottom: 8%;
}
/*----------　　top　　----------*/
#kotatsu-2022 #section-top h2{
font-size: 28px;
line-height: 45px;
padding: 10px 2px;
margin-bottom: 40px;
color: #9D553E; /*文字色*/
}
#kotatsu-2022 #section-top p{
margin-bottom: 10%;
}
#kotatsu-2022 .button-ul ul{
display: flex;
justify-content: center;
}
#kotatsu-2022 .button-ul a{
display: block;
color: #fff;
width: 35ex;
height: 60px;
font-size: 12px;
line-height: 24px;
background: #9D553E;
padding: 20px;
margin: 2px;
font-weight: bold;
position: relative;
}
#kotatsu-2022 .button-ul a::after{
content: "";
width: 8px;
height: 8px;
border: 2px solid;
border-color: transparent transparent #ffffff #ffffff;
transform: rotate(-45deg);
position: absolute;
bottom: 35%;
left: 50%;
}
#kotatsu-2022 .button-ul a:hover{
background: rgba(157, 85, 62, 0.7);
}
/*----------　　series　　----------*/
#kotatsu-2022 .series-ul ul{
display: flex;
}
#kotatsu-2022 .series-ul li{
margin: 20px;
display: flex;
}
#kotatsu-2022 .series-ul .div-text{
display: flex;
flex-direction: column;
}
#kotatsu-2022 .series-ul p{
flex-grow: 1;
}
/*--a button--*/
#kotatsu-2022 .a-button{
display: flex;
align-items: center;
justify-content: center;
}

#kotatsu-2022 .a-button p{
padding: 10px 2px;
font-weight: bold;
width: 400px;
color: rgb(47, 47, 47);
border: solid 3px #9D553E;
background: #fff;
}
#kotatsu-2022 .a-button p:hover{
color: rgb(255, 255, 255);
background: rgba(157, 85, 62);
}
/*--b button--*/
#kotatsu-2022 .b-button p{
padding: 10px 2px;
margin: 10px 0;
font-weight: bold;
color: #fff;
background: #9D553E;

}
#kotatsu-2022 .b-button p:hover{
background: rgba(157, 85, 62, 0.7);
}
/*----------　　column　　----------*/
#kotatsu-2022 .column-ul ul{
display: flex;
justify-content: center;
}
#kotatsu-2022 .column-ul li{
margin: 2%;
}
.column-ul p {
text-align: left;
}
.column-img{
width: 400px;
}
.c-img{
width: 18%;
position:relative;
top: 50px;
right:50px;
}
@media screen and (max-width: 768px){
/*----------　　all　　----------*/
#kotatsu-2022 .back-1{
padding: 20px;
}
#kotatsu-2022 .back-2{
padding: 70px 20px;
}
.br-text{
display: none;
}
/*----------　　top　　----------*/
#kotatsu-2022 #section-top h2{
font-size: 25px;
}
#kotatsu-2022 .button-ul ul{
flex-direction: column;
align-items: center;
}
#kotatsu-2022 .button-ul a{
width: 55ex;
height: 40px;
padding: 10px;
line-height: 20px;
}

/*----------　　series　　----------*/
#kotatsu-2022 .series-ul ul{
flex-wrap: wrap;
justify-content: center ;

}
#kotatsu-2022 .series-ul li{
width: 40%;
margin: 10px;
}
/*----------　　column　　----------*/
#kotatsu-2022 .column-ul ul{
flex-wrap: wrap-reverse;
justify-content: center;
}
.column-img{
width: 95%;
}
.c-img{
width: 20%;
top: 0px;
left:20px;
}
}
@media screen and (max-width: 480px){
#kotatsu-2022 h2{
font-weight: 300px;
font-size: 20px;
}
#kotatsu-2022 #section-top h2{
font-size: 22px;
}
#kotatsu-2022 .button-ul a{
width: 40ex;
height: 40px;
padding: 10px;
line-height: 20px;
}
}
</style>

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


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

<section id="kotatsu-2022">
<div><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\banner.jpg" alt="こたつ特集バナー"></div>
<section id="section-top" class="back-1">
<div class="div-text">
<h2>この冬はあたたかおうち時間！<br>
こたつ布団セレクション</h2>
<p>寒い冬に大活躍のこたつ。<br>
節電にも気を使いたいこの頃。空気を乾燥させることもなく電気で暖をとれるこたつは心強い冬のアイテムです。<br>
デザインがおしゃれなこたつや、ダイニング用こたつなど、ライフスタイルに合わせたこたつ布団が揃っています。<br>
こたつ布団で冬の暮らしを楽しみませんか。</p>
</div>
<div class="button-ul">
<ul>
<li><a href="#section-series1">ボリュームタイプ
こたつ布団</a>
</li>
<li><a href="#section-series2">ふっくら敷布団</a>
</li>
<li><a href="#section-series3">ハイタイプこたつ布団</a>
</li>
</ul>
</div>
</section>
<section id="section-series1" class="back-2">
<div class="div-text">
<h2>中綿たっぷりであたたか！<br>
ボリュームタイプこたつ布団
</h2>
<p>中綿をたっぷりと補充した極厚タイプのこたつ布団。<br>
ヒーターの熱を綿の間の空気層で逃がしにくく、保温性が高くとってもあたたか。<br>
お部屋の主役になれるような、おしゃれなデザインのこたつ布団を多数揃えています。</p>
</div>
<div class="series-ul">
<ul>
<li class="series-li">
<div class="div-text">
<h3>和モダンテイスト</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\1_1.jpg" alt="和モダンテイスト"></div>
<p>和室、洋室両方に合わせやいデザインを施した和モダンテイストの掛布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
<li class="series-li">
<div class="div-text">
<h3>ギャベ柄</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\1_2.jpg" alt="ギャベ柄"></div>
<p>明るいミックスの色使いでお部屋の主役に。人気のギャベ柄掛布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
<li class="series-li">
<div class="div-text">
<h3>シンプルデザイン</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\1_3.jpg" alt="シンプルデザイン"></div>
<p>刺し子調のステッチがかわいい、シンプルであわせやすい無地調掛布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
</ul>
</div>
<div class="div-text ">
<h4>掛敷セット
</h4>
</div>
<div class="series-ul">
<ul>
<li class="series-li">
<div class="div-text">
<h3>カラフルデザイン</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\2_1.jpg" alt="カラフルデザイン"></div>
<p>色鮮やかなデザインで、掛敷両方を同じ柄にした掛敷セット</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
<li class="series-li">
<div class="div-text">
<h3>定番うさぎ柄</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\2_2.jpg" alt="定番うさぎ柄"></div>
<p>人気の可愛いうさぎ柄をモチーフに使用した掛敷セット</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
<li class="series-li">
<div class="div-text">
<h3>珍しい丸い形</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\2_3.jpg" alt="珍しい丸い形"></div>
<p>円形のこたつはそれだけで部屋がおしゃれに。丸い形の掛敷セット</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
</ul>
</div>
<div class="div-text">
<a class="a-button" href="#"><p>こたつ布団ラインナップ一覧へ　▶</p></a>
</div>
</section>
<section id="section-series2" class="back-1">
<div class="div-text">
<h2>床冷えを防いでしっかり節電<br>
ふっくら敷布団
</h2>
<p>実はこたつの中の熱は、床面から逃げていくってご存知でしたか？<br>
ボリュームタイプの敷を使えば、床面からの冷気をしっかり遮断し温まった熱を逃しません。<br>
節電にもなり、ふっくらとした座り心地でいつまでもゴロゴロとくつろいでいたくなる、<br>
ふっくらタイプの敷布団がおすすめです。</p>
</div>
<div class="series-ul">
<ul>
<li>
<div class="div-text">
<h3>綿素材使用の日本製</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\3_1.jpg" alt="綿素材使用の日本製"></div>
<p class="series-text">肌触りがさらっとした綿素材を使用し、ボリュームある仕様にした敷布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
<li>
<div class="div-text">
<h3>6層タイプ</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\3_2.jpg" alt="6層タイプ"></div>
<p class="series-text">あったかい表地を使用し、中材含め6層に仕上げた敷布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
<li>
<div class="div-text">
<h3>大判サイズ</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\3_3.jpg" alt="大判サイズ"></div>
<p class="series-text">両手を広げて使用できる、大きなサイズの敷布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
</ul>
</div>
<div class="div-text">
<a class="a-button" href="#"><p>こたつ敷布団ラインナップ一覧へ　▶</p></a>
</div>
</section>
<section id="section-series3" class="back-2">
<div class="div-text">
<h2>ダイニングやテレワークで便利<br>
ハイタイプこたつ布団
</h2>
<p>ハイタイプこたつは、椅子に座ったままの状態で暖まることができる、ニュータイプのこたつです。<br>
ダイニングテーブルとして使える大判タイプや、テレワークや受験勉強、<br>
趣味の時間などにも活躍しそうなパーソナルこたつなど、<br>
今までのこたつとは違うこたつスタイルであたたかく過ごすことができます。</p>
</div>
<div class="series-ul">
<ul>
<li>
<div class="div-text">
<h3>人気柄</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\4_1.jpg" alt="人気柄"></div>
<p class="series-text">人気柄のハイタイプ専用布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
<li>
<div class="div-text">
<h3>カジュアル柄</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\4_2.jpg" alt="カジュアル柄"></div>
<p class="series-text">明るくカジュアルなデザインのハイタイプ専用布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
<li>
<div class="div-text">
<h3>大判サイズ</h3>
<div class="img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\4_3.jpg" alt="大判サイズ"></div>
<p class="series-text">凹凸感が特徴的な、ストライプ柄のハイタイプ専用布団</p>
<a class="b-button" href="#"><p>商品を見てみる</p></a>
</div>
</li>
</ul>
</div>
<div class="div-text">
<a class="a-button" href="#"><p>ハイタイプこたつラインナップ一覧へ　▶</p></a>
</div>
</section>
<section id="column" class="back-1">
<div class="img c-img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\kobanashi.png" alt="こたつ小噺"></div>
<h2>「最初の頃のこたつは、テーブルに板がなかった？」</h2>
<div class="column-ul">
<ul>
<li>
<div class="img column-img"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/kotatsu\kotatsudai.jpg" alt="布団の上で読み書きするこども達の写真"></div>
<div class="img-text">
<p>昭和30年代に撮影された写真。テーブルに板がついておらず、布団の上で読み書きするこども達。（朝日新聞 2014年11月22日 朝刊 「サザエさんをさがして」）より</p>
</div>
</li>
<li>
<div class="div-text ">
<p>現在のような、テーブルの上に布団をかけたタイプのこたつが普及したのは、昭和20年代に東芝が発売した、「電気やぐらこたつ」のヒットがきっかけでした。しかし、最初の頃のこたつテーブルは板が付いていなかったようで、布団の上に直接ものを置いたりしていたようです。
<br><br>板のついたこたつテーブルが広まったのは昭和34年頃と言われており、旅館で食卓代わりとして使われていたものが発祥と考えられています。</p>
</div>
</li>
</ul>
</div>
</section>
</section>

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