/* =============================================
Cocoon 子テーマ最適化版 グリッドレイアウト
・Cocoonの本文領域（.entry-content）内でだけ効くようにスコープしています
・見出し/段落の余白はCocoon既定に近い値に調整
・HTMLはブロックエディタの「カスタムHTML」ブロックにそのまま貼り付け
・CSSは 子テーマ style.css に追加（もしくは「外観 > カスタマイズ > 追加CSS」）
・3パターン：12カラム／左右50-50特集／auto-fitカード
==============================================  */




@charset "UTF-8";

/* ========= スコープ: 記事本文・固定ページ本文内のみ ========= */
.entry-content .coc-grid-container{ /* コンテナ */
  max-width: var(--coc-grid-container-max, 1200px);
  margin-inline: auto;
  padding: 0;
  margin: 0;
}
.entry-content .coc-grid-title{
  font-size: clamp(20px, 2.2vw, 28px);
  margin: 0 0;
  line-height: 1.35;
}

/* ===== 12カラム基盤 ===== */
.entry-content .coc-grid-12{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--coc-grid-gap, 24px);
}
/* spanユーティリティ */
.entry-content .coc-span-12{ grid-column: span 12; }
.entry-content .coc-span-9 { grid-column: span 9; }
.entry-content .coc-span-8 { grid-column: span 8; }
.entry-content .coc-span-6 { grid-column: span 6; }
.entry-content .coc-span-6 { grid-column: span 6; }
.entry-content .coc-span-4 { grid-column: span 4; }
.entry-content .coc-span-3 { grid-column: span 3; }
.entry-content .coc-span-3_2 { grid-column: span 3; }
.entry-content .coc-span-2 { grid-column: span 2; }

/* iPad系ブレイクポイントに最適化 */
@media (max-width: 1024px){ /* iPad横 */
  .entry-content .coc-md-span-12{ grid-column: span 12; }
  .entry-content .coc-md-span-9 { grid-column: span 9; }
  .entry-content .coc-md-span-8 { grid-column: span 8; }
  .entry-content .coc-md-span-6 { grid-column: span 6; }
  .entry-content .coc-md-span-4 { grid-column: span 4; }
  .entry-content .coc-md-span-3 { grid-column: span 3; }
.entry-content .coc-span-3_2 { grid-column: span 3; }
}
@media (max-width: 834px){ /* iPad縦/Pro11 */
  .entry-content .coc-md-span-6{ grid-column: span 12; } /* 2→1段に落とす例 */
}
@media (max-width: 768px){ /* iPad mini & スマホ大 */
  .entry-content .coc-sm-span-12{ grid-column: span 12; }
  .entry-content .coc-sm-span-6 { grid-column: span 6; }
  .entry-content .coc-sm-span-4,
  .entry-content .coc-sm-span-3 { grid-column: span 12; }
.entry-content .coc-span-3_2 { grid-column: span 6; }
}

/* カード（Cocoonのカードと干渉しないよう別クラス） */
.entry-content .coc-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: clip;
  display:flex;
  flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.entry-content .coc-card:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.entry-content .coc-card-img{
  aspect-ratio: 16/9; /* 画像比率を統一 */
  width:100%;
  height:auto;
  object-fit: cover;
  display:block;
}
.entry-content .coc-card-title{
  font-size: clamp(16px, 1.6vw, 20px);
  margin: 16px 16px 6px;
  line-height: 1.45;
}
.entry-content .coc-card-text{
  color: #667085;
  margin: 0 16px 16px;
}
.entry-content .coc-card-link{
  margin: 0 16px 16px;
  align-self: flex-start;
  display:inline-block;
  padding: 9px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  text-decoration:none;
  color: var(--coc-brand, #2563eb);
}
.entry-content .coc-card-link:hover{ background:#f3f4f6 }

/* ===== 特集レイアウト（50/50） ===== */
.entry-content .coc-feature{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: center;
  margin-block: clamp(16px, 3vw, 32px);
  margin-top: 0;
  margin-bottom: 0;
}
.entry-content .coc-feature.reverse .coc-feature-media{ order: 2; }
.entry-content .coc-feature.reverse .coc-feature-body{ order: 1; }

.entry-content .coc-feature-media{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
}
.entry-content .coc-feature-media img{
  width:100%;
  height:auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  display:block;
}
.entry-content .coc-feature-media figcaption{
  font-size: 13px;
  color: #667085;
  padding: 10px 14px;
}
.entry-content .coc-feature-title{
  font-size: clamp(20px, 2vw, 26px);
  margin: 0 0 .6em;
}
.entry-content .coc-feature-list{ margin: .6em 0 1.2em; padding-left: 1.2em; }
.entry-content .coc-feature-list li{ margin: .25em 0; }
.entry-content .coc-btn{
  display:inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--coc-brand, #2563eb);
  color:#fff;
  text-decoration:none;
}
.entry-content .coc-btn:hover{ opacity:.92 }

@media (max-width: 1024px){
  .entry-content .coc-feature{ gap: 24px; }
}
@media (max-width: 834px){
  .entry-content .coc-feature{ grid-template-columns: 1fr; }
  .entry-content .coc-feature.reverse .coc-feature-media,
  .entry-content .coc-feature.reverse .coc-feature-body{ order: initial; }
}

/* ===== 自動段組（auto-fit） ===== */
.entry-content .coc-grid-autofit{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--coc-grid-gap, 24px);
}