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

<style>
/*----------全体スタイル----------*/
#seniors-day-2022{
max-width: 865px;
background: url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-back01.jpg");
position: relative;
}
#seniors-day-2022 h2,#seniors-day-2022 h3{
font-size:24px;
}
#seniors-day-2022 h4{
font-size:16px;
}
#seniors-day-2022 a{
text-decoration: none;
color: #000000;
}
#seniors-day-2022 img{
width: 100%;
}
#seniors-day-2022 ul{
list-style:none;
padding-left: 0;
}
#seniors-day-2022 .color-text{
color: #C84210;
}
#seniors-day-2022 .li-768{
display: none;
}
/*----------見出し----------*/
#seniors-day-2022 #section-intro{
padding-bottom: 70px;
padding-top:0;
margin-bottom: 50px;
position: relative;
overflow: hidden;
z-index: 1;
}
#seniors-day-2022 #section-intro::before{
content:"";
background: url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-01.png");
position: absolute;
width: 370px;
height: 150px;
z-index: -2;
left: -20px;
top:20px;
}
#seniors-day-2022 #section-intro::after{
content:"";
background: url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-01.png");
position: absolute;
width: 370px;
height: 150px;
z-index: -2;
right: -20px;
bottom:40px;
}
#seniors-day-2022 #section-intro h2{
padding-top:100px;
margin: 0 0 20px;
text-align: center;
}
#seniors-day-2022 #section-intro p{
line-height: 30px;
margin: 0;
font-size: 14px;
text-align: center;
padding-bottom:50px;
}
#seniors-day-2022 #section-intro .back-white{
position: relative;
}
#seniors-day-2022 #section-intro .back-white::before{
content: "";
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
background-color: #FFFFFF;
transform: skewY(-9deg);
z-index: -1;
}
#seniors-day-2022 #section-intro .back-white::after{
content: "";
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
transform: skewY(-3deg);
border-top:solid 2px #C84210;
border-bottom:solid 2px #C84210;
}
/*----------ランキング&ミニコラムのｈ3----------*/
#seniors-day-2022 #section-ranking,#seniors-day-2022 #section-column{
position: relative;
z-index: 1;
}
#seniors-day-2022 #section-ranking h3,#seniors-day-2022 #section-column h3{
color:#FFFFFF;
font-size:16px;
font-weight: bold;
text-align: center;
position: relative;
margin-bottom: 5px;
}
#seniors-day-2022 #section-ranking h3::before,#seniors-day-2022 #section-column h3::before{
content: "";
background: #C84210;
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
position: absolute;
top:20px;
left: 0;
right: 0;
bottom:0;
margin: auto;
z-index: -1;
}
/*----------ランキング----------*/
#seniors-day-2022 #section-ranking{
margin-bottom: 60px;
}
#seniors-day-2022 #section-ranking ul{
border: solid 5px #C84210;
background: #FFFFFF;
margin: 0 5%;
display: flex;
}
#seniors-day-2022 #section-ranking ul li{
margin-left: 3%;
margin-bottom: 3%;
margin-top: 5%;
}
#seniors-day-2022 #section-ranking ul li a:hover{
opacity: 0.5;
}
#seniors-day-2022 #section-ranking ul li:last-child{
margin-right: 3%;
}
#seniors-day-2022 #section-ranking ul li p{
font-size:15px;
font-weight: bold;
text-align: center;
margin-bottom: 2px;
position: relative;
}
#seniors-day-2022 #section-ranking ul li p::before{
content: "";
position: absolute;
top:-15px;
left: 0;
right: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
display: inline-block;
background-size: contain;
background-image:url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-02.png");
background-repeat: no-repeat;
width: 20px;
height: 16px;
}
#seniors-day-2022 #section-ranking h4{
text-align: center;
color: #C84210;
font-size:11px;
font-weight: bold;
margin: 10px 0 0;
}
#seniors-day-2022 #section-ranking h4::before{
content: "【";
}
#seniors-day-2022 #section-ranking h4::after{
content: "】";
}
#seniors-day-2022 #section-ranking .sp-img{
display: none;
}
/*----------内容-各項目----------*/
#seniors-day-2022 #item{
position: relative;
z-index: 1;
}
#seniors-day-2022 #item .back-be{
position: relative;
padding-top: 50px;
}
#seniors-day-2022 #item .margin-a{
padding-bottom: 150px;
padding-top: 200px;
margin-bottom: 80px;
margin-top: 10px;
}
#seniors-day-2022 #item .back-be::before{
content: "";
background: url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-back02.jpg");
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
transform: skewY(-9deg);
z-index: -1;
}
#seniors-day-2022 #item .item-top h3,#seniors-day-2022 #item .item-top p{
text-align: center;
}
#seniors-day-2022 #item .item-top h3{
margin: 0 auto 24px;
}
#seniors-day-2022 #item .item-top p{
font-size:14px;
margin: 0 auto 50px;
line-height: 30px;
}
#seniors-day-2022 #item .item-left,#seniors-day-2022 #item .item-right{
position: relative;
}
#seniors-day-2022 #item .item-top::before{
content: "";
background: url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-05.png");
background-repeat: no-repeat;
display: inline-block;
background-size: contain;
width: 50px;
height: 50px;
}
#seniors-day-2022 #item .item-left::before{
content: "";
position: absolute;
right: 100px;
top:-30px;
}
#seniors-day-2022 #item .item-right::before{
content: "";
position: absolute;
left: 180px;
top:-30px;
}
#seniors-day-2022 #item .item-bottom{
display: flex;
margin:0 5%;
}
#seniors-day-2022 #item .item-bottom li{
width: calc(100% / 3);
}
#seniors-day-2022 #item .item-bottom li+li{
margin-left: 3%;
}
#seniors-day-2022 #item .item-bottom h4{
color:#C84210;
text-align: center;
margin: 15px 0 10px;
padding-bottom: 5px;
border-bottom: dashed 1px #C84210;
}
#seniors-day-2022 #item .item-bottom p{
font-size:14px;
margin: 5px 0 10px;
}
#seniors-day-2022 #item .item-bottom a{
text-align: center;
margin: 0;
display: block;
border:solid 1px #C84210;
font-size:10px;
padding: 8px;
}
#seniors-day-2022 #item .item-bottom a:hover{
background: #C84210;
color:#FFFFFF;
}
#seniors-day-2022 #item .back-be-2{
position: relative;
overflow: hidden;
}
#seniors-day-2022 #item .back-be-2::before{
content:"";
background: url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-01.png");
position: absolute;
width: 370px;
height: 150px;
z-index: -2;
left: -20px;
top:30px;
}
#seniors-day-2022 #item .back-be-2::after{
content:"";
background: url("https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-01.png");
position: absolute;
width: 370px;
height: 150px;
z-index: -2;
right: -20px;
bottom:50px;
}
#seniors-day-2022 #item #seniors-day__item__design{
margin-top: -100px;
}
#seniors-day-2022 #item #seniors-day__item__design .margin-a{
padding-bottom: 0;
padding-top: 150px;
}
#seniors-day-2022 #item .arrow-r{
position: relative;
}
#seniors-day-2022 #item .arrow-r::before{
content: "";
width: 6px;
height: 6px;
border: 0;
border-top: solid 1px #C84210;
border-right: solid 1px #C84210;
position: absolute;
top: 50%;
right: 5%;
margin-top: -4px;
transform: rotate(45deg);
}
#seniors-day-2022 #item .arrow-r:hover::before{
content: "";
border-top: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
}

