/* common */
body {
  background: #f4f4f4;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
}
h2 {
  color: #222;
  font-family: 'Roboto', sans-serif;
}
p {
  line-height: 1.6;
  color: #333;
}
#header {
  padding: 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 40px solid #ee6d6d;
  border-bottom: 3px solid #ee6d6d;
}
#footer {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #032e61;
  color: #fff;
}
#footer ul {
  display: flex;
  list-style: none;
  justify-content: center;
  font-size: 13px;
  padding-left: 0;
  font-family: 'Roboto', sans-serif;
}
#footer ul li a {
  color: #fff;
  text-decoration: none;
  margin: 0 16px;
}
.banner {
  width: 100%;
  height: 340px;
  background: url(https://www.salesforce.com/content/dam/web/ja_jp/www/images/company/jumbotron-companyprofile-desktop-2000x500.jpg);
  background-size: cover;
  background-position: center center;
}
.container {
  margin: 30px auto;
  max-width: 960px;
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 20px;
  padding: 0 20px;
}
[class^="grid-element"] {
  background: #fff;
  padding: 12px 24px;
}
[class^="grid-element"] img {
  max-width: 100%;
}
/* common */

/* grid */
.grid-element--1 {
  grid-row-start: 1; 
  grid-row-end: 4; 
}

.grid-element--4 {
  grid-column-start: 2; 
  grid-column-end: 4; 
}
.grid-element--7,
.grid-element--8,
.grid-element--9,
.grid-element--10,
.grid-element-target--1,
.grid-element-target--2  {
  grid-column-start: 1; 
  grid-column-end: 4; 
}
.grid-element-target--1,
.grid-element-target--2 {
  display: none;
  background: transparent;
}
/* /grid */

/* background-color */
.grid-element--1 {
  background: #ffbebf;
}.grid-element--2 {
  background: #f6cbcb;
}
.grid-element--3 {
  background: #f9a4a4;
}
.grid-element--4 {
  background: #fb7a7a;
}
.grid-element--5 {
  background: #ff4646;
}
.grid-element--6 {
  background: #f6cbcb;
}
.grid-element--7 {
  background: #f9a4a4;
}
.grid-element--8 {
  background: #fb7a7a;
}

@media screen and (max-width: 960px) {
  .banner {
    width: 100%;
    height: 200px;
    background: url(https://www.salesforce.com/content/dam/web/ja_jp/www/images/company/jumbotron-companyprofile-desktop-2000x500.jpg);
    background-size: cover;
    background-position: 60% center;
  }
  .container {
    grid-template-columns: 1fr;
  }
  [class^="grid-element"] {
    grid-column-start: 1 !important;
    grid-column-end: 4 !important;
  }
}

@media screen and (max-width: 667px) {
  #header {
    padding: 16px 0;
    border-top: 20px solid #ee6d6d;
  }
  #header > img {
    height: 50px;
    width: auto;
  }
  #footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #032e61;
    color: #fff;
    height: 60px;
  }
  .banner {
    width: 100%;
    height: 140px;
    background-position: 70% center;
  }
  .container {
    margin: 16px auto;
    padding: 0 12px;
  }
  h2 {
   font-size: 18px; 
  }
  p {
    font-size: 14px;
  }
}