@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){
  /*必要ならばここにコードを書く*/
}

/* Single Works layout */
.ir-single { max-width: 1040px; margin: 0 auto; padding: 24px 16px; }
.ir-single__header { margin-bottom: 12px; }
.ir-single__title { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }

/* Embeds grid */
.ir-embeds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.ir-embed { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; }
.ir-embed iframe, .ir-embed blockquote { width: 100% !important; }

/* グリッド */
.works-grid{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.works-grid--cols1 { grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.works-grid--cols2 { grid-template-columns: repeat(auto-fit, minmax(420px,1fr)); }
.works-grid--cols3 { grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }

/* カード */
.works-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:14px;
  padding:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}

/* 埋め込み枠 */
.works-card__embed{
  overflow:hidden;
  border-radius:10px;
}
.works-card__embed iframe{
  width:100% !important;
}

/* フォールバック（サムネ+タイトル） */
.works-card__thumb{ width:100%; height:auto; border-radius:10px; display:block; }
.works-card__title{ font-size:1rem; margin:.7em 0 0; line-height:1.5; }
.works-card__link, .works-card__fallback{ text-decoration:none; color:inherit; display:block; }

/* ===== Works Archive ===== */
.ir-hero{padding:48px 16px;background:#fff;}
.ir-hero__inner{max-width:1080px;margin:0 auto;text-align:center;}
.ir-hero__title{font-size:2rem;font-weight:800;margin:0 0 .2em;}
.ir-hero__lead{color:#6b7280;margin:0;}

.ir-works-grid{max-width:1080px;margin:24px auto 56px;padding:0 16px;}
.ir-grid{
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* カード */
.ir-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.04);}
.ir-card__link{display:block;color:inherit;text-decoration:none;}
.ir-card__title{font-size:1.1rem;font-weight:700;padding:14px 16px 0;margin:0;}
.ir-card__preview{padding:12px 16px 4px;}
.ir-card__placeholder{
  display:grid;place-items:center;height:180px;background:#f3f4f6;color:#9ca3af;border-radius:10px;
}
.ir-card__thumb{width:100%;height:auto;border-radius:10px;}
.ir-card__meta{padding:8px 16px 16px;color:#6b7280;font-size:.9rem;}

/* oEmbed の高さ安定用（Twitter/IGのロード中にガタつき防止） */
.ir-embed-wrap iframe{width:100%;}
.ir-embed-wrap{display:block;}

/* ページネーション */
.ir-pagination{display:flex;justify-content:center;margin:28px 0;}
.ir-pagination .page-numbers{display:inline-block;margin:0 6px;padding:.5em .9em;border-radius:8px;background:#fff;border:1px solid #e5e7eb;}
.ir-pagination .current{background:#fde3e3;border-color:#fda4a4;color:#111827;font-weight:700}

/* CTA */
.ir-cta{max-width:960px;margin:56px auto 80px;padding:32px 20px;text-align:center;background:#fff;border:1px dashed #fecaca;border-radius:16px;}
.ir-cta__title{font-size:1.4rem;font-weight:800;margin:0 0 .3em;}
.ir-cta__lead{color:#6b7280;margin:0 0 1em;}
.ir-cta__btn{display:inline-block;padding:14px 26px;border-radius:999px;background:#f87171;color:#fff;font-weight:700;text-decoration:none;box-shadow:0 6px 14px rgba(248,113,113,.25);}
.ir-cta__btn:hover{background:#ef4444;}

/* アーカイブのサイドやヘッダー隠し（必要なら） */
body.post-type-archive-works .l-header,
body.post-type-archive-works .l-sidebar { display: none !important; }

/* 横幅拡張（Cocoon等で中央カラムを広げたい時だけ） */
body.post-type-archive-works .l-inner { max-width: 1200px; }

/* ヒーロー */
.ir-works-hero { text-align:center; margin: 24px auto 32px; }
.ir-works-ttl { font-size: clamp(22px, 3vw, 36px); margin: 0 0 6px; }
.ir-works-lead { color:#6b7280; }

/* ==== 埋め込みだけのグリッド ==== */
.ir-embeds-grid{
  display:grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
}

/* レスポンシブ */
@media (max-width: 1024px){
  .ir-embeds-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .ir-embeds-grid{ grid-template-columns: 1fr; }
}

/* 枠・影は一切なし。埋め込み要素にだけ余白調整 */
.ir-embed { margin:0; padding:0; }

/* 各SNSのデフォルト余白を詰める（必要に応じて） */
.twitter-tweet { margin: 0 !important; }
.instagram-media { margin: 0 !important; }
blockquote.tiktok-embed { margin: 0 !important; }

/* 100%幅で収まるよう保険 */
.ir-embed iframe { width: 100% !important; }