:root {
  --max-width:1100px;
  --gap:16px;
  --brand-red:#c62828;
  --brand-gold:#d4af37;
  --card-bg:#fff;
  --muted:#666;
  --container-padding:16px;
  --radius:4px;
}

/* リセット＆全体 */
*{box-sizing:border-box;}
html, body{height:100%; margin:0; font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; line-height:1.4; color:#111; background:#f7f7f8;}
.wrap{max-width:var(--max-width);margin:0 auto;padding:var(--container-padding);}

/* 汎用 */
h1,h2,h3,h4,h5,h6,p,span,div{font-family:inherit; margin:0; color:inherit;}
a{color:inherit; text-decoration:none;}

/* HERO 共通 */
.hero{
  position:relative; margin:0 auto 24px; border-radius:var(--radius); background:#222;
  height:52vh; min-height:320px; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero .overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%); pointer-events:none;
}

/* HEROテキスト左寄せ＆ボタン右下 */
.hero .meta {
  position: absolute;
  bottom: var(--container-padding);
  left: var(--container-padding);
  right: var(--container-padding);
  max-width:60%;
  text-align:left;
  display:flex;
  flex-direction:column;
}

.hero .meta .cta {
  align-self:flex-end;
  margin-top: auto;
}

/* DOT拡大 */
.hero-slider .dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
}

.dot.active{background:var(--brand-gold);}
.hero-slider .controls{display:none;}

/* 全カードリンク化 */
.cards a.card, .new-card, .choyomi .body a.cta{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}

/* HEROラベル */
.hero > .label{
  position:absolute; top:12px; left:-40px; background:var(--brand-red); color:#fff; padding:6px 50px;
  transform:rotate(-45deg); font-weight:700; font-size:14px; letter-spacing:.05em; box-shadow:0 2px 6px rgba(0,0,0,.3);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); z-index:20; pointer-events:none;
}
.hero .meta h2{margin-bottom:8px; font-size:clamp(18px, 3.2vw, 28px); font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.35);}
.hero .meta p{margin-bottom:12px; line-height:1.4;}

/* ちょい読み */
.choyomi{display:flex; gap:12px; align-items:flex-start; background:var(--card-bg); padding:16px; border-radius:var(--radius); margin-bottom:18px; box-shadow:0 1px 6px rgba(0,0,0,.04);}
.choyomi .thumb{flex:0 0 120px; width:120px; border-radius:var(--radius); background:#ddd; background-size:cover; background-position:center;}
.choyomi .body h3{margin-bottom:8px; font-size:clamp(16px, 2.5vw, 18px);}
.choyomi .body p{margin:0; color:var(--muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}

/* NEWSスライダー */
.new-area{margin:18px 0;}
.new-area .wrap-slider{overflow:hidden;}
.new-track{display:flex; gap:12px; animation:scroll 30s linear infinite;}
@keyframes scroll{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}
.new-card{min-width:280px; flex:0 0 280px; background:var(--card-bg); border-radius:var(--radius); padding:12px; box-shadow:0 2px 8px rgba(0,0,0,.04);}
.new-card .thumb{width:100%; aspect-ratio:16/9; border-radius:var(--radius); background-size:cover; background-position:center;}
.new-card h4{margin:8px 0 6px 0; font-size:16px;}
.new-card p{margin:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* カテゴリカード共通 */
.category{margin:20px 0;}
.category h3{margin-bottom:10px;}

/* 親グリッド */
.cards {
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(1,1fr);
}

/* カード縦並び固定 */
.cards a.card {
  display:flex;
  flex-direction:column;
  width:100%; /* これでサムネ＋テキストが1セルに収まる */
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s;
}
.cards a.card:hover { transform: translateY(-2px); }

/* サムネイル */
.card .thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  flex-shrink: 0;
}

/* テキスト部分 */
.card .meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 12px;
}

div.meta h4{
margin:1rem 0 !important;
}

/* WORKS/TEXT用のmax-2cols */
.cards.max-2cols {
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(1,1fr);
}
.cards.max-2cols a.card {
  width:100%;
}

/* レスポンシブ列数 */
@media(min-width:700px){.cards.max-2cols{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.cards.max-2cols{grid-template-columns:repeat(2,1fr);}}

/* ABOUT カードフル幅 */
.cards.full-width a.card {
  flex-direction:row;
  gap:12px;
}
.cards.full-width a.card .thumb {
  flex:0 0 160px; width:160px; aspect-ratio:16/9;
}
.cards.full-width a.card .meta {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:12px;
}

/* カード内テキスト */
.card .meta h4{font-size:clamp(14px,2vw,15px);}
.card .meta p{flex:1; overflow:hidden; text-overflow:ellipsis; color:var(--muted);}

/* レスポンシブ全体 */
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr);}}

footer{padding:28px 0; color:var(--muted); font-size:14px; text-align:center;}