/*----------ミニコラム----------*/
#seniors-day-2022 #section-column div{
border: solid 5px #C84210;
background: #FFFFFF;
margin: 0 5%;
padding: 5%;
}
#seniors-day-2022 #section-column h4{
text-align: center;
border-bottom: dashed 1px #C84210;
padding-bottom: 10px;
font-size: 18px;
margin-bottom: 20px;
}
#seniors-day-2022 #section-column{
padding-bottom: 50px;
}
#seniors-day-2022 #section-column div p{
line-height: 30px;
font-size: 14px;
}
@media screen and (max-width: 768px){
#seniors-day-2022 .br-768{
display: none;
}
#seniors-day-2022 .li-768{
display: block;
}
#seniors-day-2022 #section-ranking ul{
flex-wrap: wrap;
justify-content: center;
padding-bottom: 15px;
padding-top: 10px;
}
#seniors-day-2022 #section-ranking ul li:first-child{
width: 90%;
}
#seniors-day-2022 #section-ranking .pc-img{
display: none;
}
#seniors-day-2022 #section-ranking .sp-img{
display: block;
}
#seniors-day-2022 #section-ranking ul li{
margin-right: 3%;
width: 42%;
}
#seniors-day-2022 #item .item-bottom{
flex-wrap: wrap;
justify-content: space-around;
}
#seniors-day-2022 #item .item-bottom li{
width: 46%;
padding-left: 5px;
padding-right: 5px;
}
#seniors-day-2022 #item .item-bottom li+li{
margin: 0 0 50px;
}
#seniors-day-2022 #item .item-top::before{
display: none;
}
#seniors-day-2022 #section-intro p,#seniors-day-2022 #item .item-top p{
margin-left: 5%;
margin-right: 5%;
text-align: left;
}
}
@media screen and (max-width: 480px){
#seniors-day-2022 #item .margin-a{
padding-bottom: 50px;
padding-top: 150px;
}
#seniors-day-2022 #item #seniors-day__item__design .margin-a{
padding-top: 100px;
margin-bottom: 0;
}
}
</style>

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


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

