@charset "utf-8";

.columnList{
  width: 1130px;
  margin: 80px auto 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.columnList::after{
  content:"";
  display: block;
  width:31%;
}
.entry{
  background: #FFF;
  box-shadow: 0px 2px 6px 2px rgba(91, 91, 91, 0.35);
  width: 31%;
  max-width: 340px;
  margin-bottom: 60px;
}
.entry h2{
  padding: 20px;
}
.entry .entryimg{
  position: relative;
  overflow: hidden;
  aspect-ratio:4/3;
}
.entry .entryimg img{
  background: #ececec;
  height: 100%;
  width: auto;
  object-fit: cover;
}
.entry .entryimg img.noimg{
  height: auto;
  width: auto;
  object-fit: none;
}
.entry .entryimg:hover::before{
  opacity: 1;
}
.entry .entryimg::before{
  background: #cf0027;
  content: "";
  display: block;
  position: absolute;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  top: -40px;
  left: -40px;
  z-index: 1;
}

/* column detail */
#columnEntry{
  background: #F2F6F8;
  padding-bottom: 120px;
}
#columnEntry .inner{
  overflow: hidden;
  position: relative;
}
#columnEntry .inner::before{
  background: #cf0027;
  content: "";
  display: block;
  position: absolute;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  top: -40px;
  left: -40px;
  z-index: 1;
}
.columnimg{
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}
main.columnmain{
  position: relative;
  overflow: hidden;
}
main.columnmain::before{
  background-size: cover;
  background-color: #FFF;
  content: "";
  display: block;
  filter: blur(3px);
  opacity: 0.5;
  width: 100%;
  height: 100%;
  transform: scale(1.01);
  position: absolute;
  top: 0;
  z-index: -1;
}
#columnEntry .contentswap{
  padding: 80px 100px;
}


@media screen and (max-width: 767px){
  #columnEntry {
    padding-bottom: 60px;
  }
  #columnEntry .inner {
    width: 100%;
  }
  .columnList {
    width: 100%;
    margin: 40px auto 20px;
    display: block;
  }
  .entry {
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px;
  }
  .entry .entryimg::before {
    width: 60px;
    height: 60px;
    top: -30px;
    left: -30px;
  }
  .entry h2 {
    font-size: 16px;
    padding: 15px;
  }
  #columnEntry .contentswap {
    padding: 40px 20px;
  }
  #columnEntry .inner::before {
    width: 60px;
    height: 60px;
    top: -30px;
    left: -30px;
  }
}