@charset "UTF-8";
/* ==========================================================================
   一覧カード（トップ／カテゴリー／タグ／検索結果 共通）
   --------------------------------------------------------------------------
   Cocoon が生成するマークアップ（tmp/entry-card.php）:

     <div id="list" class="list ect-vertical-card ect-2-columns">
       <a class="entry-card-wrap a-wrap">              ← カード全体がリンク
         <article class="entry-card e-card">
           <figure class="entry-card-thumb card-thumb">
             <img class="entry-card-thumb-image">
             <span class="cat-label cat-label-1">ノウハウ</span>
           </figure>
           <div class="entry-card-content card-content">
             <h2 class="entry-card-title card-title"><span>タイトル</span></h2>
             <div class="entry-card-snippet card-snippet">抜粋</div>   ← 設定でON
             <div class="entry-card-meta card-meta">
               <div class="entry-card-info"><span class="post-date">…</span></div>
               <div class="entry-card-categorys">…</div>

   デザイン案の editorial-card variant に合わせる：
     12px角丸・1px枠線・影なし・黒タイトル。
     （ブランドガイドの機能カード＝14px角丸・影・濃紫タイトル とは別扱い）

   ※ .entry-card-title の <span> は子テーマ functions.php の
      wrap_entry_card_title_with_span が一覧・アーカイブでのみ付与している。
   ========================================================================== */

/* --------------------------------------------------------------------------
   グリッド
   現状は flex-wrap ＋ gap:17px 1%（カード幅 49.5%）。
   ずれの出ない grid 2カラムにする。
   -------------------------------------------------------------------------- */
#list.ect-vertical-card{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* --------------------------------------------------------------------------
   カード本体
   現状は .entry-card に box-shadow、.entry-card-wrap に border-radius:4px と
   二重に角丸が掛かっていた。枠は .entry-card 側に一本化する。
   -------------------------------------------------------------------------- */
/* Cocoon は 2カラムを width:49.5% で作っているため、grid セルの中で
   さらに半分に縮んでしまう。幅の制御は grid に任せる。 */
:is(#list, .lg-picks__grid) .entry-card-wrap{
  width:         100%;
  max-width:     none;
  margin:        0;
  padding:       0;
  background:    none;
  border-radius: 0;
}

:is(#list, .lg-picks__grid) .entry-card{
  display:        flex;
  flex-direction: column;
  width:          100%;
  height:         100%;
  margin:         0;
  border:         1px solid var(--c-line);
  border-radius:  var(--radius-lg);
  box-shadow:     none;              /* editorial-card は影を使わない */
  overflow:       hidden;
  background:     var(--c-bg);
  transition:     border-color .15s, transform .15s;
}

:is(#list, .lg-picks__grid) .entry-card-wrap:hover .entry-card{
  border-color: var(--c-brand);
  transform:    translateY(-2px);
}

/* --------------------------------------------------------------------------
   サムネイル
   -------------------------------------------------------------------------- */
/* Cocoon は横型カード用にサムネを width:320px で固定している。
   カード幅がそれより狭いとサムネがはみ出して本文側が潰れるので、幅は常に100%にする。 */
