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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* タグ一覧のコンテナ */
.gentle-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* タグ同士の間隔 */
    justify-content: flex-start; /* 左寄せ（中央寄せなら center） */
    padding: 10px 0;
}

/* タグ個別のデザイン */
.gentle-tag-item {
    display: inline-block;
    background-color: #f7f9fb; /* 背景：薄いグレー/ブルー系 */
    color: #666; /* 文字色：濃いグレー */
    padding: 8px 18px;
    border-radius: 50px; /* 丸みを強くする（ピル型） */
    text-decoration: none; /* 下線を消す */
    font-size: 0.9rem;
    border: 1px solid #eef1f5; /* 境界線を薄く引いてふんわり感を出す */
    transition: all 0.3s ease; /* ホバー時の動きを滑らかに */
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* 極薄の影で浮き出し感 */
}

/* ホバー時のデザイン（マウスを乗せた時） */
.gentle-tag-item:hover {
    background-color: #fff; /* 背景を白に */
    color: #88c0d0; /* アクセントカラー（好みの色に変更可） */
    transform: translateY(-2px); /* 少しだけ上に浮かぶ */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* 影を少し濃く */
    text-decoration: none; /* Cocoonのデフォルトリンクスタイルを打ち消し */
}

/* タグ名の前につけた「#」のスタイル（任意） */
.gentle-tag-item .tag-name {
    font-weight: 500;
}

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

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

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