@charset "UTF-8";
.Top {
  width: 100%;
  background-color: white;
}
.Top__header {
  height: 300px;
  background: linear-gradient(0deg, rgba(191, 230, 237, 0.2), rgba(58, 108, 221, 0.1));
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  padding: calc(var(--spacing-XL, 2rem) + 72px) 0 var(--spacing-XL, 2rem) 0;
}
.Top__header__title {
  font-size: var(--size-XXL, 2rem);
  font-weight: bold;
}
.Top__main {
  display: flex;
  justify-self: center;
  width: 100%;
  padding: 3% var(--spacing-X3L) var(--spacing-XL) var(--spacing-X3L);
  gap: 2rem;
}
.Top__main__container {
  flex: 9;
}
.Top__main__container__columnlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: var(--spacing-M);
}
.Top__main__container__pager {
  display: flex;
  margin: 2rem 0;
  justify-content: center;
  gap: 0.75rem;
}
.Top__main__container__pager a {
  color: #28a1a4;
}
.Top__main__sidebar {
  width: 280px;
  padding: 0 0 50px;
}
.Top__main__category {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
  line-height: 1rem;
}
.Top__main__category__name {
  background-color: #8c8c8c;
  color: #fff;
  padding: 2px 6px;
  white-space: nowrap;
  font-size: 12px;
}
.Top__column__imagewrapper {
  overflow: hidden;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background: #ebebeb;
  position: relative;
}
.Top__column__imagewrapper .post-info {
  background-size: cover;
  position: absolute;
  bottom: 0;
  padding: 0;
  border: none;
  width: 100%;
}
.Top__column__imagewrapper .post-info .inner {
  margin: 0 20px;
  padding: 3px 20px;
  border-radius: 10px 10px 0 0;
  background: #28a1a4;
  text-align: center;
}
.Top__column__imagewrapper .post-info .inner .post-date {
  font-size: 13px;
  color: #ffffff;
  font-family: "Nunito";
}
.Top__column__imagewrapper__image {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-S, 4px);
  overflow: clip;
  object-fit: cover;
  transition: 0.4s all;
}
.Top__column__imagewrapper__image:hover {
  transform: scale(1.05);
}
.Top__column__imagewrapper .noimage {
  background-color: var(--color-main-pale);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-L);
}
.Top__column__imagewrapper .noimage__title {
  font-size: var(--size-L);
  font-weight: bold;
  padding: 0 30px 25px;
  color: #c1c1c1;
  font-size: 14px;
  line-height: 21px;
}
.Top__column__info {
  padding: 20px;
}
.Top__column__info__title {
  color: #505050;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
}
.Top__column__info__update {
  font-size: var(--size-xS, 0.75rem);
  font-weight: bold;
  color: var(--color-on-background-secondary, #838989);
}
.Top__column:hover .Top__column__info__title {
  color: #28a1a4;
}
.Top__pager__button {
  border-radius: var(--radius-S, 4px);
  padding: 0 0.5rem;
  border: 2px solid #28a1a4;
}
.Top__pager__button.current, .Top__pager__button:hover {
  background: #28a1a4;
  color: var(--color-main-text, #fff);
}
.Top__search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: var(--spacing-XS, 0.5rem);
  border: 1px solid var(--color-border-dark, #707070);
  border-radius: var(--radius-S, 4px);
}
.Top__search input, .Top__search button {
  border: none;
  background-color: var(--color-background-base, #fff);
}
.Top__search input:focus-visible, .Top__search button:focus-visible {
  outline: none;
}
.Top__recommend {
  width: 100%;
  margin-bottom: 1rem;
}
.Top__recommend__title {
  padding: 0.5rem;
  background-color: #28a1a4;
  color: #fff;
}
.Top__recommend__column {
  display: flex;
  padding: var(--spacing-L, 1rem) 0 var(--spacing-XS, 0.5rem);
  border-bottom: 1px solid var(--color-border-light, #E4E7ED);
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.Top__recommend__column__title {
  flex: 8;
  font-size: var(--size-S, 0.875rem);
  line-height: 20px;
  color: #4f4f4f;
}
.Top__recommend__column__imagewrapper {
  flex: 4;
  overflow: hidden;
  background: #ebebeb;
}
.Top__recommend__column__imagewrapper__image {
  width: 100%;
  height: 60px;
  border-radius: var(--radius-S, 4px);
  overflow: clip;
  object-fit: cover;
  transition: 0.4s all;
}
.Top__recommend__column__imagewrapper__image:hover {
  transform: scale(1.05);
}
.Top__recommend__column__imagewrapper .noimage {
  background-color: var(--color-main-pale);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-L);
}
.Top__recommend__column__imagewrapper .noimage__title {
  font-size: var(--size-XS);
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 11px;
  padding: 0 10px;
  color: #c1c1c1;
}
.Top__aichat {
  background-color: #eff4ff;
  padding: var(--spacing-S, 1.5rem);
  border-radius: var(--radius-M, 6px);
}
.Top__aichat__img {
  text-align: center;
}
.Top__aichat__img img {
  width: 75%;
  object-fit: cover;
  justify-self: center;
}
.Top__aichat__title {
  font-size: var(--size-XS, 0.75rem);
  text-align: center;
  padding: var(--spacing-XXS, 0.25rem);
  background: #777;
  color: #fff;
  margin-bottom: var(--spacing-XS, 0.5rem);
}
.Top__aichat__description {
  font-size: var(--size-S, 0.875rem);
  color: #393939;
  line-height: 20px;
  margin: 10px 0;
}
.Top__aichat__search input {
  margin-bottom: var(--spacing-S, 1.5rem);
  padding: var(--spacing-XS, 0.5rem);
  border: 1px solid var(--color-border-dark, #707070);
  border-radius: var(--radius-S, 4px);
  width: 100%;
  background-color: var(--color-background-base, #fff);
}
.Top__aichat__search input:focus-visible {
  outline: none;
}
.Top__aichat__search button {
  width: 100%;
  background-color: #595959;
  border-radius: var(--radius-M);
  border: none;
  padding: var(--spacing-XS, 0.5rem);
  color: #fff;
}

/*スマホ*/
@media screen and (max-width: 768px) {
  .Top__main {
    flex-flow: column;
    align-items: center;
    padding: var(--spacing-L, 1.5rem);
  }
  .Top__main__container__columnlist {
    justify-content: center;
  }
  .Top__main__sidebar {
    width: 100%;
  }
}
/*スマホ横*/
@media (orientation: landscape) and (max-width: 1024px) {
  .Top__main__sidebar {
    width: 75%;
  }
}
/*レスポンシブ*/
@media screen and (min-width: 768px) and (max-width: 1048px) {
  .Top__main__sidebar {
    max-width: 240px;
    width: 100%;
  }
}

/*# sourceMappingURL=main.css.map */