:is(#list, .lg-picks__grid) .entry-card-thumb{
  position:      relative;
  width:         100%;
  max-width:     none;
  flex:          none;
  aspect-ratio:  16 / 9;
  margin:        0;
  border-radius: 0;                  /* 角丸は .entry-card の overflow に任せる */
  overflow:      hidden;
  background:    var(--c-bg-sub);
}
:is(#list, .lg-picks__grid) .entry-card-thumb img{
  width:      100%;
  height:     100%;
  object-fit: cover;
  /* transition が無いと scale が一瞬で適用され、カクッと切り替わって見える。
     ゆっくり始まって静かに止まる ease-out で拡大させる。
     backface-visibility は、拡大中に画像の輪郭がちらつくのを抑える。 */
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  backface-visibility: hidden;
}
:is(#list, .lg-picks__grid) .entry-card-wrap:hover .entry-card-thumb img{ transform: scale(1.06); }

/* カテゴリーラベル
   現状は display:none で隠され、代わりに日付の横にチップが出ていた。
   デザイン案どおりサムネイルの左下へ戻す。 */
:is(#list, .lg-picks__grid) .entry-card .cat-label{
  display:     inline-flex;
  align-items: center;
  position:    absolute;
  left:        10px;
  right:       auto;
  top:         auto;
  bottom:      10px;
  height:      22px;
  padding:     0 9px;
  border:      0;
  border-radius: 4px;
  background:  var(--c-scrim);
  color:       var(--c-on-dark);
  font-size:   11px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   本文側
   -------------------------------------------------------------------------- */
:is(#list, .lg-picks__grid) .entry-card-content{
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        14px 16px 16px;    /* 現状 10px */
  border-radius:  0;
}

:is(#list, .lg-picks__grid) .entry-card-title{
  margin:      0 0 8px;
  font-size:   16px;                 /* 現状 PC 18px */
  line-height: 1.6;
  font-weight: 700;
  color:       var(--c-ink);         /* 現状 #333 */

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 抜粋
   Cocoon設定 → インデックス →「スニペット（抜粋）を表示する」がONのとき出力される。 */
:is(#list, .lg-picks__grid) .entry-card-snippet{
  margin:      0 0 12px;
  font-size:   13px;
  line-height: 1.8;
  color:       var(--c-ink-3);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 日付など。P1 で body を 17px にしたぶんを継承して大きくなっていた。
   Cocoon は右寄せ（.entry-card-info が justify-content:flex-end）だが、
   デザイン案はタイトルと左端を揃える。 */
:is(#list, .lg-picks__grid) .entry-card-meta{
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-top:  auto;
  font-size:   12px;
  line-height: 1.6;
  text-align:  left;
  color:       var(--c-ink-3);
}
:is(#list, .lg-picks__grid) .entry-card-info{
  justify-content: flex-start;
  width:      auto;
  text-align: left;
}
:is(#list, .lg-picks__grid) .entry-card-meta .post-date{ color: var(--c-ink-3); }

/* カテゴリーはサムネイルのラベルに出すので、メタからは消す */
:is(#list, .lg-picks__grid) .entry-card-categorys{ display: none; }

/* --------------------------------------------------------------------------
   SP（834px以下）
   2カラムのままだとタイトル幅 145px に 16px の文字が流し込まれ、
   1行あたり9文字しか入らない。横並びの1カラムリストへ切り替える。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px){
  #list.ect-vertical-card{
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  :is(#list, .lg-picks__grid) .entry-card{
    flex-direction: row;
    gap:            12px;
    height:         auto;
    padding:        14px 0;
    border:         0;
    border-bottom:  1px solid var(--c-line);
    border-radius:  0;
    overflow:       visible;
  }
  :is(#list, .lg-picks__grid) .entry-card-wrap:last-child .entry-card{ border-bottom: 0; }
  :is(#list, .lg-picks__grid) .entry-card-wrap:hover .entry-card{
    border-color: var(--c-line);
    transform:    none;
  }

  :is(#list, .lg-picks__grid) .entry-card-thumb{
    flex:          none;
    width:         124px;
    align-self:    flex-start;
    border-radius: 6px;
  }
  :is(#list, .lg-picks__grid) .entry-card-wrap:hover .entry-card-thumb img{ transform: none; }

  /* 124px のサムネイルには載りきらないので出さない */
  :is(#list, .lg-picks__grid) .entry-card .cat-label{ display: none; }

  :is(#list, .lg-picks__grid) .entry-card-content{ padding: 0; }

  :is(#list, .lg-picks__grid) .entry-card-title{
    margin:    0 0 6px;
    font-size: 15px;                 /* 現状 16px を幅145pxへ流し込んでいた */
  }

  /* 横並びリストでは抜粋を出さない（1件あたりが高くなりすぎる） */
  :is(#list, .lg-picks__grid) .entry-card-snippet{ display: none; }
}