/*
================================================================
 ロゴデザイン紹介ギャラリー
================================================================
■ 使い方
  このブロックを既存ページの好きな場所に貼り付けてください。
  単体で動作します（JavaScript不要・表示のみ）。

■ レイアウト
  ・PC ：3列
  ・スマホ：1列

■ 枠を増やす／減らす
  <a class="pglg-card" href="..."> ～ </a> を
  コピー／削除してください（何個でもOK・自動で並びます）。

■ 画像の差し替え
  <img class="pglg-img" src="..."> の src を実際のwebpパスに
  書き換えてください（現在は仮のパスです）。

■ リンク先（ロゴジェネレーター）
  カード全体と「作ってみる」ボタンの両方が、ロゴジェネレーターへの
  リンクになっています。<a class="pglg-card" href="..."> の href を
  実際のジェネレーターのURL／アンカー（例 #etkApp）に書き換えてください。

■ 干渉対策
  ・CSSはすべて #pgLogoGallery 配下のみに適用
  ・クラスは pglg- プレフィックスで他と衝突しません
================================================================
*/

#pgLogoGallery{
  --pglg-paper:#FFFEF9;
  --pglg-ink:#2D4059;
  --pglg-sub:#6b7a90;
  --pglg-coral:#FF8A7A;
  --pglg-line:#E4DECF;
  --pglg-head:#FFF3D6;

  font-family:"Hiragino Maru Gothic ProN","HGMaruGothicMPRO","BIZ UDGothic","Yu Gothic","Meiryo",sans-serif;
  color:var(--pglg-ink);
  max-width:1060px;
  margin:32px auto 0;
  line-height:1.7;
  width: 95%;
  margin-bottom: 30px;
}
#pgLogoGallery *,
#pgLogoGallery *::before,
#pgLogoGallery *::after{box-sizing:border-box;margin:0;padding:0;}

/* 見出し */
#pgLogoGallery .pglg-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:6px;
}
#pgLogoGallery .pglg-head .pglg-mark{
  width:16px;height:16px;flex:none;
  border-radius:50% 46% 52% 48%;
  background:var(--pglg-coral);
}
#pgLogoGallery .pglg-head h2{
  font-size:1.4rem;letter-spacing:.06em;
}
#pgLogoGallery .pglg-lead{
  font-size:1.4rem;color:var(--pglg-sub);
  margin-bottom:22px;
}

/* グリッド：PC3列／スマホ1列 */
#pgLogoGallery .pglg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

/* カード */
#pgLogoGallery .pglg-card{
  display:flex;
  flex-direction:column;
  background:var(--pglg-paper);
  border:2px solid var(--pglg-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 0 rgba(45,64,89,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
  color:inherit;
}
#pgLogoGallery .pglg-card:hover{
  transform:translateY(-4px);
  box-shadow:0 9px 0 rgba(45,64,89,.08);
}
#pgLogoGallery .pglg-card:focus-visible{
  outline:3px solid var(--pglg-coral);
  outline-offset:3px;
}

/* 画像エリア（正方形でそろえる） */
#pgLogoGallery .pglg-figure{
  margin:0;
  background:#fff;
  border-bottom:2px solid var(--pglg-line);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
#pgLogoGallery .pglg-img{
  display:block;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
}

/* 本文 */
#pgLogoGallery .pglg-body{
  padding:16px 18px 20px;
  display:flex;flex-direction:column;
  flex:1;
}
#pgLogoGallery .pglg-name{
  font-size:1.4rem;
  letter-spacing:.04em;
  margin-bottom:8px;
}
#pgLogoGallery .pglg-desc{
  font-size:1.4rem;
  color:#4a5a70;
}
#pgLogoGallery .pglg-tag{
  display:inline-block;
  align-self:flex-start;
  margin-top:14px;
  font-size:1.4rem;font-weight:700;
  color:var(--pglg-ink);
  background:var(--pglg-head);
  border:1px solid var(--pglg-line);
  border-radius:999px;
  padding:4px 12px;
}

/* 「作ってみる」ボタン（カード下部） */
#pgLogoGallery .pglg-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:16px;
  padding:11px 16px;
  background:var(--pglg-coral);
  color:#fff;
  font-size:1.4rem;font-weight:700;
  letter-spacing:.04em;
  border-radius:12px;
  box-shadow:0 4px 0 #d96a5c;
  transition:transform .1s ease, box-shadow .1s ease;
}
/* カードをホバーしたときにボタンも少し沈む */
#pgLogoGallery .pglg-card:hover .pglg-cta{
  transform:translateY(2px);
  box-shadow:0 2px 0 #d96a5c;
}
#pgLogoGallery .pglg-cta .pglg-cta-arrow{
  font-size:1.4em;
  line-height:1;
}

/* タブレット：2列 */
@media (max-width:880px){
  #pgLogoGallery .pglg-grid{grid-template-columns:repeat(2,1fr);}
}
/* スマホ：1列 */
@media (max-width:600px){
  #pgLogoGallery .pglg-grid{grid-template-columns:1fr;gap:18px;}
  #pgLogoGallery .pglg-head h2{font-size:1.4rem;}
}