.yg{--ac:#00489d;--ac2:#0b6fc4;--bd:#e3ebf2;--bd2:#c9dcec;--hr:#eef3f8;--tx:#1b2733;--tx2:#4a5c6e;--tx3:#7f96ae;--bg:#f4f8fb;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;color:var(--tx);line-height:1.6}
.yg *{box-sizing:border-box}
.yg a{color:inherit;text-decoration:none}
.yg-wrap{max-width:1120px;margin:0 auto}
.yg-sec{padding:88px 24px}
.yg-sec--bg{background:transparent}
.yg-eyebrow{font-size:12px;letter-spacing:.18em;color:var(--tx3);font-weight:700;margin-bottom:10px}
.yg-h2{margin:0 0 12px;font-size:30px;font-weight:900}
.yg-sub{margin:0 0 36px;font-size:14px;line-height:1.9;color:var(--tx2)}
.yg-spark{width:14px;height:14px;flex:none}
.yg-arrow{flex:none;width:32px;height:32px;border-radius:999px;background:#f0f6fc;color:var(--ac);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.yg-center{display:flex;justify-content:center}
.yg-cta{background:var(--ac);color:#fff;font-weight:900;font-size:15px;border-radius:999px;padding:18px 40px;min-height:56px;display:inline-flex;align-items:center;gap:8px}
.yg-cta:hover{background:var(--ac2);color:#fff}
.yg-btno{background:#fff;border:1px solid var(--ac);color:var(--ac);font-weight:900;font-size:14px;border-radius:999px;padding:17px 34px;min-height:54px;display:inline-flex;align-items:center;gap:8px}
.yg-btno:hover{background:#f0f6fc}
.yg-panel{max-height:0;overflow:hidden;transition:max-height .22s ease}
.yg-rule{height:1px;background:var(--hr);margin:14px 0 12px}
@media(max-width:768px){.yg-h2{font-size:23px}.yg-sec{padding:56px 0px}}
@media(prefers-reduced-motion:reduce){.yg *{transition:none!important}}
.yg-cases__hd{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
.yg-cases__all{font-size:13px;font-weight:700;color:var(--ac)}
.yg-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.yg-cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.yg-cases{grid-template-columns:1fr}}
.yg-case{background:#fff;border:1px solid var(--bd);border-radius:16px;overflow:hidden;transition:box-shadow .18s}
.yg-case:hover{box-shadow:0 10px 28px rgba(27,39,51,.1)}
.yg-case__img {
  width: 100%;
  height: auto; /* ★ 高さを自動調整に変更 */
  aspect-ratio: 16 / 9; /* ★ 一般的なサムネイル比率（16:9）を指定 */
  object-fit: contain;
  display: block;
}
.yg-case__img--ph{background:#e8eef5;display:flex;align-items:center;justify-content:center;font-size:11px;color:#93a7ba}
.yg-case__ind{font-size:11px;color:var(--tx3);margin-bottom:8px}
.yg-case__nm{font-size:15px;font-weight:700;line-height:1.6;margin-bottom:14px}
.yg-case__tags{display:flex;flex-wrap:wrap;gap:6px}
.yg-tag{font-size:10.5px;color:var(--ac);background:#f0f6fc;border-radius:999px;padding:5px 10px}
.yg-case__note{margin:20px 0 0;font-size:11.5px;color:#93a7ba}

/* --- タグをカード下端に揃える --- */
.yg .yg-case{display:flex;flex-direction:column}
.yg .yg-case>div:last-child{flex:1;display:flex;flex-direction:column}
.yg .yg-case__tags{margin-top:auto;padding-top:4px}

/* --- 背景の透明化（上書き） --- */
.yg .yg-sec--bg{background:none;background-color:transparent}

/* --- 下部ボタンの背景色 --- */
.yg .yg-btno{background:#fff!important;background-color:#fff!important;border:1px solid var(--ac)!important;color:var(--ac)!important}
.yg .yg-btno:hover{background:#f0f6fc!important;background-color:#f0f6fc!important;color:var(--ac)!important}
.yg .yg-btno span{color:var(--ac)!important}
/* --- 3列固定＋画像を高く --- */
.yg .yg-cases{grid-template-columns:repeat(3,1fr)}
.yg .yg-case__img {
  width: 100%;
  height: auto; /* ★ 250px固定をやめ、画像本来の高さに合わせる */
  display: block;
}
@media(max-width:900px){.yg .yg-cases{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 600px) {
  .yg .yg-cases {
    grid-template-columns: 1fr;
  }
  /* ここにあった .yg-case__img { ... } は不要なので削除 */
}  
  /* ★ 横幅を100%にし、比率を保ちながら枠を埋め尽くす */
.yg .yg-case__img {
  width: 100% !important;
  aspect-ratio: 4 / 3; /* ★ 1024x768の比率で枠を作成 */
  object-fit: cover !important; /* ★ 枠を隙間なく完璧に埋める */
  display: block;
}
}
/* --- セクション間の余白を詰める --- */
.gm .gm-sec{padding-bottom:64px}
.gm .gm-d0__note{margin-top:16px}
.gm .gm-bridge{margin-top:24px;gap:10px}
.gm .gm-bridge span{height:32px}
@media(max-width:767px){
 .gm .gm-sec{padding-bottom:44px}
 .gm .gm-bridge{margin-top:20px;gap:8px}
 .gm .gm-bridge span{height:26px}
}