<section id="seniors-day-2022">
<div><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/2022-seniors'day-bnr.jpg" alt="敬老の日特集の画像"></div>
<section id="section-intro">
<div class="back-white">
<h2 class="color-text">敬老の日に <br>”気持ちいい暮らしのアイテム”を</h2>
<p>9月19日は敬老の日。<br class="br-768">おじいちゃん、おばあちゃんに、日々の暮らしに気持ちのいいアイテムを。<br class="br-768">「ありがとう」の気持ちを贈り物にこめて、お家での時間をぐっと楽しくサポートするアイテムで、<br class="br-768">リラックスの時間を贈りましょう。</p>
</div>
</section>
<section id="section-ranking">
<h3>ランキング</h3>
<ul>
<li>
<p class="color-text">No.1</p>
<a href="https://www.ikemart.com/shopdetail/000000001081/cushion/page1/order/"><img class="pc-img" src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_a-01.jpg" alt="くつろぎクッションの画像"><img class="sp-img" src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_a-01-sp.jpg" alt="くつろぎクッションの画像"><h4>くつろぎクッション</h4></a>
</li>
<li>
<p class="color-text">No.2</p>
<a href="https://www.ikemart.com/shopdetail/000000000232/okitatami/page1/order/"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_c-01.jpg" alt="置き畳の画像"><h4>置き畳</h4></a>
</li>
<li>
<p class="color-text">No.3</p>
<a href="https://www.ikemart.com/shopdetail/000000000316/rug/page1/order/"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_b-03.jpg" alt="籐カーペットの画像"><h4>籐カーペット</h4></a>
</li>
<li>
<p class="color-text">No.4</p>
<a href="https://www.ikemart.com/shopdetail/000000000491/cushion/page1/order/"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_a-02.jpg" alt="サポートクッションの画像"><h4>サポートクッション</h4></a>
</li>
<li>
<p class="color-text">No.5</p>
<a href="https://www.ikemart.com/shopdetail/000000000364/igusazakka/page1/order/"><img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_a-03.jpg" alt="スツールクッションの画像"><h4>スツールクッション</h4></a>
</li>
</ul>
</section>
<section id="section-contents">
<section id="item">
<section id="seniors-day__item__health" class="back-be-2">
<div class="back-be margin-a">
<div class="item-top item-left">
<h3>”健康”を応援するアイテム</h3>
<p>いつまでも元気でいてほしい…そんな気持ちが自然と伝わるアイテムを。<br class="br-768">立ち座りが楽になるスツールや、体をサポートしてくれるクッションなど。<br class="br-768">普段の暮らしを助けるアイテム。</p>
</div>
<ul class="item-bottom">
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_a-01.jpg" alt="くつろぎクッションの画像">
<h4>くつろぎクッション</h4>
<p>腰当や首元など様々な部分に使用できる多用途クッション</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_a-02.jpg" alt="サポートクッションの画像">
<h4>サポートクッション</h4>
<p>お尻への負担を軽減してくれる低反発入りクッション</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_a-03.jpg" alt="スツールクッションの画像">
<h4>スツールクッション</h4>
<p>あぐらなどでフローリングの上に座るときに便利なクッション</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li class="li-768"></li>
</ul>
</div>
</section>
<section id="seniors-day__item__design">
<div class="margin-a">
<div class="item-top item-right">
<h3>”デザイン”でつくる<br>オシャレ空間</h3>
<p>オシャレ好きなおじいちゃんおばあちゃんには、<br class="br-768">一味違ったデザインのインテリアアイテムがおすすめ。<br class="br-768">年代にに捉われない多様なデザインから、<br class="br-768">喜んでもらえる１枚を選んでみませんか？</p>
</div>
<ul class="item-bottom">
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_b-01.jpg" alt="ウィルトン織ラグの画像">
<h4>ウィルトン織ラグ</h4>
<p>１枚で華やかなカラフルで華やかなウィルトンラグ</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_b-02.jpg" alt="竹カーペットの画像">
<h4>竹カーペット</h4>
<p>丈夫で長持ちする、お手入れも簡単な自然素材カーペット</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_b-03.jpg" alt="籐カーペットの画像">
<h4>籐カーペット</h4>
<p>お部屋に上質なしつらいを。希少価値の高い籐を使用したカーペット</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li class="li-768"></li>
</ul>
</div>
</section>
<section id="seniors-day__item__nostalgia" class="back-be-2">
<div class="back-be margin-a">
<div class="item-top item-left">
<h3>”懐かしさ”を贈る、くつろぎ空間</h3>
<p>畳やい草のアイテムは、懐かしい気持ちにさせてくれること間違いなし！<br class="br-768">残暑残る時期は清々しく、寒くなってきたらこたつでぬくぬくと。<br class="br-768">そんな体験を思い出すことができるアイテムたちです。</p>
</div>
<ul class="item-bottom">
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_c-01.jpg" alt="置き畳の画像">
<h4>置き畳</h4>
<p>置くだけで簡単和スペース。ゆっくりくつろげる4.5畳分の置き畳。</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_c-02.jpg" alt="国産い草ラグの画像">
<h4>国産い草ラグ</h4>
<p>国産い草を使用した和モダンテイストのい草ラグ。</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/seniors-day/photo_c-03.jpg" alt="堀こたつ用い草ラグの画像">
<h4>堀こたつ用い草ラグ</h4>
<p>堀こたつに合わせて使えるい草ラグ。</p>
<a class="color-text arrow-r" href="#">詳細はこちら</a>
</li>
<li class="li-768"></li>
</ul>
</div>
</section>
</section>
</section>
<section id="section-column">
<h3>ミニコラム</h3>
<div>
<h4 class="color-text">「敬老の日」は、村長さんの「いき」なおもてなしが発祥？</h4>
<p>敬老の日は、1947年に兵庫県の野間谷村（現：多可町）で開催された「としよりの日」というイベントが発祥とされています。この会を企画された当時村長の門脇政夫さんは、戦後間もない不安定な時代のなかこれからの社会をより良いものにしていきたいと言う想いで、このイベントを開催されたそうです。<br>小さな村から始まったこのお祝いの日。<br>贈り物を渡しながら、おじいちゃんおばあちゃんの想いに耳を傾けてみるのもいいですね。</p>
</div>
</section>
</section>

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