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

<style>
/*----------全体スタイル----------*/
#summer-life-2022{
max-width: 900px;
}
#summer-life-2022 h2,#summer-life-2022 h3{
font-size:24px;
}
#summer-life-2022 h4{
font-size:16px;
}
#summer-life-2022 a{
text-decoration: none;
color: #000000;
}
#summer-life-2022 img{
width: 100%;
}
#summer-life-2022 ul{
list-style:none;
padding-left: 0;
}
/*----------見出し----------*/
#summer-life-2022 #section-intro{
padding-top:100px;
padding-bottom: 70px;
}
#summer-life-2022 #section-intro h2{
text-align: center;
margin: 0 0 20px;
}
#summer-life-2022 #section-intro p{
text-align: center;
line-height: 30px;
margin: 0;
font-size: 14px;
}
/*----------内容　一覧-----------*/
#summer-life-2022 #item-list ul{
display: flex;
flex-wrap: wrap;
margin: 0;
}
#summer-life-2022 #section-contents #item-list ul li{
width: calc(100% / 6);
}
#summer-life-2022 #section-contents #item-list ul li a{
display: block;
background: #e3e9b4e8;
font-size: 11px;
text-align: center;
padding-top:15px;
padding-bottom: 15px;
border: solid 1px #FFFFFF;
box-sizing:border-box;
margin-bottom: 0px;
}
#summer-life-2022 #section-contents #item-list ul li a:hover{
opacity: 0.6;
}
#summer-life-2022 #section-contents #item-list .li-child-56{
background: #b4e2e9e8;
}
/*----------内容　項目-----------*/
#summer-life-2022 #section-contents #item{
margin: 0;
padding: 100px 50px 0;
}
#summer-life-2022 #section-contents #item .w-60{
width: 60%;
}
#summer-life-2022 #section-contents #item .item-top{
position: relative;
margin-bottom: 100px;
}
#summer-life-2022 #section-contents #item .item-top__text{
background: #e3e9b4e8;
width: 50%;
padding: 75px 10px 50px;
position: absolute;
top:130px;
right: 0;
}
#summer-life-2022 #section-contents #item .li-child-56{
background: #b4e2e9e8;
}
#summer-life-2022 #section-contents #item .item-top__text h3{
font-size: 18px;
margin-bottom: 20px;
}
#summer-life-2022 #section-contents #item .item-top__text p{
font-size: 12px;
margin: 0;
line-height: 25px;
}
#summer-life-2022 #section-contents #item .item-bottom{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 50px;
}
#summer-life-2022 #section-contents #item .item-bottom li{
width: 30%;
margin-bottom: 50px;
}
#summer-life-2022 #section-contents #item .item-bottom .pc-none{
display: none;
}
#summer-life-2022 #section-contents #item .item-bottom li h4{
text-align: center;
margin: 0 0 20px;
position: relative;
}
#summer-life-2022 #section-contents #item .item-bottom li h4:before{
position: absolute;
bottom: -6px;
left: calc(50% - 15px);
width: 30px;
height: 2px;
content: '';
border-radius: 3px;
background:#454545;
}
#summer-life-2022 #section-contents #item .item-bottom li p{
margin:10px 0;
font-size: 14px;
}
#summer-life-2022 #section-contents #item .item-bottom li a{
display: block;
text-align: center;
border: solid 1px #000000;
font-size: 12px;
letter-spacing: 3px;
border-radius: 3px;
padding: 5px;
}
#summer-life-2022 #section-contents #item .item-bottom li a:hover{
background: #e3e9b4e8;
}
#summer-life-2022 #section-contents #item .a-child-56 li a:hover{
background: #b4e2e9e8;
}
@media screen and (max-width: 768px){
#summer-life-2022 #section-contents #item-list ul li{
width: calc(100% / 3);
}
#summer-life-2022 #section-contents #item{
border: none;
}
#summer-life-2022 #section-contents #item .item-top{
position: relative;
}
#summer-life-2022 #section-contents #item .item-top::before{
content: "";
position: absolute;
top:-50px;
left:50%;
transform: translateX(-50%);
font-weight: bold;
}
#summer-life-2022 #section-contents #summer-life__item__igusarug .item-top::before{
content: "い草ラグカーペット";
}
#summer-life-2022 #section-contents #summer-life__item__okitatami .item-top::before{
content: "置き畳";
}
#summer-life-2022 #section-contents #summer-life__item__igusasingu .item-top::before{
content: "い草シーツ/い草の枕";
}
#summer-life-2022 #section-contents #summer-life__item__igusakomono .item-top::before{
content: "い草小物/雑貨";
}
#summer-life-2022 #section-contents #summer-life__item__bamboo .item-top::before{
content: "竹ラグ/竹シーツ";
}
#summer-life-2022 #section-contents #summer-life__item__rattan .item-top::before{
content: "藤";
}
#summer-life-2022 #section-contents #item .item-top__text h3{
display: none;
}
#summer-life-2022 #section-contents #item{
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
}
#summer-life-2022 #section-contents #item .w-60{
width: 100%;
}
#summer-life-2022 #section-contents #item .item-top{
margin-bottom: 50px;
}
#summer-life-2022 #section-contents #item .item-top__text{
background:none;
width: 100%;
padding: 10px;
position: static;
text-align: center;
}
#summer-life-2022 #section-contents #item .item-bottom li{
width: 48%;
}
#summer-life-2022 #section-contents #item .item-bottom .pc-none{
display: block:
}
}

