/* features-hux-11.css — 主サービスを大きく、他2つを小さく見せる非対称の3カード。
 * 旧 features-th07-bnr の置き換え。旧版は figure の高さが取れず img が 9.59px に圧潰していた。
 * 対策: 器を aspect-ratio で確定。絶対配置と margin:auto による中央寄せを使わない。 */
.features-hux-11 .mx-auto{margin-inline:auto}
.features-hux-11 .max-w-7xl{max-width:80rem}
.features-hux-11 .px-4{padding-inline:1rem}
.features-hux-11 .py-8{padding-block:2rem}

/* 3枚均等グリッド(2026年 レイアウト修正): 非対称(1大+2小)だと右側2枚が窮屈になるため、
   同サイズのカード3枚を横並びにし、画像比率・タイトル位置を統一する。 */
.features-hux-11 .hux11-grid.hux11-grid--even{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:1.25rem}
.features-hux-11 .hux11-grid.hux11-grid--even .hux11-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--radius-card,18px);overflow:hidden;box-shadow:var(--shadow-card,0 12px 30px rgba(15,76,92,0.12));transition:var(--transition,all .3s ease)}
.features-hux-11 .hux11-grid.hux11-grid--even .hux11-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(15,76,92,0.18)}
.features-hux-11 .hux11-grid.hux11-grid--even .hux11-media{margin:0;aspect-ratio:4/3;max-height:none;overflow:hidden}
.features-hux-11 .hux11-grid.hux11-grid--even .hux11-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.features-hux-11 .hux11-grid.hux11-grid--even .hux11-card:hover .hux11-media img{transform:scale(1.05)}
.features-hux-11 .hux11-grid.hux11-grid--even .hux11-cap{flex:1 1 auto;display:flex;flex-direction:column;padding:1.5rem 1.5rem 1.75rem}
.features-hux-11 .hux11-grid.hux11-grid--even .hux11-title{font-size:var(--fs-h3,1.2rem);font-weight:700;color:var(--color-heading-ink,#0F4C5C);line-height:1.4;margin:0 0 .6rem}
.features-hux-11 .hux11-grid.hux11-grid--even .hux11-text{font-size:.92rem;line-height:1.75;color:var(--color-text-muted,#5b6b70);margin:0}

.features-hux-11 .hux11-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.features-hux-11 .hux11-card{display:block;text-decoration:none;color:inherit;border-radius:.5rem;overflow:hidden;background:var(--color-surface,var(--color-bg))}
.features-hux-11 .hux11-media{margin:0;aspect-ratio:16/9;max-height:460px;overflow:hidden}
.features-hux-11 .hux11-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.features-hux-11 .hux11-card:hover .hux11-media img{transform:scale(1.04)}
.features-hux-11 .hux11-cap{padding:1rem 1.1rem 1.25rem}
.features-hux-11 .hux11-title{margin:0 0 .35em;line-height:1.4}
.features-hux-11 .hux11-text{margin:0}
@media (min-width:768px){
  .features-hux-11 .px-4{padding-inline:1.5rem}
  .features-hux-11 .hux11-grid:not(.hux11-grid--even){grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
  /* 主サービスだけ2カラムぶん使う=非対称モザイク(旧レイアウト。hux11-grid--even 使用時は無効) */
  .features-hux-11 .hux11-lead{grid-column:1 / -1}
  .features-hux-11 .hux11-lead .hux11-media{aspect-ratio:21/9}
  .features-hux-11 .hux11-grid.hux11-grid--even{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:1.5rem}
}
@media (min-width:1024px){
  .features-hux-11 .px-4{padding-inline:2rem}
  .features-hux-11 .hux11-grid:not(.hux11-grid--even){grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
  .features-hux-11 .hux11-lead{grid-column:span 2;grid-row:span 2}
  .features-hux-11 .hux11-lead .hux11-media{aspect-ratio:4/3}
  .features-hux-11 .hux11-card:not(.hux11-lead){grid-column:span 2}
  .features-hux-11 .hux11-grid.hux11-grid--even{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:2rem}
}

/* ── 追記: PC/タブレットで hux11-grid--even のカードが必ず横並びになるよう明示的に上書き ── */
@media (min-width: 641px) {
  .features-hux-11 .hux11-grid.hux11-grid--even {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
  }
  .features-hux-11 .hux11-grid.hux11-grid--even > .hux11-card {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
  }
}
@media (max-width: 640px) {
  .features-hux-11 .hux11-grid.hux11-grid--even {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}