html{
  color: black;
  background: white;
}

body{
  width: 1440px;
}

body,div,ul,li,dl,dt,dd{
  margin: 0;
  padding: 0;
}  

main{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
}

header{
  display: flex;
  justify-content: center;
  height: 100px;
  margin-bottom: 30px;
  background:rgb(63,103,102);
  color:white;
}

footer{
  font-size: 9pt;
}

li{
  list-style: none;
  white-space: nowrap;
}  

dt{
  font-weight: bold;
}

img{
  object-fit: cover;
}

p{
  font-weight: bold;
  font-size: 15pt;
}

 .header-u ul{
  padding: 5% ;
  margin: 0 0 20px 100px;
  border: 1px solid;
 }

 .header-1{
  margin:0 300px 0 0 ;
  padding-top: 30px;
}

.header-1 p{
  font-size: 12pt;
  line-height: 5%;
 }

 .header-3 ul{
  display: flex;
  margin-top: 20px;
  margin-left: 300px;
 }

 .header-3 ul li{
  padding: 20px;
 }

 #slide{
  position: relative;
  overflow: hidden;
  height: 500px;
  margin-left: 200px;
 }

 #slide ul{
  position: absolute;
  width: 3000px;
 }

 #slide li{
  float: left;
  width: 1000px;
 }

button{
  opacity: .6;
  transition: opacity .2s;
  border: none;
  background: none;
}

button:focus{
  outline: none;
}

button:hover{
  opacity: 1;
}

 #prevBtn{
  position: absolute;
  top: 225px;
  left: 20px;
}

 #nextBtn{
  position: absolute;
  top: 225px;
  right: 250px;
}

 .main-l{
  width: 25%;
  margin-left: 0;
 }


 .main-r{
  width: 75%;
  margin: 0 0 60px 30px;
  padding-left: 20px;
 }
 
 .main-c-ul{
   display: flex;
  }
  
  .main-c-ul2{
    flex-wrap: wrap;
    display: flex;
    margin-bottom: 100px;
  }
  
    .main-c li{
      width: 23%;
      padding-left: 10px;
    }
  
    .main-c img,.li_kotei{
      width: 220px;
      height: 220px;
    }
  
.li_bun,.li_kane,.li_kotei{
  width: 225px;
    font-style: normal;
    margin: 0 5px 0 0;
}

  .li_kane{
    color: brown;
    margin-left: 80%;
  }

  .li_kotei,.li_kotei2{
    position: relative;
  }

  .li_kotei{
    margin-bottom: 20px;
  }

  .li_kotei p,.li_kotei2 p{
    position: absolute;
    left: 10px;
    height: 20%;
    background: goldenrod;
    filter: opacity(40%);
    font-size: 12pt;
    font-weight: bold;
  }

  .li_kotei p{
    bottom: -7%;
    width: 98%;
    height: 20%;
  }

  .li_kotei2 p{
    bottom: 4%;
    width: 85%;
  }

  .li_kotei2:hover{
    filter: opacity(75%);
  }

  .li_kotei_f{
    position: absolute;
    display:none;
    background: blue;
    width: 85%;
    height: 91%;
    top: 0;
    filter: opacity(10%);
  }  
  

  .li_kotei2 p{
    position: absolute;
  }
  
  .main-c2-ul,.main-c3-ul{
    display: flex;
  }

  .main-c2-ul li,.main-c3-ul li,.main-c4-ul li{
    padding-left: 10px;
    margin-bottom: 20px;
  }
  
    .main-c2-ul img{
      width: 160px;
      height: 160px;
    }

  .main-c3-ul li{
    margin-right: 40px;
  }

  .main-c3-ul img{
    width: 290px;
    height: 290px;
  }

  footer p{
    font-size:9pt ;
  }
  .footer-1{
    display: flex;
    width: 1200px;
    height: 240px;
    margin: 40px auto 50px;
  }

    .footer-1 dl{
      width: 100%;
    }

    .footer-1 dt,dd{
      margin-bottom: 10px;
    }
  
    .footer-2{
      padding: 5px 0 5px 120px;
    background-color: bisque;
    }