1月13日の作業コード 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"
<meta name="viewport" content="width=device-width">
<title>Net Smart</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="inner">
<h1>Net Smart</h1>
<p class="tagline">よりスマートなインターネットライフを</p>
</div>
<nav class="g-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">ACCESS</a></li>
</ul>
</nav>
</header>

<div class="main">
<div class="keyVisual">
<img src="img/01.jpg" alt="">
</div>

<div class="main-txt">
<h2>必要なものは、<br>
ビジネスの価値を届ける<br class="sp">デザインの力。</h2>
<p class="lead">Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、<br>よりスマートなインターネットライフを送るお手伝いを致します。</p>
</div>

<div class="wrapper">
<div class="box">
<h3>CONCEPT</h3>
<p class="photo"><img src="img/01.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->
<div class="box">
<h3>SERVICE</h3>
<p class="photo"><img src="img/02.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->
<div class="box">
<h3>ACCESS</h3>
<p class="photo"><img src="img/03.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.box -->
</div><!-- /.wrapper -->

<div class="access">
<div class="info">
<h3>会社情報</h3>
<dl>
<dt>会社名</dt>
<dd>株式会社　・・・・・</dd>
<dt>住所</dt>
<dd>東京都・・・・・・・・</dd>
<dt>電話番号</dt>
<dd>03-0000-0000</dd>
<dt>従業員</dt>
<dd>1000名</dd>
</dl>
</div><!-- /.info -->

<div class="map">
<h3>Map</h3>
<div class="map-inner">
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.929646365801!2d139.71221001460668!3d35.7279487350171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1626160320637!5m2!1sja!2sjp"  style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div><!-- /.map-inner -->
</div><!-- /.map -->
</div><!-- /.access -->


</div><!-- /.main -->
<footer>
<p><small>2010-2021 &copy; Net Smart all rights reserved.</small></p>
</footer>
</body>
</html>

/* ### レイアウト ### */

header {
margin-bottom: 30px;
}
.inner {
width: 960px;
margin:0 auto;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
font-size: 48px;
padding: 16px 0;
}
.tagline{
margin-bottom: 20px;
}
/* ナビゲーションメニュー */
.g-nav {
background:#185A68;
}
.g-nav>ul {
width: 960px;
margin: 0 auto;
display: flex;
}
.g-nav li {
width: 25%;
}
.g-nav a {
display: block;
border-right: solid 1px #fff;
color: #ffffff;
text-align: center;
line-height: 50px;
}
.g-nav li:first-of-type>a{
border-left: solid 1px #fff;
}
.g-nav a:hover {
background: #089198;
}
.main{

margin:0 auto 100px;
}
.keyVisual {
max-width: 1200px;
margin-bottom: 60px;
}
.main-txt{
text-align: center;
margin-bottom: 80px;
}
.main-txt>h2{
font-size: 30px;
margin-bottom: 30px;
}
.lead{
font-size: 18px;
}
.wrapper{
width: 960px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
padding: 20px;
}
.box{
width: calc((100% - 40px) / 3);
padding: 10px;
}
h3 {
font-size: 22px;
color:#185A68;
border-left: solid 16px #089198;
margin:20px 0;
padding: 0 0 0 10px;
}
.box>p {
margin-bottom: 20px;
}
.photo{
height: 200px;
overflow: hidden;
}
.photo>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.box:hover{
box-shadow: 0 0 10px #CCC;/* x方向、y方向、ぼかしの距離、ぼかしの色 */
transition: 0.2s;
}
.box:hover img{
transform: scale(1.2);
transition: 0.2s;
}

.access{
width: 960px;
margin: 0 auto 100px;
display: flex;
justify-content: space-between;
}
.info{
width: 46%;
}
.info>dl{
display: flex;
flex-wrap: wrap;
}
.info dt{
width: 30%;
font-weight: bold;
}
.info dd{
width: 70%;
}
.info dt,.info dd{
border-bottom: 1px solid #185A68;
margin-bottom: 20px;
padding: 10px;
}
.map{
width: 46%;
}
.map-inner{
width: 100%;
height: 400px;
}
.g-map{
width: 100%;
height: 100%;
}

footer {
color: #ffffff;
background-color: #185A68;
padding: 10px 10px 20px;
}
footer>p {
font-size: 18px;
text-align: center;
padding: 20px 0;
}
.sp{
display: none;/* brを無効にする */
}