/* トップページ（各サービスへの入口）だけで使う見た目（2026-10-27）。共通の部品は style.css */

/* 上の絵：入口なので低くして、すぐ下のカードが見えるようにする */
.hero--hub{min-height:0}
.hero--hub .hero-in{padding:64px 22px 54px}
.hero--hub h1{font-size:clamp(28px,5vw,46px)}
.hero--hub p{margin-bottom:0}
@media(max-width:860px){
  .hero--hub{padding-top:min(250px, 56vw)}
  .hero--hub .hero-bg, .hero--hub .hero-veil{height:min(300px, 66vw)}
  .hero--hub .hero-in{padding:6px 20px 34px}
}

/* 大きなカード（イラスト集・プロンプト辞典・Tagtelier） */
.hub-main{padding-top:24px}
.hub-top{padding-top:44px}
.hub-cards{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:760px){ .hub-cards{grid-template-columns:repeat(3,1fr)} }
/* 2枚のときも3枚並びと同じ大きさ（左から並べる）＝2026-10-28 ユーザー「カード3枚が横に並ぶくらいのサイズ感で」 */
.hub-card{display:flex; flex-direction:column; text-decoration:none; color:var(--fg);
  background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.hub-card:hover{border-color:var(--accent)}
.hub-card img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--panel2)}
.hub-body{display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; flex:1}
.hub-body b{font-size:1.12rem; line-height:1.4}
.hub-body .d{color:var(--fg-2); font-size:.9rem; line-height:1.75; flex:1}
.hub-card{position:relative}
.hub-links{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin-top:6px; font-size:.9rem}
.hub-go{color:var(--accent); font-weight:700; text-decoration:none}
.hub-go::after{content:""; position:absolute; inset:0; border-radius:16px}   /* カード全体を押せるようにする */
.hub-alt{position:relative; z-index:1; color:var(--muted); text-decoration:none}   /* 全体のリンクより上に置く */
.hub-alt:hover{color:var(--accent)}
.hub-card:has(.hub-alt:hover){border-color:var(--line)}
.hub-badge{align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:3px 10px; border-radius:999px;
  color:var(--accent); background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.32)}
.hub-badge--app{color:var(--fg-2); background:transparent; border-color:rgba(var(--fg-rgb),.26)}

/* Tagtelier の簡単な紹介 */
.hub-app{display:grid; gap:24px; align-items:start}
@media(min-width:860px){ .hub-app{grid-template-columns:1.35fr 1fr} }
.hub-app .cta .btn{padding:13px 22px; font-size:.92rem}
.hub-app .tags{margin-top:14px}
.hub-shot{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px}

.b-start{background:linear-gradient(135deg,#ff9a6b,#e5643a)}