@charset "UTF-8";

body{
  margin: 0;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
}

form{
    margin-left: 5px;
}

.selectlink{
  background-image: linear-gradient( 0deg, #ccc, #ddd 55%, white );
  border-radius: 3px;
  width: 70px;
}
.top-container{
  width: 1500px;
  height: 830px;
}
.top-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
}
footer {
  position: fixed;
  bottom: 0;
  right: 0; 
}
.rireki {
  width: 170px; 
  height: 80px;
  background-color: white; 
  border: 1px solid #000000;
  border-radius: 3px;
  overflow-y: scroll;
  margin: 5px;
}

.rireki p{
  font-size: 12px;
}

.top-container{
  width: 1500px;
  height: 830px;
}
.top-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;/*トリミング起点*/
}
.info{
  display: flex;
}
section{
  margin: 10px 100px 30px 100px;
  min-width: 190px;
}
table{
  border-collapse: collapse;
}
th,td{
  text-align: start;
  padding-right: 12px;
  font-weight: normal;
}

p,summary,h1,th,td{
  font-size: 13px;
  margin: 0;
}
a{
  color: black;
  text-decoration-line: none;
}
a:hover{
  color:#d6d6d6
}
h1{
  font-weight: normal;
  padding-bottom: 30px;
}
::selection {
  color: #fff;
  background-color: rgb(0, 0, 0);
}

.offinfo {
  padding: 1px 5px;
  background-color: #dedede;
  border-radius: 5px;
	font-size: 0.6em;		
  text-align: center;
}
/*library用*/
.library{

}

.flex{
    display: flex;
    align-items: flex-start;    
}
.flex div{
    flex-basis: auto;
    padding: 15px;   
}
blockquote{
  font-size: 13px;
  margin: 25px 0;
}
details > summary {
  margin-bottom: 10px;
}

/*archive用*/
.archive{
  min-width: 410px;
}
.material{
  color: #c9c9c9;
}
ul{
  list-style-type:none;
  padding-inline-start: 0;
  margin: 0;
}
.offline-date{
  display: flex;
  justify-content: space-between;
}
.flexbook{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  row-gap:50px;
  margin-top: 60px;
}
.cover2{
  width: 20%;
}
.cover2 img{
  width: 100px;
  height: 150px;
  object-fit: cover;
  filter: grayscale(100%);
}

/*txt用*/
.txt{
margin: 60px auto;
width: 670px;
}
.txt p{
  font-size: 15px;
}
.txt h2{
  font-size: 15px;
  font-weight: bold;
}
/*material用*/
.table,.detailtable{
  font-size: 13px;
}
.table .th{
  font-weight: bold;
}
.table .tr{
  display: flex;
}
.table .td{
  width: 150px;
}
.detailtable {
    width: 750px;
}
.detailtable .th{
    font-weight: bold;
}


/* -------------------- */
/*レスポンシブ*/
/* -------------------- */ 
 /* 960px以下に適用（タブレット） */
@media screen and (max-width: 1024px) and (min-width: 600px) { 
	.top-container{
		width: auto;
    height: 80vh;
    object-fit: cover;
  }
  .top-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20% 50%;/*トリミング起点調整*/
  }
  .info{
  display: block;
  }
  section{
      margin: 10px 10px 90px;
  }
  footer {}/*フッター被ってしまう*/

  .archive{
  min-width: auto;
}
.txt{
  margin: 35px auto;
  width: 87%;
}
}

/* 599px以下に適用（スマホ） */
@media screen and (max-width: 599px) { 
	.top-container{
		width: auto;
    height: 80vh;
    object-fit: cover;
  }
  .top-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20% 50%;/*トリミング起点調整*/
  }
  .info{
  display: block;
  }
  section{
      margin: 10px 10px 90px;
  }
  .archive{
  min-width: auto;
}
.txt{
  margin: 35px auto;
  width: 87%;
}
}