/*コンテナ*/
.center {
  display: grid;
  justify-content: center;

}
.container {
  display: grid;
  grid-template-rows: repeat(2,auto); /*行のトラックの高さ*/
  grid-template-columns: clamp(55px, 15vw, 180px) clamp(12px, 8vw, 160px) clamp(220px, 54vw, 540px) clamp(50px, 12vw, 140px); /*列のトラックの幅*/
  row-gap: clamp(2px, .7vw ,10px); /*行の隙間の高さ*/
  column-gap: clamp(2px, 1vw ,10px); /*列の隙間の幅*/
  grid-template-areas: 
    "logo logo space contact"
    "side main main main";
}

/*アイテム*/
.logo {
  grid-area: logo;
  align-self: start;
}

.space {
  grid-area: space;
}

.contact {
  grid-area: contact;
  align-self: end;
}

.hmenu {
  grid-area: hmenu;
}

.side {
  grid-area: side;
}

.main {
  grid-area: main;
}

.side1 {
  text-align: left;
}

.side1 a{
  text-decoration: none;
  color: black;
}

.content1 {
  text-align: left;
}

.title1 {
  background-color: #27995d;
  color: white;
  display:flex;
  align-items: center;
  height: 3.3vw;
  max-height: 40px;
  font-size: clamp(0.45rem, 1.3vw ,0.9rem);
  border: 1px solid black;
  padding-left: 0.4vw;
  box-sizing: border-box;
}

menu {
  display: flex;
  justify-content: center;
  margin: 0px 0px 0px -40px;
}

menu a{
  text-decoration: none;
  color: white;
}

.menu1 {
  display:flex;
  align-items: center;
  justify-content: center;
  width: 115px;
  height: 2.8vw;
  max-height: 30px;
  background-color: #27995d;
  font-size: clamp(0.3rem, 1vw ,0.8rem);
  margin-right: 2px;

}

.menu2 {
  display:flex;
  align-items: center;
  height: 3.3vw;
  max-height: 40px;
  font-size: clamp(0.3rem, 1vw ,0.8rem);
  font-weight:bold;
  border: 1px solid black;
  border-top: none;
  padding-left:0.2vw;
  box-sizing: border-box;
}

.button1 {
  text-decoration: none;
  background-color: #27995d;
  color: white;
  text-align: center;
  font-size: clamp(0.2rem, 1vw ,0.7rem);
  border-radius:30px;
  padding: 0.7em 2.8em 0.7em 2.8em;
  white-space: nowrap;
}

.small_black {
  height: 5px;
  line-height: 5px;
  font-size: x-small;
  padding: 0px 0px 2px 0px;
}

.medium-blue {
  color: deepskyblue;
  height: 0px;
  line-height: 0px;
  font-size: medium;
  font-weight:bold;
}

.color-blue {
  color: #0070c0;
}

.color-breen {
  color: #27995d;
}

.border0 {
  color: gray;
  font-size: clamp(0.4rem, 1vw ,0.8rem);
}

.border1 {
  color: gray;
  font-size: clamp(0.3rem, 1vw ,0.8rem);
  border: 1px solid lightgrey;
  padding: 5px 0px 5px 10px;
  margin: 5px 0px 5px 0px;
}

.border2 {
  height: 2vw;
  max-height: 20px;
  font-size: clamp(0.45rem, 1.3vw ,0.9rem);
  font-weight:bold;
  background-color: whitesmoke;
  border-left: #27995d solid 4px;
  padding: 0.7em 0px 0.7em 0.7em;
  margin: 0px 0px 0.7em 0px;
}

.table1 {
  border-collapse: collapse;
  border: 1px solid lightgrey;
  max-width: 860px
}

.table1 th {
  background-color: whitesmoke;
  border: 1px solid lightgrey;
  color: gray;
  font-size: clamp(0.4rem, 1vw ,0.8rem);
  padding: 5px;
  text-align:left;
}

.table1 td {
  border: 1px solid lightgrey;
  color: gray;
  font-size: clamp(0.4rem, 1vw ,0.8rem);
  padding: 5px;
}

.table2 {
  border-collapse: collapse;
  border: 1px solid black;
}

.table2 th {
  background-color: whitesmoke;
  border: 1px solid black
  color: black;
  font-size: clamp(0.4rem, 1vw ,0.8rem);
  padding: 5px;
  text-align:left;
}

.table2 td {
  border: 1px solid black;
  color: black;
  font-size: clamp(0.4rem, 1vw ,0.8rem);
  padding: 5px;
}