#main {
  margin-top: 50px;
}

hr{
  margin-top: 3px;
  margin-bottom: 3px;
}
td {
  text-align: center;
  vertical-align: middle;
}
.item-body{
  padding-left: 3px;
}
.item-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}


.item-descriptio-table{
  width: 100%;
}
/* .item-descriptio-table tr td:nth-child(1) {
  width:50px;
} */

.item-created_at{
  margin-top: 10px;
  font-size: small;
  text-align: right;
}

.items_list{
  width: 100%;
}

.items_list li {
  float: left;
  width: 25%;
  padding-left: 10px;
  padding-right: 10px;
}
.items_list li a{
  text-decoration: none;
  color: black;
}

.item_image {
  position: relative;
}
.item_image p{
  padding: 5px;
  position: absolute;
  color: white;
  font-weight: bold;
  top: 0;
  right: 0;
  background:rgba(105, 105, 105, 0.5);
}
.item_image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

article{
  width: 75%;
  float: left;
}

aside{
  width: 25%;
  float: right;
  
  position: -webkit-sticky;
  position: sticky;
  top: 100;

  padding: 10px;
  border: thin solid lightgrey;
  border-radius: 10px;
  box-shadow : 0px 3px 7px #d4d4d4 ;
  margin-bottom: 50px;
}


.main-text-box{
  display: flex;
  justify-content: center;
  align-items: center; 
}

div#mainimage {
  width: 100%;
  height: 500px;
  background: url("../img/main.jpg") no-repeat center center;
  background-size:cover;
}

#mainimage_text_main {
  margin-top: 200px;
  font-size: 50px;
  color: white;
  text-shadow: 0 1px 2px #888;
}

.sketch-out{
  color: gray;
  font-weight: bold;
  text-shadow: 0 4px 2px #343a40;
}

.pb-4, .py-4 {
  padding: 0!important;
}
.new-publication{
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.main-btn{
  text-align: center;
}
main{
margin-top: 70px;
}

#main{
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}

.ul-button li {
  margin-bottom: 10px;
}

.search-row{
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

#mobile-btn{
  margin-top: 10px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* スクリーンが460px以下のCSSを適用 */
@media screen and (max-width: 461px) {
  #mainimage_text_main {
    font-size: 35px;
  }

  article{
    width: 100%;
    clear:both;
  }
  
  aside{
    display:none;
    clear:both;
  }

  .items_list li {
    clear:both;
    width: 100%;
    margin-bottom: 50px;
  }
  .items_list li:last-child  {
    margin-bottom: 0;
  }

  .ul-button{
    display:none;
  }

  div#mainimage {
    height: 300px;
  }
  
  #mainimage_text_main {
    margin-top: 200px;
    font-size: 27px;
  }
}
@media screen and (min-width: 460px) {
  #mobile-btn, .close-box{
    display:none;
  }
}



#bg {
  position:fixed; /* 階層を上にする */
  width:100%; /* 画面めいっぱい */
  height:100%; /* 画面めいっぱい */
  background:rgba(0,0,0,0.4); /* 背景色 */
}

.modal-search {
  display: block;
  position:fixed; /* 階層を上にする */
  width:95%; /* モーダルの幅 */
  height:90%; /* モーダルの高さ */
  top:50%; /* bodyの上から50%分ずらす */
  left:50%; /* bodyの左から50%分ずらす */
  transform:translate(-50%,-50%);/* 指定した位置から真ん中にずらす */
  background:#fff; /* モーダルの色 */
  overflow-y:scroll; /* 高さを指定しているので中身が超えた分はスクロールできるように */
  z-index: 999;
}

.close-box{
  height: 45px;
  width: 100%;
  text-align: right;
}