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

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

/* ── ピックアップバナー ── */
.pickup-banner {
  margin: 0 0 2em;
}
.pickup-banner-title {
  font-size: 1rem;
  color: #888;
  border: none;
  margin: 0 0 .8em;
  padding: 0;
  letter-spacing: .05em;
}
.pickup-banner-title::before {
  content: "★ ";
  color: #73c3fb;
}
.pickup-banner-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pickup-card {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.pickup-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.pickup-card-img {
  width: 100%;
  padding-top: 60%;
  background-size: cover;
  background-position: center;
  background-color: #e8f4fd;
}
.pickup-card-body {
  padding: 10px 12px;
  background: #fff;
}
.pickup-card-cat {
  font-size: .72rem;
  color: #73c3fb;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}
.pickup-card-title {
  font-size: .85rem;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 834px) {
  .pickup-banner-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .pickup-banner-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ── ナビメニュー Font Awesome アイコン ── */
/* .item-label::before に置くことでテキストとインラインに並ぶ */
.menu-top .menu-item .item-label::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}

.menu-home        .item-label::before { content: "\f015"; } /* fa-home        */
.menu-fishing     .item-label::before { content: "\f578"; } /* fa-fish        */
.menu-programming .item-label::before { content: "\f121"; } /* fa-code        */
.menu-gadget      .item-label::before { content: "\f109"; } /* fa-laptop      */
.menu-setsuyaku   .item-label::before { content: "\f4d3"; } /* fa-piggy-bank  */
.menu-movie       .item-label::before { content: "\f008"; } /* fa-film        */

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

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

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