@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

body.archive div#contents {
  display: flex;
  max-width: 1280px;
  margin: auto;
  gap: 4%;
  margin-top: 50px;
}

.contents-body {
  width: 64%;
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  list-style: none;
}

body.archive div#sidebar {
  width: 32%;
}

.contents-body>li {
  width: calc((100% - 5%) / 2);
  margin-bottom: 5%;
}

footer.article-footer.entry-footer {
  background: unset;
}

.news {
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
}


div#contents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: unset;
  gap: 0 3%;
  overflow: unset;
}

div#contents>article {
  grid-column: span 2 / span 2;
}

div#contents>.under-entry-content {
  grid-column: span 2 / span 2;
  grid-column-start: 1;
  grid-row-start: 2;
}

div#contents>div#sidebar {
  grid-row: span 2 / span 2;
  grid-column-start: 3;
  grid-row-start: 1;
  height: fit-content;
}

footer.article-footer.entry-footer .sns-share-message, footer.article-footer.entry-footer .sns-follow-message, .author-info, .author-info a {
  color: #62c1b4 !important;
}

.entry-categories-tags .tax-icon {
  margin-right: 0.4em;
}

div#contents {
  max-width: 1280px;
}

ul li, ol li {
  list-style: unset;
}

header li, footer li {
  list-style: none;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

.entry-content a:link {
  text-decoration: underline;
  color: inherit;
}

a.tag-link {
  background: #62c1b4;
  border-color: #62c1b4;
}

.category ul li {
  display: block;
  font-size: 100%;
  padding: inherit;
  background: none;
}

article ul, article ol {
  padding-left: 2em;
}

aside ul {
  list-style: none;
  padding-left: 1em;
}






@media screen and (max-width: 768px) {

  div#contents {
    display: flex;
    flex-direction: column;
    width: 95%;
  }

  .contents-body {
    width: 100%;
    gap: 2%;
  }

  .contents-body>li {
    width: calc((100% - 2%) / 2);
  }

  .entry__time {
    font-size: 12px;
  }

  h2.entry__ttl {
    font-size: 14px;
  }

  div#sidebar {
    width: 100%;
    display: block;
  }

  .sidebar h2, .sidebar h3 {
    font-size: 14px;
  }

  div#contents>div#sidebar {
    font-size: 14px;
    padding: 1em;
  }

}


.contents-body>li>.entry__inner>a>img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}