@media screen and (max-width: 480px){
#summer-life-2022 #section-contents #item-list ul li{
width: calc(100% / 2);
}
}

</style>

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


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

<section id="summer-life-2022">
<div>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/2022-summerlife-bnr.jpg" alt="夏の暮らし特集の画像">
</div>
<section id="section-intro">
<h2>自然素材でつくる夏のくらし</h2>
<p>雨の多い梅雨の時期も、日差しが照りつける夏の日も…。<br>四季を賢く暮らす知恵が日本には、<br>昔から伝わっています。<br>昔から伝わる自然素材のインテリアで、<br>この夏の暮らし方を少し変えてみませんか。
</p>
</section>
<section id="section-contents">
<section id="item-list">
<ul>
<li><a href="#summer-life__item__igusarug">い草ラグカーペット</a></li>
<li><a href="#summer-life__item__okitatami">置き畳</a></li>
<li><a href="#summer-life__item__igusasingu">い草シーツ/い草枕</a></li>
<li><a href="#summer-life__item__igusakomono">い草小物/雑貨</a></li>
<li><a class="li-child-56" href="#summer-life__item__bamboo">竹ラグ/竹シーツ</a></li>
<li><a class="li-child-56" href="#summer-life__item__rattan">藤</a></li>
</ul>
</section>
<section id="item">
<section id="summer-life__item__igusarug">
<div class="item-top">
<div class="w-60">
<img src=" https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_a.jpg" alt="い草ラグカーペットの画像">
</div>
<div class="item-top__text">
<h3>い草ラグカーペット</h3>
<p>1枚サッと敷くだけで、い草の夏らしい香りが広がる…。<br>おもわず寝そべりたくなるような、<br>気持ちいい空間を手軽につくることかできます。</p>
</div>
</div>
<ul class="item-bottom">
<li>
<h4>国産い草ラグ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_a-01.jpg" alt="国産い草ラグ-1の商品画像">
<p>和室にも洋室にも合わせやすい国産い草ラグ</p>
<a href="#">click</a>
</li>
<li>
<h4>国産い草ラグ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_a-02.jpg" alt="国産い草ラグ-2の商品画像">
<p>幾何柄で合わせやすい雰囲気の国産い草ラグ</p>
<a href="#">click</a>
</li>
<li>
<h4>国産い草ラグ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_a-03.jpg" alt="国産い草ラグ-3の商品画像">
<p>モダンな雰囲気ながらもホッとくつろぐ国産のい草ラグ</p>
<a href="#">click</a>
</li>
<li>
<h4>制菌加工い草ラグ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_a-04.jpg" alt="制菌加工い草ラグの商品画像">
<p>い草そのものが持つ空気浄化機能にプラスで制菌加工を施しています</p>
<a href="#">click</a>
</li>
<li>
<h4>ギャベ柄い草ラグ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_a-05.jpg" alt="ギャベ柄い草ラグの商品画像">
<p>ナチュラルなギャベ柄がインテリアになじみやすいい草ラグ
</p>
<a href="#">click</a>
</li>
<li>
<h4>堀こたつ対応</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_a-06.jpg" alt="堀こたつ対応の商品画像">
<p>堀こたつスペースに涼の空間を。堀こたつ切り抜き加工済のラグ
</p>
<a href="#">click</a>
</li>
</ul>
</section>
<section id="summer-life__item__okitatami">
<div class="item-top">
<div class="w-60">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_b.jpg" alt="置き畳の画像">
</div>
<div class="item-top__text">
<h3>置き畳</h3>
<p>リビングの一角に手軽に和のスペースを。<br>お部屋を広く、くつろぐスペースにしたい方におすすめ。<br>軽量で持ち運びもラクラク。</p>
</div>
</div>
<ul class="item-bottom">
<li>
<h4>カラフル</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_b-01.jpg" alt="カラフルの商品画像">
<p>POPなデザインとクッション性抜群でキッズスペースにおすすめ</p>
<a href="#">click</a>
</li>
<li>
<h4>スタイリッシュ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_b-02.jpg" alt="スタイリッシュの商品画像">
<p>落ち着いた和の空間を演出するヘリ無し置き畳</p>
<a href="#">click</a>
</li>
<li>
<h4>シンプル</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_b-03.jpg" alt="シンプルの商品画像">
<p>裏面ジョイント付きでずれにくく、軽量で設置もラクラク</p>
<a href="#">click</a>
</li>
<li class="pc-none">
</li>
</ul>
</section>
<section id="summer-life__item__igusasingu">
<div class="item-top">
<div class="w-60">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_c.jpg" alt="い草寝具の画像">
</div>
<div class="item-top__text">
<h3>い草シーツ/い草の枕</h3>
<p>水分を吸収してくれるチカラはなんと綿の2.5倍。<br>汚れにくく、消臭力あるい草の機能で<br>汗ばむ夏も気持ちよくおやすみいただけます。</p>
</div>
</div>
<ul class="item-bottom">
<li>
<h4>い草枕</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_c-01.jpg" alt="い草枕の商品画像">
<p>お昼寝やちょっとした休憩時におすすめのい草枕</p>
<a href="#">click</a>
</li>
<li>
<h4>い草マット・枕</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_c-02.jpg" alt="い草マット・枕の商品画像">
<p>汗ばむ季節にピッタリのお昼寝セット。贈り物としても◎</p>
<a href="#">click</a>
</li>
<li>
<h4>い草シーツ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_c-03.jpg" alt="い草シーツの商品画像">
<p>お手入れは干すだけ簡単！やさしい涼感のい草シーツ</p>
<a href="#">click</a>
</li>
<li class="pc-none">
</li>
</ul>
</section>
<section id="summer-life__item__igusakomono">
<div class="item-top">
<div class="w-60">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_d.jpg" alt="い草小物/雑貨の画像">
</div>
<div class="item-top__text">
<h3>い草小物/雑貨</h3>
<p>夏のくつろぎタイムに寄りそう、<br>自然素材のリラックスアイテム。</p>
</div>
</div>
<ul class="item-bottom">
<li>
<h4>い草クッション</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_d-01.jpg" alt="い草クッション-1の商品画像">
<p>腰当や枕にも使用できる形状のい草クッション</p>
<a href="#">click</a>
</li>
<li>
<h4>い草クッション</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_d-02.jpg" alt="い草クッション-2の商品画像">
<p>スマホや読書時などゆったりと受け止めてくれるサポートクッション</p>
<a href="#">click</a>
</li>
<li>
<h4>い草座布団</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_d-03.jpg" alt="い草座布団の商品画像">
<p>フローリングの上でゆっくりくつろげるロング座布団</p>
<a href="#">click</a>
</li>
<li class="pc-none">
</li>
</ul>
</section>
<section id="summer-life__item__bamboo">
<div class="item-top">
<div class="w-60">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_e.jpg" alt="竹ラグ/竹シーツの画像">
</div>
<div class="item-top__text li-child-56">
<h3>竹ラグ/竹シーツ</h3>
<p>ナチュラルなインテリアにあわせやすい、竹素材。<br>ひんやりとした肌触りです。<br>キズにも強く、扱いやすい素材といえます。</p>
</div>
</div>
<ul class="item-bottom a-child-56">
<li>
<h4>竹カーペット</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_e-01.jpg" alt="竹カーペットの商品画像">
<p>耐久性に優れた竹カーペットでペットのいるご家庭におすすめ</p>
<a href="#">click</a>
</li>
<li>
<h4>竹ラグ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_e-02.jpg" alt="竹ラグの商品画像">
<p>いつまでも座っていたい丈夫でひんやり気持ちいい竹ラグ</p>
<a href="#">click</a>
</li>
<li>
<h4>竹マット</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_e-03.jpg" alt="竹マットの商品画像">
<p>ひんやり感が味わえる竹を使用したマット</p>
<a href="#">click</a>
</li>
<li class="pc-none">
</li>
</ul>
</section>
<section id="summer-life__item__rattan">
<div class="item-top">
<div class="w-60">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_f.jpg" alt="藤の画像">
</div>
<div class="item-top__text li-child-56">
<h3>藤</h3>
<p>敷くだけで、その佇まいが美しい籐素材の敷物。<br>ひんやりと天然の涼感を味わえ、耐久性もすぐれた敷物です。</p>
</div>
</div>
<ul class="item-bottom a-child-56">
<li>
<h4>籐ラグ</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_f-01.jpg" alt="籐ラグの商品画像">
<p>熟練の職人の手仕事が活きる手編み網代の高級籐むしろ</p>
<a href="#">click</a>
</li>
<li>
<h4>籐カーペット</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_f-02.jpg" alt="スタイリッシュの商品画像">
<p>整然と織り込まれた籐がすっきりとした印象。涼感たっぷりの籐むしろ</p>
<a href="#">click</a>
</li>
<li>
<h4>籐マット</h4>
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/summer-life/photo_f-03.jpg" alt="シンプルの商品画像">
<p>玄関をリゾートのような空間に。足ざわり良い籐素材の玄関マット</p>
<a href="#">click</a>
</li>
<li class="pc-none">
</li>
</ul>
</section>
</section>
</section>
</section>

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