@charset "utf-8";
main {
 section#top {
  background-image: url(../image/co-top-img05.jpg);
 }
}
.main-grid {
 display: grid;
 grid-template-columns: 60% 1fr;
 gap: 10px;
 font-size: .9em;
 > div {
  border: 1px solid #ccc;
  background: linear-gradient(to bottom, #fff, #eee);
  position: relative;
  &.lefts a {
   display: block;
   /*height: 100%;*/
   padding: 1em;
  }
  &.rights {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 1em;
  }
  a {
   text-decoration: none;
   color: #555;
   position: relative;
   span.btn-icon {
    width: 18px;
    aspect-ratio: 1;
    background: #ccc;
    border-radius: 100%;
    position: absolute;
    right: .5em;
    bottom: .5em;
    &::after {
     content: "";
     width: 6px;
     aspect-ratio: 1;
     border-top: solid 2px #fff;
     border-right: solid 2px #fff;
     transform: rotate(45deg);
     position: absolute;
     top: 50%;
     left: 49%;
     translate: -50% -50%;
    }
   }
  }
 }
 .right-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
 }
 .right-grid > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  > a {
   display: inherit;
   grid-template-rows: inherit;
   grid-row: inherit;
   padding-bottom: 1em;
   background: #fff;
   border: 1px solid #ccc;
   p {
    padding: .5em;
   }
  }
 }
}
.top-title {
 font-size: 1.1em;
 text-align: center;
 font-weight: bold;
}
.top-wide a {
 display: grid;
 background: #fff;
 border: 1px solid #ccc;
 text-align: center;
 text-decoration: underline;
 padding: .8em;
}
.card-label {
 text-align: center;
 background: #ccc;
 color: #fff;
 padding: .3em;
 font-size: .9em;
}
@media (max-width: 768px) {
 .main-grid {
  grid-template-columns: 1fr;
 }
}