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

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

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

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

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

/* カテゴリー紹介ブロック */
.category-intro {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 30px 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* タイトル */
.category-intro .category-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #333;
  line-height: 1.4;
}

/* 説明文 */
.category-intro .category-description {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #555;
}

/* ============================================================
   記事内画像：ホバーアニメーション（フワッと浮き上がり）
   ============================================================ */
.entry-content img:not(.tp-related-thumb):not(.wp-smiley):not([class*="emoji"]) {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  transition:
    transform   0.40s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow  0.38s ease,
    filter      0.38s ease;
  cursor: zoom-in;
  will-change: transform;
}

.entry-content img:not(.tp-related-thumb):not(.wp-smiley):not([class*="emoji"]):hover {
  transform:  scale(1.035) translateY(-4px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.18);
  filter:     brightness(1.04) saturate(1.06);
}

/* ============================================================
   ライトボックス（クリック拡大）
   ============================================================ */
#tp-lightbox-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         99999;
  background:      rgba(14,17,13,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items:     center;
  justify-content: center;
  cursor:          zoom-out;
}

#tp-lightbox-overlay.is-open {
  display:   flex;
  animation: tpLbFadeIn 0.26s ease both;
}

@keyframes tpLbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#tp-lightbox-img {
  max-width:    min(90vw, 960px);
  max-height:   88vh;
  height:       auto;
  width:        auto;
  border-radius: 14px;
  box-shadow:   0 28px 90px rgba(0,0,0,0.55);
  object-fit:   contain;
  cursor:       default;
  animation:    tpLbImgIn 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  display:      block;
}

@keyframes tpLbImgIn {
  from { transform: scale(0.78); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

#tp-lightbox-close {
  position:    fixed;
  top:         16px;
  right:       20px;
  width:       42px;
  height:      42px;
  background:  rgba(255,255,255,0.15);
  border:      1.5px solid rgba(255,255,255,0.30);
  border-radius: 50%;
  color:       #fff;
  font-size:   18px;
  line-height: 40px;
  text-align:  center;
  cursor:      pointer;
  transition:  background 0.2s, transform 0.2s;
  z-index:     100000;
}

#tp-lightbox-close:hover {
  background: rgba(255,255,255,0.28);
  transform:  scale(1.10);
}

/* ============================================================
   導入文
   ============================================================ */
.tp-intro-text {
  font-family:     'Zen Maru Gothic', 'Hiragino Maru Gothic Pro', '丸ゴシック', sans-serif;
  font-size:       1.08rem;
  font-weight:     400;
  line-height:     2.15;
  color:           #3a4a3f;
  background:      linear-gradient(135deg, #f9fdf6 0%, #f1f8ef 100%);
  border-left:     4px solid #8aa06b;
  border-radius:   0 12px 12px 0;
  padding:         1.4em 1.8em 1.4em 1.6em;
  margin:          0 0 2em;
  position:        relative;
}

.tp-intro-text::before {
  content:    '✦';
  position:   absolute;
  top:        -11px;
  left:       14px;
  font-size:  17px;
  color:      #8aa06b;
  background: #f9fdf6;
  padding:    0 5px;
  line-height: 1;
}

/* ============================================================
   理解を深める次の論点
   ============================================================ */
.tp-related-block {
  border-radius: 16px;
  padding:       1.8em 1.6em 1.6em;
  margin:        2.6em 0;
}

.tp-related-label {
  font-size:      0.76rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  color:          #5f6d4a;
  margin:         0 0 1.1em;
  padding:        0;
  text-transform: uppercase;
}

.tp-related-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:                   14px;
}

.tp-related-item {
  display:         flex;
  flex-direction:  column;
  background:      #ffffff;
  border-radius:   12px;
  overflow:        hidden;
  box-shadow:      0 2px 14px rgba(0,0,0,0.07);
  text-decoration: none;
  color:           inherit;
  transition:
    transform   0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow  0.28s ease;
}

.tp-related-item:hover {
  transform:       translateY(-6px) scale(1.016);
  box-shadow:      0 12px 34px rgba(0,0,0,0.14);
  text-decoration: none;
}

.tp-related-thumb {
  width:       100%;
  height:      126px;
  object-fit:  cover;
  display:     block;
  transition:  filter 0.3s ease;
}

.tp-related-item:hover .tp-related-thumb {
  filter: brightness(1.05) saturate(1.08);
}

.tp-related-no-thumb {
  height:     126px;
  background: linear-gradient(135deg, #e4ead9, #d4dfc8);
}

.tp-related-title {
  display:     block;
  font-size:   0.84rem;
  font-weight: 600;
  line-height: 1.65;
  color:       #2e3a33;
  padding:     10px 13px 14px;
}

@media screen and (max-width: 480px) {
  .tp-related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .tp-related-thumb,
  .tp-related-no-thumb { height: 90px; }
}