@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* Cocoon設定関連 *******************/
/* 通知エリア */
.notice-area {
  font-size: clamp(0.75rem, calc(0.6875rem + 0.25vw), 0.875rem);
  letter-spacing: 1px;
}
/* アピールエリア */
.appeal-content {
  max-width: 1190px;
  background-color: rgb(248 244 230 / 0.7);
  text-align: left;
  > .appeal-message {
    & *:not(:last-child) {
      margin-bottom: 1em;
    }
    > .appeal-button-notes {
      padding-top: 1em;
      border-top: 1px dotted var(--main-color);
    }
  }
}

/* カード ***************************/
/* 横並び */
.entry-content {
  > .navi-entry-cards.stack-horizontal,
  > .new-entry-cards.stack-horizontal {
    --column: 1;
    --gap: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, round(down, calc((100% - var(--gap) * (var(--column) - 1)) / var(--column)), 1px));
    gap: var(--gap);
    justify-items: center;
    &.column-3 {
      --column: 3;
    }
    &.column-2 {
      --column: 2;
    }
    &.column-1 {
      --column: 1;
    }
    > * {
      margin: 0;
    }
    @media screen and (max-width: 834px) {
      &.column-3 {
        --column: 2;
      }
      &.column-2 {
        --column: 1;
      }
    }
    @media screen and (max-width: 480px) {
      &.column-3 {
        --column: 1;
      }
    }
  }
}

/* アーカイブ ***********************/
/* タイトル */
.archive-title {
  font-size: 22px;
  > .list-title-in {
    display: grid;
    grid-template-areas: '. title .';
    grid-template-columns: minmax(55px, 1fr) auto minmax(55px, 1fr);
    column-gap: 1em;
    align-items: center;
    width: 100%;
    padding: 0;
    &::before,
    &::after {
      position: relative;
      top: 0;
      width: 100%;
      height: 2px;
      margin: 0;
      background-color: var(--main-color);
    }
    > span {
      grid-area: title;
      color: var(--main-color);
      white-space: normal;
    }
  }
}

/* 汎用 ****************************/
/* 汎用グリッドレイアウト */
.grid-container {
  --column: 1;
  --gap: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, round(down, calc((100% - var(--gap) * (var(--column) - 1)) / var(--column)), 1px));
  gap: var(--gap);
  &.column-4 {
    --column: 4;
  }
  &.column-3 {
    --column: 3;
  }
  &.column-2 {
    --column: 2;
  }
  &.row-gap-0 {
    gap: 0 var(--gap);
  }
  > * {
    margin-bottom: 0;
  }
  @media screen and (max-width: 834px) {
    &.column-4,
    &.column-3 {
      --column: 2;
    }
    &.column-2 {
      --column: 1;
    }
  }
  @media screen and (max-width: 480px) {
    --column: 1;
  }
}

/* 画像アイコン付きボタンリンク
.link-button {
  display: grid;
  grid-template-areas: 'title icon';
  grid-template-columns: 1fr auto;
  column-gap: 1em;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.75em 1em 0.75em 1.25em;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #fff;
  color: inherit;
  font-size: 0.875em;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  &:hover {
    border: 1px solid #949495;
    background-color: #e9e4d4;
    color: inherit;
  }
  > .link-button-title {
    grid-area: title;
    justify-self: start;
  }
  > .link-button-icon {
    grid-area: icon;
    justify-self: end;
  }
}
*/

/* Font Awesomeアイコン付きボタンリンク */
.link-button {
  display: grid;
  grid-template-areas: 'title icon';
  grid-template-columns: 1fr auto;
  column-gap: 1em;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.75em 1.25em;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #fff;
  color: inherit;
  font-size: 0.875em;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  &:hover {
    border: 1px solid #949495;
    background-color: #e9e4d4;
    color: inherit;
  }
  > .link-button-title {
    grid-area: title;
    justify-self: start;
  }
  > .link-button-icon {
    grid-area: icon;
    justify-self: end;
    font-size: 1.75em;
    font-family: 'Font Awesome 5 Free';
    &.fa-file-word {
      color: #1e50a2;
    }
    &.fa-file-excel {
      color: #007b43;
    }
    &.fa-file-powerpoint {
      color: #d3381c;
    }
    &.fa-file-pdf {
      color: #cf2e2e;
    }
    &.fa-file-video {
      color: #0095d9;
    }
    &.fa-file-archive {
      color: #666666;
    }
  }
}

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

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

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